Конструктивные элементы шаблона WordPress | Файл header.php
Цикл статей «Конструктивные элементы шаблона WordPress» будет полезен как создателям шаблонов WordPress, так и любителям в нем поковыряться и чего-нибудь там поменять-поправить.
Довольно часто, редактируя или исправляя какой-либо шаблон WordPress, начинаешь рыться в файлах, изыскивая нужные куски php кода. Ну, например, как обычно в шаблоне прописывается путь к картинке, лежащей в папке images? Чаще всего вот так:
<?php bloginfo('template_directory'); ? >/images/banner.gif
Если вы не набиваете на клаве сей код по нескольку раз на дню, то, скорее всего, нифига не запомните его наизусть. И этапральна! Незачем запоминать то, что всегда можно скопировать и вставить в нужном месте.
Вот чтобы всегда эти куски кода были под рукой, и решил я вынести их в отдельную тему, а заодно разобрать, что каждый из них означает. Думаю, вам тоже пригодится.
Для лучшей ориентации цикл статей разбит на посты согласно деталям самого шаблона, таким как: шапка, контентная часть, сайдбар, подвал и комменты. Сегодня поговорим о шапке.
Шапка, он же header
В файле header.php есть несколько php вставок, которые приходится править чаще всего. Начнем с заголовка или иначе — с тайтла (title). Во многих шаблонах код этого тайтла пишут так же, как и в дефолтном (default), или классическом (classic):
<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
UPD от 08.10.2018: Эти шаблоны давно уже не используются, разве только в совсем древних версиях движка WordPress. Но код вполне рабочий.
В результате мы получаем в первом случае вот такой заголовок:
Имя блога – Название статьи (или страницы)
Во втором случае еще круче:
Имя блога – Архив – Название статьи
Представьте себе, что выдаст Гугл, найдя с десяток ваших постов, когда ваш блог называется как-то так:
«Блог о самой здоровой, вкусной, полезной, замечательной и всеми любимой, неимоверно заряжающей активностью, бодростью и энергией, ее величестве Манной Каше»
Весь десяток постов будет выглядеть совершенно одинаково, так как Гугл и иные поисковики выдают в результатах поиска именно заголовки из title, а длина текста ограничена. Поэтому в первую очередь должно идти название статьи или страницы, а уж затем название блога:
<title><?php wp_title(' '); ?> | <?php bloginfo('name'); ?></title>
Пояснения:
<?php wp_title(' '); ?> — выводит заголовок поста
<?php bloginfo('name'); ?> — выводит название блога
Идем дальше. В некоторых шаблонах нет линка на добавление иконки в адресную строку браузера. Это так называемый фавикон (favicon.ico). Чтобы его добавить, достаточно в пределах тэгов <head></head> прописать следующую строку:
<link rel="Shortcut Icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" type="image/x-icon" />
При этом сама картинка иконки должна лежать в папке images шаблона.
Другая любопытная php вставка в файле header.php выглядит так:
<?php wp_head(); ?>
Это так называемый «хук». Нужен он в большей степени для сторонних плагинов. Это своеобразный якорь, за который цепляются необходимые плагинам скрипты или дополнительные файлы стилей. Если какой-либо из плагинов работает некорректно, проверьте, есть ли в вашем шаблоне этот хук.
Пока мы рассматривали невидимую часть шапки, которая лежит в пределах тэгов <head></head>. Теперь обратимся к видимой части.
Во-первых, это заголовок блога и его описание:
<h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
<p><?php bloginfo('description'); ?></p>
Здесь все достаточно просто. Поясним, что означают части кода:
<?php bloginfo('url'); ?> — ничто иное, как ссылка на сам блог. Сюда автоматически добавляется адрес. Этот кусок кода вполне можно заменить на http://www.ваш-блог.ru
<?php bloginfo('name'); ?> — название блога. О нем мы уже говорили выше. Этот кусок встретится еще раз в подвале.
<?php bloginfo('description'); ?> — выводит описание блога. То, которое вы задаете в настройках в админской части.
Иногда вместо названия блога вставляют картину-логотип. Тогда код заголовка может выглядеть таким образом:
<h1><a href="<?php bloginfo('url'); ?>/"><img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" /></a></h1>
То есть, название заменили на код вывода картинки, а само название блога добавили в альтернативное описание для этой картинки.
В результате, даже если постетитель блога выключит в своем браузере отображение всех картинок, то название блога все равно будет отображаться как текстовая ссылка.
Пояснение:
<img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="" />
Эта конструкция уже встретилась сегодня пару раз. И далее она будет еще не раз появляться. Например, в сайдбаре. Это универсальная конструкция добавления картинок в шаблон WordPress.
Адрес вида:
<?php bloginfo('template_directory'); ?>/images/
отправляет прямиком в папку images текущей темы. Это на самом деле очень удобно. Не нужно прописывать целиком адрес, как это обычно делается в статичном html.
Идем далее. Зачастую в файле header.php прописывается также код вывода меню статичных страниц:
<ul>
<li><a href="<?php bloginfo('home'); ?>">Главная</a></li>
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>
Это обычный маркированный список, где первым пунктом всегда идет ссылка на главную страницу:
<a href="<?php bloginfo('home'); ?>">Главная</a>
Следующий кусок кода более интересен:
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
Во-первых, он выводит все остальные статичные страницы. Это понятно.
Во-вторых, эти страницы можно определенным образом организовать, что и прописано в свойствах, указанных в круглых скобках. Рассмотрим их подробнее:
sort_column — порядок расположения страниц. Может принимать следующие значения:
menu_order — размещение по номеру. Здесь следует различать такие вещи как ID страницы и ее номер. ID присваивается автоматически движком блога, а номер вы прописываете сами в административной панели при создании страницы. Такой способ размещения я считаю более логичным, так как это позволяет сортировать страницы в нужном вам порядке.
post_title — способ размещения по алфавиту. Причем вначале располагаются латинские названия, а уже потом на кириллице. Выглядит довольно бестолково.
post_date — размещение по дате создания.
ID — размещение по порядковому номеру ID
В круглых скобках можно одновременно прописать несколько свойств. Соединяют их между собой знаком амперсанда & Как видим, в нашем коде присутствуют еще два свойства:
depth — глубина, или количество вложенных страниц. По умолчанию стоит значение 1. Это означает, что возможно создать только родительские страницы, такие как: О блоге, Об авторе, Контакты и пр.
Если нужно, чтобы в любой из пунктов меню можно было добавлять вложенные (дочерние) страницы, то следует поставить значение 2. Или иное, если требуется большее количество вложений.
title_li — по-умолчанию стоит пустое значение. Лучше его таким и оставить. Это как бы задает общий заголовок всем остальным страницам, кроме главной. Для чего оно было предусмотрено — не понятно. Но если удалить это свойство, то между главной и всеми остальными страницами вклинится слово «Страницы». Оно вам таки надо?
Более подробно о настройках отображения статичных страниц можно почитать в Кодексе
В следующий раз рассмотрим в подробностях состав контентной части шаблона, выводимого файлом index.php (или home.php)
Конструктивные элементы шаблона WordPress | Файл header.php
Конструктивные элементы шаблона WordPress | Файл index.php | Часть 1
Конструктивные элементы шаблона WordPress | Файл index.php | Часть 2
Конструктивные элементы шаблона WordPress | Файл single.php
Конструктивные элементы шаблона WordPress | Файл comments.php | Вывод комментариев
Конструктивные элементы шаблона WordPress | Файл comments.php | Форма комментирования
Конструктивные элементы шаблона WordPress | Файл sidebar.php
Конструктивные элементы шаблона WordPress | Файл footer.php
Конструктивные элементы шаблона WordPress | Файл 404.php
Отлично, спасибо!
Интересный материал, как раз изучаю строение шаблонов Вордпресса.Спасибо
Пожалуйста, Анастасия! Рад, что смог чем-то помочь.