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

Блог про WordPress
Комментарии: 11
  1. Простой

    А стоит ли помещать запись сразу в несколько рубрик??

    1. Дмитрий (автор)

      А почему бы нет? Многие так делают, если запись удовлетворяет по смыслу сразу нескольким рубрикам.

  2. Простой

    А если помещать одну запись в несколько рубрик, то это не создаёт дублирования контента и поисковики не ругаются, что одна запись в несколько рубриках находится?

  3. Дмитрий (автор)

    Нет, конечно же. По крайней мере таких проблем не возникало.

  4. Простой

    Тогда интересно как они определяют, если одна запись находится в разных рубриках то есть одну и ту же запись можно найти по разным ссылкам/адресам на сайте, то как поисковики определяют, что это не дублированный контент? И что выходит, если я одну и туже запись помещу во все рубрики, то это тоже будет без санкций от поисковиков проходить, работать?))

  5. Дмитрий (автор)

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

  6. Простой

    Просто у меня очень, очень много записей находятся в двух рубриках сразу. Вот я и задумался — не грозит ли это санкциями от поисковиков?

    И быть может если грозит, то лучше сделать в рубрике родительскую рубрику и в неё помещать запись? То есть запись будет только в одной родительской группе, а сама запись будет доступна из двух рубрик.

    Или я бред придумал не нужный?))

    1. Дмитрий (автор)

      Я бы посоветовал просто не заморачиваться по этому поводу. Как уже где-то кто-то говорил, качественный контент — залог успешности сайта, а все остальное это так, прыжки с бубном. Могу только порекомендовать добавить к себе в блог статистику от яндекса и смотреть, какие страницы он выкинул из поиска и по каким причинам. Самая популярная причина — это не дублирование контента, а несоответствие записи каким-то критериям, которые выставляет яндекс к материалам. Что это за критерии — я лично без понятия. Может потому что без ключей пишу материалы, но это бред — получается яндекс сам раскрывает двери перед оптимизаторами.

  7. Простой

    Вы имеете виду добавить яндекс метрику или что?))

    1. Дмитрий (автор)

      Да, именно ее.

  8. Дмитрий (автор)

    Примечание для прилепленных записей: в последних версиях WP вместо div.sticky необходимо использовать article.sticky.

Добавить комментарий

Получать новые комментарии по электронной почте.