Структура шаблона страницы темы WordPress

Разделяем HTML-страницу на составляющие и начинаем создание универсальной темы WordPress с использованием семантической разметки Schema.org.
Минимизируем код в файлах русской темы для конкретного сайта.

В русской теме для своего сайта (в отличие от универсальной темы с поддержкой перевода на разные языки и с другими опциями) будем использовать минимум функций WordPress.

Структура исходной HTML-страницы темы WordPress

Рассмотрим структуру исходной HTML-страницы как основу для файла шаблона темы WordPress index.php.
Для содержимого внутри тега body - div wrapper задаем класс hfeed. Элемент микроданных hfeed сообщает поисковым роботам, что на сайте публикуется синдицированный контент (syndicated content) - RSS-потоки или фиды (feed). (о микроданных и schema.org см., например, в Яндекс.Помощи)
Имена классов и ID используем семантические, говорящие о содержимом элементов разметки, а не о том, где они расположены или как выглядят  (class="widget-area" - область виджетов вместо class="sidebar-left" - боковое меню).

<html>
<head>
</head>

<body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">

            <div id="branding">
            </div><!-- #branding -->

            <div id="access">
            </div><!-- #access -->

        </div><!-- #masthead -->
    </div><!-- #header -->

    <div id="main">
        <div id="container">

            <div id="content">
            </div><!-- #content -->

        </div><!-- #container -->

        <div id="primary" class="widget-area">
        </div><!-- #primary widget-area -->

        <div id="secondary" class="widget-area">
        </div><!-- #secondary widget-area -->
    </div><!-- #main -->

    <div id="footer">
        <div id="colophon">

            <div id="site-info">
            </div><!-- #site-info -->

        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Все содержимое тега body находится внутри контейнерного div, а в основной (main) части страницы две области виджетов (widget-area) добавлены после содержимого (content).
Это два ключевых момента разметки страницы, благодаря которым можно создавать разметку с 1, 2 или 3 колонками с помощью нескольких строк в CSS-файле.

Файлы темы

Сначала наша базовая тема будет включать 6 файлов. Создаем папку темы внутри папки wp-content/themes/ и создаем в ней файлы:

1. Обязательный файл стилей style.css, в начале которого должно быть задано название темы

/*
Theme Name: Моя тема
...
*/

Подробнее см. в Справочнике: Тема WordPress и ее составляющие

2.  Файл функций темы functions.php
3. Файл index.php (обязательный) и еще 3 файла, в которые мы поместим код вывода отдельных блоков-составляющих веб-страницы:

  • header.php
  • sidebar.php
  • footer.php

В файл header.php вставляем код из начала исходной HTML-страницы, включая тег

<div id="main">

а в файл footer.php - код из нижней части исходной HTML-страницы, включая закрывающий тег

</div><!-- #main -->

Области виджетов будут находиться в боковом меню - переносим их в файл sidebar.php:

<div id="primary" class="widget-area">
</div><!-- #primary -->

<div id="secondary" class="widget-area">
</div><!-- #secondary -->

Получаем такой файл index.php

<?php get_header(); ?>
<div id="container">

    <div id="content">
    </div><!-- #content -->

</div><!-- #container -->

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

Немного подробнее на английском см. Creating a Theme HTML Structure

Интересно, что файл темы footer.php еще не создан, а функция WordPress
 <?php get_footer(); ?>
(которая должна его подключать)  выводит текст со ссылками на сайт  wordpress.org и страницы RSS записей и комментариев блога:

Сайт «Название сайта» работает на WordPress
Записи (RSS) и комментарии (RSS)

 

Опубликовано в рубрике Самая простая тема для WordPress | с метками . |

Еще записи

Один комментарий на «Структура шаблона страницы темы WordPress»

  1. Вера говорит:

    Здравствуйте! У меня вот какой вопрос - почему в этом базовом шаблоне, на основе которого будем строить и паги и странички со статьями мы не предусматриваем распорки перед footer, ведь если статья будет маленькая футер поднимется и не будет внизу браузера? Надеюсь на ответ.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *