Easy Posts: как динамически добавить специальные классы постам?

На одном из проектов мне потребовалось отдельно стилизовать отображение конкретного поста в Easy Posts. Я стал искать решение и на помощь мне пришла замечательная WordPress функция post_class(), которая выводит храктеристики поста в виде css классов, таких, как ID поста, тип поста, категория поста и метка поста. А также мы можем добавить специальный класс текущей записи, что я и хочу показать в этой статье.

Как это может выглядеть, смотрите на скриншоте:

как добавить уникальный класс постам для их стилизации?

В каких случаях post_class() может пригодиться в Easy Posts?

  • Стилизация отдельного поста по его уникальному классу;
  • стилизация постов по категориям или меткам;
  • скрытие текущего поста — остановимся на этом подробнее.

Часто на сайте требуется показать похожие записи ниже основного контента или рядом с ним, но при использовании Easy Posts, на данный момент, в Oxygen нет возможности исключения текущего поста из цикла. В итоге мы получаем дублирование информации на странице.

Как один из простых вариантов, можно просто скрыть текущую запись при помощи CSS. Это не идеальный вариант, потому что запись фактически будет присутствовать в коде, но я считаю это неплохим выходом из положения.

Чтобы это осуществить, потребуется назначить текущему посту специальный класс, а затем добавить в файле стилей (в Code Block или Stylesheet) соответствующее свойство.
Пример css кода для скрытия текущей записи: .current-post {display: none} - где "current-post", это класс, который назначается текущему посту при помощи функции post_class().

Как добавить функцию post_class() в Easy Posts?

Для добавления функции требуется выполнить всего одно действие. Перейдите в режим редактирования шаблона (Easy Posts > Templates > PHP) и вместо куска кода 

<div class='oxy-post'>

добавьте:

<div <?php post_class( get_the_ID() == get_queried_object_id() ? 'oxy-post current-post' : 'oxy-post'); ?>>

Так это выглядит в редакторе (нажмите для увеличения):

Как добавить функцию post_class() в Easy Posts?

Это всё. Откройте инспектор кода в браузере и проверьте, какие классы сгенерировались для каждого поста. Теперь вы можете для отдельных записей добавить любой css для стилизации, на основе их классов.

Пример добавления css в Stylesheet:

Пример добавления css в Oxygen для стилизации Easy Posts

Если у вас есть вопросы или пожелания, то напишите комментарий ниже.
Если-же вам требуется персональная помощь или персональная консультация, то свяжитесь со мной через форму обратной связи.

Следите за выходом новых советов и уроков:
arrow-up