Разделяем 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.phpsidebar.phpfooter.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, ведь если статья будет маленькая футер поднимется и не будет внизу браузера? Надеюсь на ответ.