Выпуск 25. Делаем собственный шаблон для WordPress (часть 2)
Продолжаем
В предыдущем выпуске мы смогли сделать из готового html-шаблона WordPress-шаблон и даже начали его наполнять функциональностью. Те, кто только что присоединились, могут прочитать об этом на моем сайте.
После обсуждения этого выпуска, мы попробуем делать шаблон не только быстро и просто, но и правильно. Поэтому мы вернемся к подчистке нашего style.css.
Class и ID
На самом деле это не ошибка, а особенность CSS.
Дело в том, что для описания стиля тэгов можно использовать два способа (вариант style мы не рассматриваем):
- с помощью ID
- используя class
Например:
<div id="header">текст</div> <div class="footer">текст</div>
После этого в css-файле можно записать:
#header {color: yellow; background: red;}
div.footer {color: aqua; background: blue;}
Первая запись (с "#") будет применима к div id="header", а вторая (с точкой ".") к div class="footer".
Проблема здесь в том, что ID на странице должен быть уникальным. Поэтому, если мы напишем два раза id="header", то это будет уже ошибкой.
Поэтому там, где это возможно, используем class вместо id.
Далее. Я уже говорил о наследовании (хотя правильней это будет называться «контекстный селектор», но мы упростим для понимания), поэтому запись:
div#header {...}
избыточна, поскольку означает, что это тэг div с id=header. Но поскольку id дожен быть уникальным, то больше уже и повторяться не должен, не зависимо от тэга. Так, что такую запись, мы можем упростить до:
#header {...}
Подчищаем style.css
Откроем наш файл style.css и заменим все div#header, div#content и т.п. на #header, #content соответственно. Мы получим более легкий и читабельный код.
Если вы все сделали верно, то после обновления увидите страницу шаблона без изменений.
Лирическое отступление
В прошлом выпуске я лишь вскользь упомянул, что оформление нас пока не интересует. Возможно, вы решили, что тот каркас, который мы взяли за основу, таким и останется. На самом деле мы будем менять его полностью, включая и размеры, и цвета, а также добавим картинку в шапку.
Существуют три способа создания WordPress-шаблонов.
- Вначале рисуется дизайн сайта: создаются все картинки, тени, полосочки, кнопки и т.д. После этого дизайн-шаблон "нарезается" и создается html-каркас, который уже наполняется необходимой функциональностью.
Этот способ годится прежде всего тем, кто умеет работать с графикой и соответствующими программами, например Photoshop, CorelDraw или Illustrator. При таком способе мы сразу попадаем в "рамки одного дизайна" и все дальнейшие действия потребуют от нас внимательности, чтобы его не нарушить.
- Второй способ делается "наоборот": берется готовый WordPress-шаблон, из него "выкидывается" всё оформление, подчищаются стили и получается каркас-программа, то есть функциональность, лишенная оформления. После этого такой шаблон послепенно наполняется оформлением.
Этот способ годится прежде всего тем, кто уже имеет хорошие знания самого WordPress'а. Нужно знать не только структуру его шаблонов, но и понимать php-функции. Но при таком способе мы зажаты рамками существующей функциональности, поэтому, чтобы добавить что-то новое, нужно разбирать существующий код. Кроме этого, довольно тяжело будет "подтягивать" оформление на существующий php-код.
- Третий способ является "срединной линией": за основу берется каркас, которым описывается структура сайта (располжение блоков). Поскольку каркас на порядок проще готового дизайна, то работать с ним будет также просто.
После того, как каркас отработан, происходит наполнение его функциональностью: но вместо "шаблонного" решения мы можем позволить себе использование любых функций и модулей (например, плагинов). Параллельно (или после этого), мы решаем вопросы с оформлением: цвета, размеры, картинки и т.д.
Можно, конечно, взять уже готовый WordPress-шаблон и его как-то переделать. Но, на мой взгляд, это не лучшее занятие: разбираться в чужом коде. Мне пришлось перепробовать наверное все варианты, но самым оптимальным получается именно третий способ.
Ну и кроме всего, когда мы делаем шаблон на основе каркаса, то сможем уже на основе "полуподготовленного" WordPress-шаблона создавать различные оформления.
Структура шаблона
Файл index.php является главным для WordPress-шаблона. Многие разработчики в нем прописывают вывод всех текстов. Причем делается это сразу для различного вида контента: главная страница, записи, постоянные страницы, рубрики и т.д. Если же нужно сделать различный вывод для разного контента, то либо добавляют в этот файл различные условия, либо дублируют этот файл с другим именем, соответствующему условию (например page.php для вывода постоянных страниц).
Об этом я уже писал в одном из выпусков рассылки - "Единый файл шаблона".
Из-за этого получается довольно большое нагромождение кода или его избыточное дублирование в виде файлов. На самом деле существует довольно элегантное решение данной проблемы: изменяемые части подключаются в виде отдельных файлов, а в index.php прописываются условия их подключения.
Посмотрим, как это осуществляется на практике.
Файл index.php
Откроем файл index.php. Основной текст будет выводиться в #content. Сейчас там находится текст для примера. Он нам не нужен, поэтому полностью его удалим.
Подсказка. Чтобы не запутаться в парных тэгах вы можете после закрывающего в html-комментариях указать его id или class, наприме так: </div><!-- div id="content" -->
Теперь в блок вывода контента пропишем наш "переключатель":
<?php
if ( is_category() ) require('main-cat.php');
else require('main.php');
?>
Работать этот код будет так: если нужно отобразить рубрику (is_category), то будет подключаться файл main-cat.php, иначе main.php.
В дальнейшем можно добавить другие разнообразные условия: для постоянных страниц, архива, 404-страницы, главной страницы, карты сайта, ключевых слов и т.д.
Поскольку у нас пока нет файлов main.php и main-cat.php, то нужно их создать.
Структура main.php
В этом файле у нас будут выводиться записи блога. Я напомню, что в WordPress'е каждая запись содержит дополнительную информацию: заголовок, дата, автор, рубрика, анонс, ключевые поля, постоянная ссылка, ссылка на комментарии и их количество и т.д. Кроме этого можно выводить и другую информацию, но это зависит от установленных плагинов или дополнительных функций.
С нужными нам функциями мы сейчас ознакомимся, но вначале вам нужно знать, что WordPress для вывода записей использует цикл "TheLoop". Выглядит это так:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> ... здесь непосредственно последовательный вывод записей ... <?php endwhile; else: echo '<h1>Извините, ничего не найдено...</h1>'; endif; ?>
Функция have_posts() запускает цикл перебора записей, а the_post() получает все данные записи, поэтому в самом цикле мы уже работаем с готовым набором данных. После каждой итерации цикла данные обновляются для следующей записи.
Итак, в main.php вам нужно добавить цикл вывода "TheLoop".
Вывод блоков записи
Поскольку мы еще не определились с оформлением и расположением элементов, то для начала сделаем простую вещь: разделим вывод записей на три части.
Первая - вывод информации: заголовок, рубрика, дата, автор.
Вторая - непосредственно текст.
Третья - ссылка на комментарии, разделитель.
Сразу же возьмем за правило, что при добавлении таких блоков в php-файлы, мы будем создавать для них и стили, пусть даже и пустые, чтобы в дальнейшем можно было бы к ним обратиться и подправить оформление.
Итак, наши блоки:
<div class="maintop"> </div> <!-- div class="maintop" --> <div class="maincontent"> </div> <!-- div class="maincontent" --> <div class="mainbottom"> </div> <!-- div class="mainbottom" -->
Соответственно в style.css в конце добавим:
div.maintop {}
div.maincontent {}
div.mainbottom {}
Обратите внимание, что мы указываем не ID, а class.
Заголовок записи
Для вывода заголовка записи, используется функция the_title(). Однако, нам нужно сразу же предусмотреть ситуацию, когда заголовок должен быть ссылкой. Например, когда он выводится на главной страничке, то есть смысл сделать заголовок-ссылку. Но вот когда страница уже показыватся полностью, то смысла в ссылке уже нет, поскольку будет вести на эту же страницу.
Для проверки мы будем использовать две функции is_single() и is_page(). Первая возвращяет true, когда текущая страница является записью, а вторая - постоянной страницей. Этих двух условий достаточно, чтобы выполнить нашу задачу.
Сам заголовок, с целью лучшей "подачи" поисковикам, мы оформим в тэг <h1>. Получаем вот такой код:
<h1><?php
if (!is_single() && !is_page() ) {
echo '<a href="';
the_permalink() ;
echo '">';
};
the_title();
if ( !is_single() && !is_page() ) echo '</a>';
?></h1>
Описание: если у нас не запись (!is_single) и не постоянная страница (!is_page), то создаем ссылку (с помощью echo) и выводим сам адрес (the_permalink). Дальше просто закрываем открытые тэги.
Напоминаю, что этот код нужно добавить в тэг <div class="maintop">.
Если сейчас вы обновите страничку, то увидите список записей своего блога. При переходе по ссылкам, должен отобразиться только заголовок (уже без ссылки).
Однако, сам заголовок выводится размером, установленным браузером. Мы можем сразу же его подредактировать.
Открываем style.css и добавляем такую запись:
div.maintop h1 {font-size: 12pt;}
Этим мы укажем браузеру отображать тэг <h1>, который находится в <div class="maintop"> размером 12pt.
Дополнительная информация записи
Теперь нам нужно вывести дополнительную информацию: рубрику, дату, автора и ссылку на редактирование.
Вначале код, потом объяснение:
<p><?php
if (!is_page()) {
echo '<span>Рубрика:</span> ';
the_category(', ');
echo ' | ';
}
the_time('j F Y, H:i');
echo ' | ';
the_author();
edit_post_link(' [edit]');
?></p>
Эту информацию мы выводим в одну строчку в тэге <p>. Вначале мы выводим рубрику.
Особенность WordPress'а в том, что для всех постоянных страниц нельзя указать рубрику, поэтому для них она равна "по-умолчанию". Поэтому отображать рубрику в этом случае бессмысленно. Для этого мы и вводим проверку is_page и, если это не постоянная страница, то рубрика выводится (the_category).
Функция the_time('j F Y, H:i') выводит дату и время записи в формате "дата месяц год, час:минуты".
Автора записи выводит функция the_author(). Функция edit_post_link(' [edit]') выводит для администратора ссылку на редактирование записи. Для обычных посетителей она не видна.
Для того, чтобы немного "облагородить" текущий вывод, добавим в style.css вот такой код:
div.maintop p {font-size: 9pt;}
То есть тэг <p>, в который мы заключили инфостроку записи будет выводиться размером 9pt.
Чтобы наш заголовок стал немного ближе к инфостроке, нужно добавить этот отступ к <h1> (см. выше). Получим такое описание класса:
div.maintop h1 {font-size: 12pt; margin-bottom: 5px;}
Вывод основного текста записи
Для вывода текста используется две функции: the_content и the_excerpt.
Первая выводит полный текст записи или, если это не is_single, то до метки <!--more-->.
Вторая выводит только анонс (цитата) записи - отдельное поле в текстовом редакторе WordPress'а. Проблема здесь в том, что одним нравится использовать more, а другим достаточно поля анонса (цитаты). Наш шаблон должен учитывать эти особенности и выводить анонс (цитату), если он есть.
<?php
if ( ($post->post_excerpt != '') && (!is_single()) ) {
the_excerpt();
echo '<p><a href="';
the_permalink();
echo' " class="more">[Далее...]</a></p>';
}
else the_content('[Далее...]');
?>
Условие ($post->post_excerpt != '') сравнивает текст цитаты с пустой строкой. Если она не пустая и при этом текущая запись не single (то есть конечный вывод всего текста), то мы можем вывести текст цитаты (the_excerpt). После цитаты есть смысл добавить ссылку на полную запись - код уже знакомый.
Если же любое из условий не выполняется, то осуществляется вывод текста стандартной функцией WordPress - the_content(). В скобках можно указать текст для ссылки "далее".
Обратите внимание, что этот код мы уже добавляем в <div class="maincontent">!
Завершающий блок записи
Теперь нам осталось добавить ссылку на комментарии, которая будет также служить и разделителем записей.
Для этого в WordPress'е достаточно использовать две функции, одна из которых выводит ссылку на комментарии и сразу выводит их количество, а вторая - выводит форму комментария и их список (если есть).
Получается всего две строчки кода:
<p class="comment"><?php comments_popup_link('Оставьте комментарий!',
'Пока один комментарий', 'Комментариев: %'); ?></p>
<?php comments_template(); ?>
WordPress сам знает, что функцию comments_popup_link выводить для "конечной" записи не нужно, а функция comments_template будет выводить форму комментариев только для "конечной" записи.
Вы уже наверное поняли, что этот код нужно добавить в <div class="mainbottom">
Для красоты (если это, конечно применимо в нашем случае) добавим в стили для ссылки на комментарии выравниваение вправо и увеличим отступ снизу, чтобы визуально отделить записи. У меня получилось так:
div.mainbottom {margin-bottom: 20px;}
div.mainbottom p.comment {text-align: right; font-size: 9pt;}
Старые/новые записи
Нам остался один штрих: нужно добавить навигацию по старым/новым записям. Для этого используются функции next_posts_link и previous_posts_link:
<?php
if ( !is_single() && !is_page() ) {
echo '<p class="navpage">';
next_posts_link('« Ранее');
echo ' ';
previous_posts_link('Позже »');
echo '</p>';
}
?>
Только этот код нам нужно добавить после строчки:
<?php endwhile; else: echo '<h1>Извините, ничего не найдено...</h1>'; endif; ?>
то есть в самый конец файла.
Плохой браузер
Поскольку я вам уже говорил про плохие браузеры, то настал черед внести первое исправления для IE. Если вы посмотрите страничку в этом уродце, то увидите, что поле для комментирования "уехало". Это из-за того, что IE неверно выполняет отображение вложенных элементов. Для того, чтобы исправить это безобразие, дописываем в style.css такую строчку:
*html #wrapper {overflow: hidden;}
Такой код называется "хаком" и будет работать только в IE6.
Контроль
Надеюсь, что у вас не возникло проблем, но на всякий случай вы можете скачать мой вариант этого урока и сверить со своим.
Продолжение: http://maxsite.org/ras26
Весь курс создания шаблона:
