Индивидуальная стилизация тем WordPress

Добавление индивидуальной стилизации к записям и страницам позволяет сделать их более интересными и красочными. На первый взгляд, осуществить это довольно тяжело, особенно для записей, ведь все они управляются одним единственным файлом шаблона single.php. Не стоит отчаиваться. Решение данной проблемы есть, и даже не одно. В частности, тэг шаблона post_class(), применяемый вместе с CSS, позволяет полностью изменить стилизацию записей.

Однако, сначала поговорим об общей методике индивидуальной стилизации. Если вы хотите как-либо стилизовать ту или иную страницу, все что вы должны сделать — это создать ее шаблон, который будет отвечать всем вашим требованиям. Помимо стилизации записей, вы сможете задать специальное представление для сайдбаров, заголовков, подвалов и т.д. Сила шаблона страниц кроется в его универсальности — любую страницу можно будет впоследствии привязать к данному шаблону.

То же самое может относиться и к спискам тегов и рубрик. Если вы по каким-либо причинам хотите использовать графическое изображение в заголовке рубрики, все что вам понадобится, это изменить файл шаблона, соответствующий данной рубрике. Вероятно, вы помните, что файл category-X.php обладает высшим приоритетом, нежели category.php (X — идентификатор рубрики). В данном контексте, файл category-37.php будет вызван всякий раз, когда запрашивается рубрика с ID 37. Следовательно, вам понадобится лишь отредактировать файл шаблона, чтобы получить индивидуальное оформление заданной рубрики.

Стилизация записей

Стилизация отдельных записей осуществляется несколько сложнее, чем стилизация рубрик, поскольку все записи управляются единственным файлом single.php.

Рассмотрим следующий участок кода:

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- The post output stuff goes here -->
</div>

Подобный сниппет можно отыскать во множестве тем, основанных на WordPress. Тэг шаблона the_ID() возвращает идентификатор записи, который затем передается контейнеру div. Таким образом, вы получаете контроль над конкретной записью, чье оформление можно затем изменять в соответствии со своими вкусами.

Однако, в большинстве случаев изменение оформления для одной единственной записи не имеет смысла. Гораздо полезнее было бы изменить представление всех записей, относящихся к какой-либо определенной рубрике. Сделать это можно как при помощи условных тегов, так и с помощью тэга шаблона post_class(). Первый способ мы уже рассматривали ранее, теперь перейдем к изучению post_class(). Тег шаблона post_class() возвращает строку классов, позволяющую стилизовать сразу несколько записей в зависимости от определенных условий.

Прежде всего, идентификатор записи будет аналогичен ее классу, то есть, к примеру, если запись имела идентификатор id=»post-674″, то ее класс будет носить название post-674. То же самое относится и к рубрикам, с единственным отличием — перед названием рубрики нужно будет поместить префикс «category-«. Так, если рубрика имеет название website-news, то тэг post_class() возвратит для нее класс category-website-news. Метки подчиняются тем же правилам: если метка носила название «funny», то тэг возвратит для нее класс tag-funny.

Что можно сделать с помощью тэга post_class()? Наиболее общее его использование — определение отдельной стилизации для какой-либо рубрики. Допустим, у вас есть рубрика news. Следовательно, post_class() выдал бы class=»category-news». Допустим, мы хотим, чтобы все ссылки, принадлежащие указанной категории, получили зеленый цвет, и левая граница блока div была выделена зеленым цветом. Это достигается следующим образом:

div.category-news { padding-left: 20px; border: 5px solid green; border-width: 0 0 0 5px; }
div.category-news a { color: green; }

Очень удобно и красиво. Теперь допустим, что у нас есть метка My Fave, которая определяет избранные записи. Сделаем так, чтобы в правом верхнем углу каждой записи, имеющей данную метку, отображалось изображение:

div.tag-my-fave { background: url(myfave.gif) top right no-repeat; }

Каждый раз, когда тег post_class() возвратит метку с определяющей строкой my-fave, в правом верхнем углу записи появится изображение myfave.gif.

Наконец, тэгу шаблона post_class() можно передавать определенный класс. Может, вы хотите добавить класс single к отдельным записям? Тогда отредактируйте в single.php следующий код:

<div id="post-<?php the_ID(); ?>" <?php post_class('single'); ?>>

Тэг post_ID() оказывается менее полезным, нежели post_class(), и в будущем скорее всего исчезнет за ненадобностью.

Стилизация при помощи body_class()

Другие возможности по стилизации отдельных элементов предлагает тэг шаблона body_class(), получивший свое распространение, начиная с WordPress 2.8. Обычно он применяется внутри тега body:

<body <?php body_class(); ?>>

В зависимости от вашего месторасположения на сайте тэг body будет получать различные классы. Допустим, вы являетесь зарегистрированным пользователем и читаете запись с ID 245. Тэг body вернет следующую конструкцию:

<body class="single postid-245 logged-in">

Все зависит от того, где в текущий момент вы находитесь. Если вы просматриваете список рубрик, или список меток, то конструкция будет отличаться от той, что приведена в примере. Различные типы страниц в WordPress возвращают различные классы.

Чем это может вам помочь? Допустим, вы хотите, чтобы размер заголовков h2 варьировался в зависимости от того, какую страницу вы просматриваете — отдельную запись или список записей. Вы можете определить это при помощи ручного добавления классов к различным файлам шаблона, однако это очень долго и неудобно. Гораздо быстрее определить классы, возвращаемые тегом body_class().

Для начала необходимо определить, какие классы будут возвращены и при каких условиях. Список всех классов можно найти в конце данного раздела, сейчас отметим лишь, что класс single передается тегу body при просмотре отдельной записи, а класс archive — при просмотре любых страниц со списками (подобно файлу шаблона archive.php, который вызывается в тех случаях, когда файлы category.php и tag.php отсутствуют в теме).

Чтобы решить поставленную выше проблему для заголовков h2, необходимо добавить в стилевые таблицы следующий код:

body.single h2 { font-size: 48px; }
body.archive h2 { font-size: 36px; }    

Этот код означает, что всякий раз когда тэг шаблона body_class() вернет класс single, который определяет представление отдельной записи, заголовки h2 получат размер 48 пикселей, а в случае возвращения класса archive, заголовки получат размер 36 пикселей.

Поддерживаются следующие классы (перечислены в порядке важности):

rtl
home
blog
archive
date
search
paged
attachment
error404
single postid-X (X — ID записи)
attachmentid-X (X — ID вложения)
attachment-MIME (MIME — MIME-тип)
author
author-USER (USER — никнейм автора)
category
category-X (X — определяющая строка рубрики)
tag
tag-X (X — определяющая строка метки)
page-parent
page-child parent-pageid-X (X — ID страницы)
page-template page-template-FILE (FILE — название файла шаблона)
search-results
search-no-results
logged-in
paged-X (X — номер страницы в списке)
single-paged-X (X — номер страницы в списке)
page-paged-X (X — номер страницы в списке)
category-paged-X (X — номер страницы в списке)
tag-paged-X (X — номер страницы в списке)
date-paged-X (X — номер страницы в списке)
author-paged-X (X — номер страницы в списке)
search-paged-X (X — номер страницы в списке)

При помощи использования классов, возвращаемых body_class() можно получить широкий контроль над всеми секциями сайта. Этот способ на порядок проще, чем ручное добавление классов к файлам шаблона.

Прилепленные записи

Для того чтобы определить прилепленные записи, добавленные в WordPress 2.7, вам необходимо было добавить тэг шаблона sticky_post() к блокам div, отвечающим за записи. Тем самым определялся класс sticky, который впоследствии мог быть соответствующим образом стилизован. Сегодня в использовании sticky_class() нет никакой необходимости, поскольку тэг шаблона post_class() добавляет класс sticky ко всем записям, отмеченным в панели администратора как прилепленные.

Достаточно всего лишь добавить следующий код в CSS файл:

div.sticky { 
padding: 20px 20px 8px 20px; 
background: #f8f8f8; 
border: 1px solid #e8e8e8; 
border-width: 1px 0; }  

Тем самым вы определите представление прилепленных записей.

Для чего используются прилепленные записи? Основное их предназначение — закрепить наиболее важные сообщения в самом верху страницы. Также их можно использовать в качестве рекламных объявлений, призывающих приобрести тот или иной товар или услугу.

Наконец, при помощи условного тега is_sticky() можно производить самые разные действия с прилепленными записями. Управлять ими можно посредством запросов WordPress (используя циклы и query_posts() для достижения требуемого эффекта).