Индивидуальная стилизация тем 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() для достижения требуемого эффекта).
Источник: oddstyle.ru