Построение шаблонов темы WordPress. Хедер
Итак, у Вас есть сайт на HTML или PHP, который Вы хотели бы перенести на платформу WordPress. В прошлой статье мы провели некоторые подготовительные работы для выделения из шаблона страницы своего сайта элементы будущей темы WordPress. Теперь пришло время приступить к построению самих шаблонов.
Но предварительно рассмотрим еще один важный вопрос.
Табличная и блочная верстка
Если Вы внимательно посмотрите на HTML страницу своего сайта, то, скорее всего, весь контент на странице сайта окажется оформленным в виде таблицы TABLE. Ячейками этой таблицы будут хедер страницы, боковая панель, основной контент и футер (подвал). При этом внутри этих ячеек могут встречаться и другие таблицы.
Такая организация страниц имеет свои удобства. Таблицы являются прекрасным средством структурирования, и они достаточно широко используются в веб дизайне для создания HTML и PHP страниц. Но таблицы также имеют и свои недостатки.
Одним из таких недостатков является то, что таблицы не так просто разбивать на составляющие. Действительно, как выделить из таблицы хедер, если он размещен в группе ячеек главной таблицы? А в теме WordPress принято хранить хедер, сайдбар и футер отдельно от основного контента. Поэтому в вордпрессовских темах используется не табличная, а блочная верстка.
Это позволяет, с одной стороны, обеспечить автономность каждого из элементов темы, а, с другой стороны, достаточно просто собирать их воедино. Таким образом, вся страница сайта на WordPress в конечном итоге оказывается построенной из блоков DIV. Хотя, в принципе, никто не запрещает использовать таблицы внутри этих блоков.
Но при переходе на WordPress, если Ваш сайт был построен с использованием табличной верстки, необходимо будет выделить вышеуказанные элементы страницы из таблиц и оформить их как блоки. В результате куски таблицы не переходят в новый шаблон, а просто необходимые элементы извлекаются из оболочки таблиц и переносятся в соответствующие блоки.
После этого можно переходить к построению файлов темы.
Файл functions.php
Этот файл может быть достаточно сложным, а может быть простым. Он предназначен для обеспечения соответствующей функциональности Вашего сайта на WordPress.
Например, именно этот файл отвечает за виджетизацию Вашей темы, то есть за возможность расширять сайдбар путем добавления тех или иных стандартных виджетов (функциональных блоков).
Для обеспечения возможности работы с виджетами включаем в файл functions.php следующие строки:
<?php
if ( function_exists('register_sidebar') ) {
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
}
Далее, можно добавить ряд возможностей, расширяющих работу с темами в WordPress 3.0. Так, для возможности менять фоновые рисунки из админ панели добавляем строку:
add_custom_background();
О других аналогичных возможностях более подробно можно почитать в соответствующей статье.
Если Вы хотите, чтобы WordPress автоматически добавил к хедеру темы строки со ссылками на фиды RSS, добавляем следующую строку:
add_theme_support( ‘automatic-feed-links’ );
И не забываем в конце файла поставить закрывающий тэг PHP:
?>
Файл сохраняем.
Шаблон header.php
В этом файле размещается заголовок (хедер) страницы. Поскольку Вы уже разбили шаблон своей страницы сайта на логические части, теперь Вы можете скопировать строки, относящиеся к хедеру страницы, и вставить их в (пустой) файл header.php. Это будет основа Вашего хедера.
При построении темы WordPress важно включить в начале файла информацию DOCTYPE, поскольку она необходима браузерам для правильного представления страницы. Эта же информация необходима и валидаторам для проверки правильности кодирования.
Вообще говоря, с переходом на стандарт HTML5 эти данные будут представлены просто – одной строкой, как это уже имеет место в новой стандартной теме Twenty Ten.
<!DOCTYPE html>
Но поскольку переход на HTML5 только начинается, можно задать эти данные так, как они заданы в предыдущей стандартной теме Кубрик:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Следующая строка дает информацию браузеру о языке, который используется на Вашем сайте:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
Само значение параметра выбирается из базы данных MySQL с помощью кода <?php…?>.
Далее начинается секция head. Так как блог является социальным сайтом, то сюда включена поддержка XFN (об этом Вы можете узнать более подробно на сайте — www.gmpg.org/xfn/intro):
<head profile="http://gmpg.org/xfn/11">
Затем идет строка, выводящая тэг TITLE:
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
Далее идет строка, указывающая таблицу кодировки страницы, значения параметров берутся из базы данных:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
Следующая строка указывает ссылку для файла стилей:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" media="screen" />
Если Вы предполагаете использовать пингбэки, то следом идет строка:
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Следующая строка необходима для правильной работы с вложенными комментариями:
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
И, наконец, перед окончанием секции head идет хук («крючок», hook) WordPress’а, который необходим для правильной работы с плагинами:
<?php wp_head(); ?>
</head>
На этом завершается секция head, и начинается секция body. В файл хедера мы включаем те части секции body, которые ответственны за вывод заголовка страницы и, возможно, горизонтального меню, следующего за заголовком, то есть тех элементов, которые повторяются на каждой странице сайта.
<body <?php body_class(); ?>>
<div id="page">
Примечание: Данный тэг DIV является открывающим для довольно большого блока. Этот блок начинается в файле хедера, продолжается в файлах основного контента и сайдбара, и закрывается лишь в файле футера страницы. Все это вполне нормально, и не должно Вас смутить.
Дальше код может несколько отличаться в зависимости от того, используете ли Вы графическую картинку в заголовке страницы, или нет. Строки могут быть примерно такие:
<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<div><?php bloginfo('description'); ?></div>
</div>
</div>
Здесь предполагается, что в секции id headerimg файла стилей styles.css указана фоновая картинка для заголовка. Собственно говоря, если картинки нет, то Вы просто не указываете ее в файле стилей.
Но если Вы не хотите указывать картинку в виде фонового рисунка, то можно вывести ее и иначе:
<a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" style="border: none;" /></a>
Естественно, имя файла картинки и имя сайта в alt указываете свое.
Затем можно вывести горизонтальное меню, если оно есть. Так или иначе, оно оформляется в виде неупорядоченного списка ul.
Как известно, в WordPress 3.0 включена возможность формирования пользовательских меню. Для вывода такого меню в файле header.php надо задать следующую строчку:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
Но можно и просто вывести в качестве меню список страниц или список категорий:
<?php wp_list_pages('title_li='); ?>
или
<?php wp_list_categories( $args ); ?>
На этом можно считать файл хедера сформированным. Те коды, которые Вы перенесли с Вашей страницы сайта вначале, должны были модифицироваться в те строки, что мы получили в конце. Поэтому, если что-то от них еще осталось, то либо встройте их в соответствующие места файла, либо удалите все лишнее.
Файл сохраните.
В следующих статьях мы продолжим построение шаблонов нашей темы WordPress.
Спасибо!!!Мне очень понравилось! С наступающим Вас Новым Годом! Любви-счастья и творческих успехов!