Как перенести статический HTML шаблон на WordPress

Цель эксперимента — конвертировать HTML шаблон в шаблон WordPress

Для этого, мы возьмем простой шаблон HTML и постараемся перенести его на WordPress.

Зачем это делать? Есть несколько причин.

  1. понять, как работает механизм тем в WordPress
  2. научиться создавать собственные темы с нуля
  3. научиться конвертировать HTML шаблоны, и даже переносить целый HTML сайт на WordPress
к содержанию ↑

Подготовительная стадия

До того как начнем натягивать HTML шаблон на WordPress, нужно подготовить рабочую среду.

Я буду использовать свой любимый и незаменимый Bitnami stack в качестве локального сервера.

Шаблон HTML после быстрого поиска я выбрал вот этот — Simple Factorial. Дизайн конечно простоват, но в целях эксперимента подойдет. Есть заголовок, меню, футер, сайдбар.

Simple-Factorial-by-Bryant-Smith.png

к содержанию ↑

Начнем переносить наш HTML шаблон на wordpress

Подготавливаем файлы исходного шаблона

Создаем новую папку в каталоге с темами WordPress. Распаковываем и копируем туда наш шаблон Simple Factorial

Первое, что я сразу сделал, перенес изображения, вызываемые из файла стилей в отдельный каталог img/, чтобы они не мешались в корневой папке. И отредактировал style.css соответствующим образом.

kak-natyanut-html-shablon-na-wordpress-1-shag-sozdanie-papki-temy.png

к содержанию ↑

Подключаем тему в админку

Чтобы тема заработала и появилась в админке WordPress, надо в самом верху файла Style.css записать следующие инструкции

/*
Theme Name: Simple Factorial
Theme URI: //www.quackit.com/html/templates/download/bryantsmith/SimpleFactorial/
Author: Bryant Smith
Author URI: //www.quackit.com/
Description: Simple Factorial is the same as Simple * Simple-1 * Simple-2 * Simple-3 ; or in other words, a whole lot of simple. This template is meant to be really simple to use, and really simple to naviagate. It should also do well with search engines for that reason.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: //www.gnu.org/licenses/gpl-2.0.html
*/
к содержанию ↑

Создаем файл header.php

Копируем в него из index.html следующий код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Simple Factorial by Bryant Smith</title>
</head>

Обратите внимание, я не скопировал меню, идущее за тегом head, хотя оно будет также находиться в заголовке, и мы туда добавим полноценное динамическое меню WordPress.

kak-natyanut-html-shablon-na-wordpress-shag-2-zagolovok-sajta.png

Теперь будем адаптировать файл header.php. Вот готовый код, и я объясню как он работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="//www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
 <title><?php bloginfo('name'); ?></title>
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
 <?php wp_head(); ?>
 </head>
 

Я добавил в него 2 строчки, изменил содержание тега title, и ссылку на файл стилей.

<?php bloginfo('stylesheet_url'); ?>

— выводит ссылку на файл стилей

<title><?php bloginfo('name'); ?></title>

— динамически формирует title из названия сайта

<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

— возвращает URL файла xmlrpc.php

<?php wp_head(); ?>

— очень важная функция wp_head(), которая обеспечивает работу плагинов, подключает стили и скрипты на страницы сайта.

к содержанию ↑

Создаем файл footer.php

Копируем в него следующий участок кода:

<div id="footer"><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a> by <a href="#">My Site</a>
</div>

<?php wp_footer(); ?>
</body>
</html>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>

— вывожу название сайта с ссылкой на него

<?php wp_footer(); ?>

— хук wordpess, аналогичный wp_head(), только для подвала.

к содержанию ↑

Создаем файл index.php, основной шаблон для страниц сайта

Подключаем в него заголовок и подвал

<?php get_header(); ?> <?php get_footer(); ?>

Копируем оставшееся содержание из файла index.html и вставляем в index.php между хэдером и футером.

kak-natyanut-html-shablon-na-wordpress-shag-5-sozdanie-fajla-index.php_.png

Теперь сделаем еще один шаг, перенесем код меню и заголовка в header.php. Файл с изменениями выглядит вот так.

kak-natyanut-html-shablon-na-wordpress-perenos-menyu-v-fajl-header.php_.png

В принципе, можно активировать тему, и смотреть что получилось.

kak-natyanut-html-shablon-na-wordpress-SHag-5-3-Vid-sajta.png

Вывелся наш шаблончик. Правда со статическим содержанием и сайдбаром. Теперь нужно сделать их динамическими.

к содержанию ↑

Выводим записи в содержании динамически

Вот код динамического вывода записей в основном содержании, ниже будут пояснения.

<div id="contentColumn">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>


<div class="divider"></div>

 <?php the_content(); ?>
 <?php endwhile; else : ?>
 

<?php _e( 'Sorry, no posts were found.' ); ?>

 <?php endif; ?>
 </div>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>;

— если записи найдены, и пока они есть, извлекать их из базы данных

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

— Вывести название записи с ссылкой ЧПУ в теге h2

<?php the_content(); ?>

— вывести саму запись

<?php endwhile; else : ?>

— завершение цикла, иначе


<?php _e( 'Sorry, no posts were found.' ); ?>

— если записи не найдены, вывести информативное сообщение

Обратите внимание, я сохраняю изначальную разметку и классы шаблона, чтобы стили правильно подключились.

Для проверки, я создаю несколько записей в админке WordPress, и убеждаюсь, что тема правильно работает.

к содержанию ↑

Добавим sidebar/боковую колонку с виджетами

Создаем файл sidebar.php, переносим в него весь участок кода, выводящий боковую колонку в шаблоне.

Вместо него вставляем php функцию:

<?php get_sidebar(); ?>

kak-natyanut-html-shablon-na-wordpress-sozdanie-sajdbara.png

Сохраняем файл, проверяем работу. Sidebar всё еще статический, просто он выводится из шаблона.

к содержанию ↑

Зарегистрируем sidebar в functions.php

Файл functions.php позволяет дополнять WordPress новой функциональностью и возможностями, так же как и плагины. Он лежит в корне темы.

Создаем functions.php, и вписываем в него следующий код.

 if ( function_exists( 'register_sidebar' ) ) {
 register_sidebar( array (
 'name' => __( 'Primary Sidebar', 'primary-sidebar' ),
 'id' => 'primary-widget-area',
 'description' => __( 'The primary widget area', 'dir' ),
 'before_widget' => '<div class="subHeader">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>', )
 );
 }
 

Если функция существует, зарегистрировать sidebar, мы передаем ей название сайдбара, его ID, описание, html теги, которыми окружены его элементы. Обратите внимание на класс оборачивающего блока subHeader, он взят из шаблона Simple Factorial, чтобы стили наложились правильно. Очень важно соблюдать изначальную разметку!

Смотрим, что получилось, предварительно добавив несколько виджетов в появившейся области Primary Sidebar.

kak-natyanut-html-shablon-na-wordpress-dinamicheskij-sajdbar.png

Отлично. Теперь давайте разберемся с меню.

к содержанию ↑

Регистрируем динамическое меню в functions.php

В файл functions.php добавляем поддержку меню с помощью стандартных функций WordPress:

add_theme_support('nav-menus'); if ( function_exists('register_nav_menus')) { register_nav_menus( array( 'main' => 'Main Nav' ) ); } 

Открываем файл header.php, заменяем блок статического меню строкой:

 <?php wp_nav_menu( array('menu' => 'Main', 'container' => 'nav' )); ?> 

В итоге должно получиться вот так:

kak-natyanut-html-shablon-na-wordpress-dinamicheskoe-menyu.png

Можно уже создавать страницы в WordPress, и через админку добавлять их в меню.

На этом шаге мы привели полностью вид главной страницы к шаблону. Мы добавили динамический сайдбар и меню. Но на этом наша тема еще не готова. Мы создадим и настроим также следующие шаблоны.

  • single.php — шаблон для вывода записи
  • page.php — шаблон для обычной страницы
  • 404.php — шаблон для страницы 404
  • searchform.php — шаблон для формы поиска

Создавать их уже будет проще, имея главную страницу. Но есть некоторые детали, на которые следует обратить внимание.

Запись вышла большая, поэтому продолжение во второй части.