Данный цикл статей будет полезен как создателям шаблонов 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)
Спасибо за статью, полезно было повторить давно пройденный материал. Здесь не лишним будет добавить, что не следует прописывать php коды, которые вызывают адрес блога, его название и описание. Лучше писать их напрямую, чтобы лишний раз не нагружать и без того загруженную базу у наших слабеньких хостеров, которые экономят на каждом запросе и каждом байте памяти.
Буквально сегодня пол-утра убил на поиск того, почему не работает сеоплагин. Оказалось как раз из-за wp_head();. Теперь не забуду ни за что.
Большое спасибо за очень полензную статью… Сейчас как раз начал изучать WP, буду ждать следующих статей….)
eavasi, на самом деле никакой нагрузки при этом не уменьшается. Движок ВП все равно отправляет все запросы разом, нужные и не нужные. Экономия при таком подходе практически незаметная. Гораздо полезнее избавиться от лишних плагинов.
Денис Климонтов, Alex_la, вэлкам! Продолжение следует
Игорь, виртуозно! В течение нескольких минут приятнейшего чтения вы просто и доходчиво рассказали и показали достаточно сложные коды. Год назад я в них плавал, как топор. После ваших книг и уроков стал разбираться, даже Веб-студию открыл “Сайт - за 12 часов!”
Вашу сегодняшнюю статью, Игорь, воспринимаю как указание к действию на своем сайте.
Игорь, если вы сочтете возможным, расскажите в одной из ваших статей о регистрации на блоге и выводе информации на сайт из базы данных. Например, создание персональной странички автора или товара, на которой выводятся десяток характеристик.
Успеха, Игорь! Ждем новых статей!
Василий Сенченко
Сайт - за 12 часов!
Игорь, подскажите, где еще может прятаться какой-то код, который не дает нормально отражаться правильному заголовку? Я поставила рекомендуемое:
|
В строке браузера показывается верно, начиная с названия статьи, а вот в адресной строке после названия блога идет имя категории, и только потом название статьи. :(
Код не пропечатался. Он в точности по Вашей рекомендации.
Замучился запускать плагин wp-pagenavi. Случайно вспомнил слова Дениса Климонтова о хуке, поставил и возрадовался. Слава, слава, героям: Игорю и Денису!
Василий Сенченко, хороший пиар, но больше так, пожалуйста, не делайте :)
Светлана, вам нужно либо поставить плагин, исключающий категории в ссылках, либо вручную прописать в ЧПУ /%postname%/
Спасибо! Даже не знаю, по какой причине я это упустила на Кошколюбах. На двух других блогах так и было выставлено, по Вашей рекомендации, а тут… Стыдно даже. :(
Игорь, эмоции и слова шли от чистого сердца. Как говорится, хотел как лучше, а получилось как всегда… (чешу в затылке). Больше не буду говорить слова, которые можно нечаянно принять за лесть.
Светлана, бывает :) Не стоит расстраиваться.
Василий, дело не в лести. Вы прекрасно поняли, о чем я. Эта ваша фраза “Сайт - за 12 часов!” не что иное как реклама. А реклама на блоге Вебсовет платная. Хотите рекламить свои услуги - вэлкам! Полновесная ссылка в постовом стоит всего 5$.
Игорь! Как говорят, всю жизнь живи, всю жизнь учись. И снова я попал впросак, говорил от чистого сердца, оказалось реклама. Сообщите, пожалуйста, как мне произвести оплату. Благо дарю вам за терпение!
Просто Василий Сенченко
Игорь подскажите где вставлять
в header.php в теме шаблона bloger чтоб нормально лого встало.
<html xmlns=”http://www.w3.org/1999/xhtml” >
<meta http-equiv=”Content-Type” content=”; charset=” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
<link rel=”alternate” type=”application/atom+xml” title=” Atom Feed” href=”" />
<link rel=”pingback” href=”" />
<link rel=”shortcut icon” href=”/images/favicon.ico” />
<link rel=”stylesheet” href=”/style.css” type=”text/css” />
<!–
<img src=”/images/logoеtip.gif” alt=”" />
sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
for (var i=0; i
<script defer type=”text/javascript” src=”/js/pngfix.js”>
<script src=”/js/date.js” type=”text/javascript”>
<a href=”/”>
<form id=”searchform” method=”get” action=”">
<a href=”/” title=”">Главная
<a href=”" target=”_blank”>Подпишись на RSS
<a href=”" target=”_blank”><img style=”vertical-align:middle” src=”/images/rss.png” alt=”Subscribe to ” />
СПАСИБИЩЕ!
Здравствуйте Игорь. Я сгенерировал для своего блога шаблон с помощью программы Artisteer 2. Вот что предстовляет из себя header.php :
<html xmlns=”http://www.w3.org/1999/xhtml” >
<meta http-equiv=”Content-Type” content=”; charset=” />
<script type=”text/javascript” src=”/script.js”>
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”" href=”" />
<link rel=”alternate” type=”application/atom+xml” title=”" href=”" />
<link rel=”pingback” href=”" />
<link rel=”shortcut icon” href=”/favicon.ico” />
Если Вас не затруднит посмотрите на блог elnrad.ru чтоб было понятней о чём я говорю. Вверху всех страниц высвечивается название страници или статьи большими буквами согласно заданных стилей css(я так понимаю), эта те названия которые мы прописываем в строке имени при создании новой странице или записи в Wordpress. Вопрос в том как сделать так, чтобы эти названия там не высвечивались на главной странице, чтоб главная была без заголовка и небыло вверху страници прямоугольной рамки с надписья “Править”
Заголовками страниц в Wordpress ведают файлы index.php, single.php, page.php и т.п. Ищите там h1 или h2. Что касается надписи “Править”, то найти ее можно там же и удалить, если мешает. Хотя видите ее только вы как админ. Посетителям она не видна.