Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов

Скачать исходный файл

Данная статья является 2 из 3 частей цикла «Создаем тему WordPress на базе статического HTML»:

  1. Создаем тему WordPress на базе статического HTML: Подготовка разметки
  2. Создаем тему WordPress на базе статического HTML: Создаем файлы шаблонов
  3. Создаем тему WordPress на базе статического HTML: Загружаем тему в WordPress

В первой части этой серии статей я рассказала вам, как подготовить файлы HTML и CSS для конвертации в WordPress, как правильно задать структуру, корректный код и классы.

В этой статье вы узнаете, как разделить ваш файл index.html на набор файлов шаблонов для использования в WordPress.

Что вам потребуется:

Для выполнения этого урока вам потребуются основные инструменты для редактирования HTML и PHP:

Редактор по вашему выбору.

Что такое файлы шаблонов?

Тема WordPress состоит из ряда файлов шаблонов. Как минимум для корректной работы тема должна содержать в себе два файла: index.php и style.css.

Однако в хорошо проработанной теме содержимое файла index.php должно быть разделено на основной файл шаблона (index.php) и набор включаемых файлов. Это файлы, содержащие код для заголовка, боковой панели и подвала страницы.

В некоторых темах дополнительные включаемые файлы используются через Цикл; я расскажу об этом подробнее в четвертой части данного цикла.

Данные файлы называются «включаемые», потому что вы вставляете в файл index.php код, который сообщает WordPress, что их содержимое нужно включить в страницу.

Наш файл index.html будет разделен на четыре PHP-файла:

  • index.php, который будет включать в себя основное содержание плюс код для размещения других файлов;
  • header.php, который будет включать в себя раздел <head> плюс все, что находится в шапке и меню навигации;
  • sidebar.php, который будет содержать область боковой панели виджетов;
  • footer.php, который будет содержать (вы уже догадались!) подвал плюс закрытие тега </ BODY>;

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

Если вы хотите получить больше базовой информации по данной теме, прочитайте раздел Кодекса WordPress Template Hierarchy.

Но сейчас все, что нам нужно сделать, это создать набор PHP-файлов и распределить между ними содержимое нашего файла index.php.

Создаем файлы PHP

Для начала мы создадим пустые файлы. Создайте четыре пустых файла со следующими названиями и откройте их в редакторе кода:

index.php
header.php
sidebar.php
footer.php

Убедитесь, что все они находятся в папке с названием вашей темы — в моем случае я назову папку ‘wptutsplus-demo-theme‘. Скопируйте также в эту папку таблицы стилей. Мы не будем редактировать их в этом уроке, но займемся этим в следующей же части серии.

Заполнение файла Header

Далее вам нужно скопировать верхнюю часть ранее созданного файла index.html в файл header.php.

Откройте файл index.html и выберите все от объявления DOCTYPE до открытия тега div class="main":

<!— добавьте класс для тега html на случай, если сайт будет просматриваться через , IE
чтобы он был доступен в основных браузерах -->
<!--[если через более раннюю версию, чем IE 8]><html class="ie7"><![endif]-->
<!--[если через IE 8]><html class="ie8"><![endif]-->
<!--[если через IE 9]><html class="ie9"><![endif]-->
<!--[если через более позднюю версию, чем IE 9]><html><![endif]-->
<!--[если через !IE]><html><![endif]-->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Создание темы WordPress – Создание темы WordPress из статического файла HTML</title>
    <link href="style.css" rel="stylesheet" media="all" type="text/css" />
    <header role="banner">
        <div class="site-name half left"><!-- Название и описание сайта  --></div>
        <div class="site-name half left">
            <h1 class="one-half-left" id="site-title"><a title="Создание темы
 WordPress из статического файла HTML</title> - главная" rel="home">Создание темы WordPress </a></h1>
            <h2 id="site-description">Создание темы WordPress из статического файла html</h2>
        </div>
         <!-- Боковая область шапки сайта – она будет заполняться через виджет позже -->
        <aside class="header widget-area half right" role="complementary">
            <div class="widget-container">Здесь будет располагаться виджет - с адресом
 (или любой другой информацией по вашему усмотрению)
</div><!-- .widget-container -->
        </aside><!-- .half right -->
    </header><!-- header -->
 
    <!-- Меню навигации – удалите элемент nav, если будет использоваться верхнее горизонтальное меню -->
    <nav class="menu main"><?php /*  
Позволяет экранным дикторам / текстовым браузерам пропустить меню навигации 
и перейти непосредственно к значимой части содержания */ ?>
        <div class="skip-link screen-reader-text"><a title="Skip to content" href="#content">Пропустить, чтобы перейти к контенту</a></div>
        <ul>
            <li><a href="#">На главную</a></li>
            <li><a href="#">Последние записи</a></li>
            <li><a href="#">Интересные статьи</a></li>
        </ul>
    </nav><!-- .main -->
    <div class="main">

Скопируйте данный код и вставьте его в файл header.php.

Сохраните изменения.

Заполнение файла боковой панели

Теперь повторите все те же действия для файла боковой панели.

Если ваш файл index.html, имеет выделенный элемент aside class=»sidebar», и все, что касается сайдбара, содержится в нем.

<!-- Сайдбар - в WordPress будет заполняться через виджет -->
<aside class="sidebar widget-area one-third right" role="complementary">
    <div class="widget-container">
        <h3 class="widget-title">Виджет в сайдбаре</h3>
        <p>Это виджет сайдбара, в вашей теме WordPress вы можете выводить его в любом месте.</p>
    </div><!-- .widget-container -->
    <div class="widget-container">
        <h3 class="widget-title">Еще один виджет в сайдбаре</h3>
        <p>Второй виджет в сайдбаре, возможно вы будете использовать плагин для вывода социальных закладок или просто список популярных статей.</p>
    </div><!-- .widget-container -->
</aside>

Скопируйте данный код в файл sidebar.php и сохраните изменения.

Заполнение файла футера

Процесс заполнения файла footer.php идентичен.

Скопируйте весь код, который располагается после сайдбара в вашем файле index.html:

</div><!-- .main -->
<footer>
    <!-- поле .fatfooter – я использую его, чтобы можно было для фона
задавать цвета подложки страницы, в то же время стиль содержания
соответствовал  стилю всего макета сайта -->
    <aside class="fatfooter" role="complementary">
        <div class="first quarter left widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Первый виджет в подвале</h3>
                <p>Область виджета в подвале – для ее заполнения используется плагин или виджет.</p>
            </div><!-- .widget-container -->
        </div><!-- .first .widget-area -->
        <div class="second quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Второй виджет в подвале</h3>
                <p>Область виджета в подвале – для ее заполнения используется плагин или виджет.</p>
            </div><!-- .widget-container -->
        </div><!-- .second .widget-area -->
        <div class="third quarter widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Третий виджет в подвале</h3>
                <p> Область виджета в подвале – для ее заполнения используется плагин или виджет.</p>
            </div><!-- .widget-container -->
        </div><!-- .third .widget-area -->
        <div class="fourth quarter right widget-area">
            <div class="widget-container">
                <h3 class="widget-title">Четвертый виджет в подвале</h3>
                <p> Область виджета в подвале – для ее заполнения используется плагин или виджет.</p>
            </div><!-- .widget-container -->
        </div><!-- .fourth .widget-area -->
    </aside><!-- #fatfooter -->
</footer>

Скопируйте данный код в файл footer.php.

Сохраните изменения.

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

Это связано с тем, что если вы позже настроите файл шаблона под страницы, которые не имеют боковой панели, вы просто исключите из шаблона файл сайдбара, а оставите только футер, и тогда блок .main все равно будет закрываться корректно.

Заполнение файла Index

И последним этапом будет непосредственно создание файла index.php. Сделать это будет немного сложнее, вам придется добавить некоторые функции PHP, которые WordPress использует для включения заголовка, боковой панели и подвала.

Откройте пустой файл index.php и добавьте код, приведенный ниже:

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

Убедитесь, что между началом включаемого заголовка и включаемой боковой панелью оставлено пространство — сюда вы будете добавлять содержимое индексного файла, которое не является частью ни заголовка, ни боковой панели, ни футера.

Теперь откройте файл index.html еще раз и выберите весь код между открывающимся блоком элемента class=»main» и боковой панелью:

<div class="two-thirds" id="content">
    <article class="post" id="01">
        <h2 class="entry-title">Это заголовок записи или страницы</h2>
        <img class="size-large" alt="" src="images/featured-image.jpg" />
        <section class="entry-meta">
            <p>Опубликовано 5 ноября Рэйчел МакКоллин</p>
        </section><!-- .entry-meta -->
        <section class="entry-content">
            <p>Это содержимое записи. В разделе Архива записей это может быть
 превью поста или  же текст записи целиком.</p>
            <h3>Изображения в WordPress</h3>
            <img class="alignright" alt="" src="images/another-image.jpg" />
            <p>Эта запись содержит несколько изображений – как только вы конвертируете этот файл html  в тему WordPress, вы сможете использовать его инструменты для обработки изображений, и работать с изображениями будет намного проще!</p>
 
 <p> Она также имеет характерное изображение - опять же, через WordPress вы сможете обрабатывать их, вы никогда больше не вернетесь к статическому HTML. 
В части 10 настоящей серии вы узнаете, как добавить к вашей теме поддержку
 Избранных изображений. 
Вы можете использовать их для автоматического отображения картинок в одиночных и архивных записях.
 В части 11 вы узнаете, как создать пользовательскую страницу архива.</p>
        </section><!-- .entry-content -->
        <section class="entry-meta">
            <h3>Категория и метки</h3>
            <p> В этом разделе вы сможете выводить категорию,
 к которой принадлежит запись, и связанные с ней метки. 
Как это сделать с помощью шаблона тегов, я расскажу в четвертой части  этой серии.
</p>
        </section><!-- .entry-meta -->
    </article><!-- #01-->
</div><!-- #content-->

Скопируйте этот код и вставьте его в свой файл index.php ниже строки get_header ( ).

Сохраните изменения в файле index.php.

Подводим итоги

Теперь у нас есть основа для темы WordPress. Вы превратили ваш HTML-файл в набор файлов PHP и настроили их на совместную работу.

В следующей части этой серии статей я расскажу вам, как оредактировать таблицу стилей, чтобы создать рабочую тему, и загружу тему в WordPress.

Перевод статьи «Creating a WordPress Theme From Static HTML: Creating Template Files» был подготовлен дружной командой проекта Сайтостроение от А до Я.