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