header.php — как он устроен? DIW#7

29.06.2012

Header.php

Очередная статья из цикла «Digging into WordPress». Сегодня продолжим говорить о том, как же устроена тема оформления и подробно остановимся на файле header.php. Это один из важнейших файлов любого шаблона, поэтому я хотел бы разобрать его детально.

Итак, header.php в 99% шаблонов грузится самым первым, при отображении любой страницы и его содержание повторяет таковое у обычной HTML страницы, с оглядкой на возможности WordPress. Обычно именно в нем разработчики шаблонов подключают стили и библиотеки, устанавливают динамический title странице и помогают браузеру посетителя узнать, чего же ждать от кода этой страницы.

Начнем с DOCTYPE. Я не буду рассказывать для чего он нужен и какой лучше — это тема другого разговора. Самым стандартным стандартом на сегодняшний день является доктайп XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Кстати, доктайп HTML5 выглядит гораздо проще:

<!DOCTYPE html>

Можно использовать и его, но HTML5 пока не признан стандартом, поэтому полностью валидацию страница не пройдет, имейте ввиду.
Следом идет тег <html> с атрибутами языка и декларированием XML. Плюс — WordPress может немного помочь браузеру и определить атрибуты языка страницы:

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

Доктайп и <html> я даю стандартные, для корректной работы. Вы, конечно же, можете использовать свои варианты.

Меta теги и Title

Секция head традиционно начинается с прописывания тегов <meta>, которые можно охарактеризовать как «информация об информации». В них содержатся служебные данные, которые сообщают браузеру кодировку, тип контента и другие подобные вещи. WordPress умеет автоматически отдавать эти данные, в зависимости от того, какие настройки стоят в админ-панели. Выглядит это так:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta charset="<?php bloginfo('charset'); ?>">

Два других тега, description(важный) и keywords(не очень важный), тоже могут быть прописаны. Однако, это дело лучше доверять специальным плагинам, вроде All In One SEO Pack или Platinum SEO Pack. О них мы еще поговорим.
Идем дальше и рассмотрим тег <title>. Именно в этом теге содержится информация, отображающаяся в заголовке окна браузера, она передается как заголовок записи при отправке ссылки в социальные сети или сохранении закладки. Обычно этой информацией тоже заведуют плагины AIO и Platinum SEO. Но есть и замечательная функция, которая работает ничуть не хуже:

<title>
<?php if (function_exists('is_tag') && is_tag()) {
single_tag_title('Записи с тегом "'); echo '" - ';
} elseif (is_archive()) {
wp_title(''); echo ' Архив - ';
} elseif (is_search()) {
echo 'Результаты поиска "'.wp_specialchars($s).'" - ';
} elseif (!(is_404()) && (is_single()) || (is_page())) {
wp_title(''); echo ' - ';
} elseif (is_404()) {
echo '404 - Ничего не найдено - ';
}
if (is_home()) {
bloginfo('name'); echo ' - '; bloginfo('description');
} else {
bloginfo('name');
}
if ($paged > 1) {
echo ' - page '. $paged;
} ?>
</title>

В зависимости от типа страницы, которая выводится (архив записей, главная и прочие) — функция меняет title страницы. Обычно, именно эта функция используется в шаблонах. Если у вас установлен плагин для этих целей — функцию можно смело удалить.

Еще один важный момент — подключение CSS и JS файлов. Для этого WordPress предлагает кучу вариантов, давайте посмотрим на них.

Стандартная ситуация — файл стилей style.css расположен в корневой директории с шаблоном. Подключается он так:

<link rel='stylesheet' href='<?php bloginfo("stylesheet_url"); ?>'
type='text/css' media='screen' />

Функция bloginfo() с параметром stylesheet_url возвращает точный URL размещения файла со стилями. Эта функция умеет предоставлять множество различной информации и довольно часто используется. Ниже я дам небольшую шпаргалку по ней.

Чуть сложнее дела обстоят с JS. Допустим, вы хотите подключить библиотеку Jquery, которая используется повсеместно, и какой-то собственный скрипт. Jquery подключается достаточно просто:

<?php wp_enqueue_script('jquery'); ?>

У этой функции есть два явных преимущества

  • Это просто. Вы не заморачиваетесь, где что лежит. Оно просто работает.
  • Это удобно. WordPress знает, что библиотека загружена и хорошо написанные плагины используют ее, не загружая свою дополнительную копию. Таким образом мы уходим от возможных проблем с версиями библиотек и конфликтами между ними.

Собственный файл подключить ненамного сложнее:

<script type="text/javascript"
src="<?php bloginfo('template_url'); ?>/js/myscript.js">
</script>

Опять используется функция bloginfo(), но с другим параметром.

Теперь давайте представим ситуацию, что вам необходимо загружать определенные файлы стилей только на некоторых страницах, например на странице архивов. Делается это с помощью условных тегов (conditional tags):

<?php if (is_page_template('page-archives.php')) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/
archives.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/
js/archives.js"></script>
<?php } ?>

Этот файл будет загружен только в том случае, когда загружается определенный тип страницы. Аналогично можно подключить некоторые стили только для страницы с определенным ID:

<?php if (is_page("5")) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/
archives.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/
js/archives.js"></script>
<?php } ?>

Вообще, условные теги это очень обширная и интересная тема. Пожалуй, будет по ним отдельная статья в рамках этого цикла.

В итоге, подключение библиотек JS будет выглядеть примерно так:

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/
myscript.js"></script>
<?php if (is_page("5")) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/
archives.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/
js/archives.js"></script>
<?php } ?>

Обратите внимание на функцию wp_head(). Эта функция — своеобразный информационный «тег», который говорит системе — «Эй, секция head — это тут». К этой функции могут привязываться плагины, какие-то пользовательские функции и прочее. Ее наличие не обязательно, но очень и очень желательно. Без нее вероятность возникновения проблем резко повышается

И напоследок, как и обещал, небольшая шпаргалка для функции bloginfo()

Шпаргалка по bloginfo

Шпаргалка по bloginfo

Скачать PDF(350kb)

Вот и все на сегодня. Удачного дня и хороших вам выходных

follow us in feedly

, ,

Комментариев: 13

  1. сергей

    Статья отлично написана, доступно и с примерами. Спасибо!

    Ответить
  2. Макс

    Не блог, а поток хороших новостей. Как у вас так получается?

    Ответить
  3. Даниил

    Поиск по каталогу это куда нажимать?(вопрос на уровне блондинки, ну всё же)

    Ответить
  4. GerinG

    Даниил — либо перевести плагином на русский, либо же заменить в файле шаблона, если автор не предусмотрел перевод для этого. Как найти? Notepad++ и поиск по каталогу с шаблоном. Это должно помочь

    Ответить
  5. Даниил

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

    Ответить
  6. Finni

    Жаль, что в Интернете мало находила таких содержательных материалов

    Ответить
  7. GerinG

    Руслан, безусловно, в целях оптимизации все это можно (и нужно) заменить статикой. Но я в статье поднимаю общие моменты, для полного понимания структуры.
    Откуда ноги растут и что можно при желании заменить/удалить — это отдельная тема

    Ответить
  8. Руслан

    не многовато запросов получается? блогинфо вообще лучше убрать и прописать статичные пути)

    Ответить