Главная страница » Как перенести статический HTML шаблон на WordPress

Как перенести статический 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

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

Подготавливаем файлы исходного шаблона для переноса на 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>
 

В нем я вывел динамически тег 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 — шаблон для формы поиска

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

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

  1. «Выводим записи в содержании динамически» — в какой файл писать нижеследующий код? Если в index.php, то отображаются одновременно и набираемый в админке текст страницы и текст главной страницы который копировали.

    1. В index.php. После того, как убедились, что записи динамически выводятся, убираем статический контент. На этой странице есть скриншот как файл index.php будет выглядеть. Во второй части статьи тоже есть скриншот page.php, он практически копия index в этом мега простом шаблоне.

      1. С этим разобрался. Но вот когда вставляем код для sidebar после надписи: «Создаем functions.php, и вписываем в него следующий код.», то вместо русских букв в админке wordpress и на страницах сайта получаются иероглифы. Пробовал перед кодом написать открывающий тег php, тогда иероглифов нет, но sidebar из админки все равно не работает. Если в конце когда потом закрыть php, то иероглифы опять.

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

      1. Обязательно зайду, скину успехи свои :) Или неудачи :) Статья прям хорошая, написано по делу без воды.

    1. На скриншоте показано.

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

      1. На скриншоте указано, что переносится статический html. Но там же не статика должна быть. Ну да ладно, пойдем на другой сайт)

  2. Не смог прокомментировать во второй части. Скажите, а как можно к отдельным страницам подключать скрипты и css? Глобально через functions.php понял как это делать. Но скрипты то не нужны на всех страницах.

    1. привет, Антон. Ничего сложного.

      Если только для одной страницы, можешь воспользоваться простой проверкой
      if ( is_page( ‘id’ ) ) {
      wp_enqueue_style(…);
      }

      Если правило больше, чем на одну страницу, создаешь шаблон и проверяешь условием

      if ( is_page_template( ‘template-mycustom-page.php’ ) ) {
      wp_enqueue_style(…);
      }
      }
      И назначаешь шаблон в админке нужным страницам

    1. Спасибо. Раньше стоял лайтбокс довольно долго, потом всё-таки решил удалить, а изображения остались большими. Верное замечание.

  3. Добрый день, не работают относительные пути «img/pic.png» только так «http://site.ru/wp-content/themes/convert/img/pic.png» что делать как быть?

  4. —«Очень важно соблюдать изначальную разметку!»
    , а при регистрации сайдбара виджет полностью оборачивается в div с классом subheader; хотя в html шаблоне этот div относится только к классу заголовка.
    Поправьте меня, если я ошибаюсь, но у меня в таком варианте виджеты накладывались друг на друга. а если прописать
    ‘before_widget’ => »,
    ‘after_widget’ => «»,
    ‘before_title’ => »,
    ‘after_title’ => »
    , то все становилось на место.

    браузер Яндекс 17.4.1.955

    1. Данный блок кода некорректно отображался на странице, я его сейчас поправил.

      Вас не буду поправлять, хотя у меня на тот момент приведенный код нормально сработал. Главное, суть вы правильно понимаете. Если у вас работает и так — замечательно.

Добавить комментарий

%d такие блоггеры, как: