Конструктивные элементы шаблона WordPress | Файл header.php

wplogo.gifДанный цикл статей будет полезен как создателям шаблонов 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>

В результате мы получаем в первом случае вот такой заголовок:

Имя блога – Название статьи (или страницы)

Во втором случае еще круче:

Имя блога – Архив – Название статьи

Представьте себе, что выдаст, к примеру, Гугль, найдя с десяток ваших постов, когда ваш блог называется как-то так:

«Блог о самой здоровой, вкусной, полезной, замечательной и всеми любимой, неимоверно заряжающей активностью, бодростью и энергией, ее величестве Манной Каше»

Весь десяток постов будет выглядеть совершенно одинаково, так как Гугль и иные прочие выдают в результатах поиска именно заголовки из 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

20.04.2010

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5,00 out of 5)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

3 комментария

  1. Вадим

    18.10.2014

    Отлично, спасибо!

  2. Анастасия П.
    http://ablexur.ru/
    26.02.2017

    Интересный материал, как раз изучаю строение шаблонов Вордпресса.Спасибо

  3. Игорь Квентор

    26.02.2017

    Пожалуйста, Анастасия! Рад, что смог чем-то помочь.

Оставить комментарий: