Как стилизовать каждый пост WordPress по-разному

Приходилось ли вам сталкиваться с сайтами, которые по-разному стилизуют свои посты в блогах? На некоторых сайтах липкие посты выделяются с помощью...

Приходилось ли вам сталкиваться с сайтами, которые по-разному стилизуют свои посты в блогах? На некоторых сайтах липкие посты выделяются с помощью пользовательского фона, в то время как на других каждый пост категории может быть оформлен уникально. Если вы когда-нибудь хотели узнать, как стилизовать каждый пост WordPress по-разному, то вы попали по адресу. В этой статье мы покажем вам, как стилизовать каждый пост WordPress по-разному.

Примечание: Этот учебник требует добавления пользовательского CSS в WordPress. Вам также необходимо уметь пользоваться инструментом Inspect. Требуются некоторые базовые знания CSS и HTML.

Стилизация отдельных постов в WordPress

WordPress добавляет классы CSS по умолчанию к различным элементам на вашем сайте. Стандартная тема WordPress должна иметь код, необходимый WordPress для добавления CSS-классов для body, постов, страниц, виджетов, меню и т.д.

Основная функция WordPress, называемая post_class(), используется темами, чтобы указать WordPress, куда добавить эти классы CSS по умолчанию для постов.

Если вы посетите свой сайт и воспользуетесь инструментом Inspect в браузере, то сможете увидеть эти классы, добавленные для каждого поста.

Классы CSS по умолчанию для поста WordPress

Ниже приведены классы CSS, добавляемые по умолчанию в зависимости от того, какую страницу просматривает пользователь.

  • .post-id
  • .пост
  • .вложение
  • .липкий
  • .hentry (страницы микроформата hAtom)
  • .category-ID
  • .имя категории
  • .tag-name
  • .формат-
  • .тип-
  • .has-post-thumbnail
  • .post-password-required
  • .post-password-protected

Пример вывода будет выглядеть следующим образом:

Вы можете стилизовать каждый пост WordPress по-разному, используя соответствующие классы CSS.

Например, если вы хотите придать стиль отдельному посту, вы можете использовать класс post-id в вашем пользовательском CSS.

.пост-412

Не забудьте изменить идентификатор поста на свой собственный.

Стилизация конкретного поста в WordPress

Давайте рассмотрим другой пример.

В этот раз мы будем стилизовать все посты, относящиеся к определенной категории под названием «Новости».

Мы можем сделать это, добавив следующий пользовательский CSS в нашу тему»

.category-news

Этот CSS повлияет на все посты, размещенные в категории новостей.

Функция класса поста

Разработчики тем используют функцию post_class, чтобы указать WordPress, куда добавить классы постов. Обычно это происходит в теге.

Функция post class не только загружает сгенерированные по умолчанию WordPress классы CSS, но и позволяет вам добавлять свои собственные классы.

В зависимости от вашей темы, вы найдете функцию post_class в вашем сингле.php файл или в файлах шаблона контента. Обычно код выглядит примерно так:

Вы можете добавить свой собственный пользовательский CSS класс с атрибутом, как это:

post_class выведет соответствующие классы CSS по умолчанию вместе с вашим пользовательским классом CSS.

Если вы хотите добавить несколько CSS классов, то вы можете определить их как массив, а затем вызвать их в функции post_class.

Различный стиль постов в зависимости от авторов

CSS-классы по умолчанию, генерируемые функцией the_posts, не включают имя автора в качестве CSS-класса.

Если вы хотите настроить стиль каждого поста в зависимости от автора, то вам нужно сначала добавить имя автора в качестве CSS-класса.

Это можно сделать с помощью следующего фрагмента:

Этот код добавит имя пользователя в качестве CSS-класса. Nicename — это дружественное URL имя, используемое WordPress. В нем нет пробелов, и все символы написаны в нижнем регистре, что делает его идеальным для использования в качестве CSS-класса.

Приведенный выше код даст вам результат, подобный этому:

Теперь вы можете использовать .peter в вашем пользовательском CSS, чтобы стилизовать все посты этого конкретного автора, чтобы они выглядели по-другому.

.peter

Стиль постов на основе популярности с помощью подсчета комментариев

Возможно, вы видели сайты с виджетами популярных постов, которые иногда основаны на количестве комментариев. В этом примере мы покажем вам, как по-разному стилизовать посты с помощью количества комментариев.

Во-первых, нам нужно получить количество комментариев и связать с ним класс.

Чтобы получить количество комментариев, вам нужно добавить следующий код в файлы вашей темы. Этот код находится внутри цикла WordPress, поэтому вы можете добавить его и непосредственно перед тегом.

одобрено; if ($my_comment_count <10) < $my_comment_count = 'new'; >elseif ($my_comment_count >= 10 && $my_comment_count <20) < $my_comment_count = 'emerging'; >elseif ($my_comment_count >= 20) < $my_comment_count = 'popular'; >?>

Этот код проверяет количество комментариев для отображаемого поста и присваивает им значение, основанное на количестве комментариев. Например, посты с менее чем 10 комментариями получают класс «новые», с менее чем 20 — «новые», а с более чем 20 комментариями — «популярные».

Далее необходимо добавить CSS-класс comment count в функцию post_class.

Это добавит новые, появляющиеся и популярные классы CSS ко всем постам на основе количества комментариев к каждому посту.

Вы можете добавить пользовательский CSS для стилизации постов на основе популярности:

.новый .развивающийся .популярный

Мы просто добавляем границы, вы можете добавить любые правила CSS вы хотите.

Стиль постов на основе пользовательских полей

Жесткое кодирование классов CSS в файле темы ограничивает вас только этими конкретными классами CSS. Что если вы хотите решить, какой CSS-класс добавить к статье в процессе ее написания??

С помощью пользовательских полей вы можете добавлять CSS-классы «на лету».

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

Добавление класса поста в качестве пользовательского поля

Добавьте post-class в качестве имени пользовательского поля, и все, что вы хотите использовать в качестве CSS класса в поле значения.

Не забудьте нажать на кнопку «Добавить пользовательское поле», чтобы сохранить его, а затем сохраните свой пост.

Далее отредактируйте файлы темы, чтобы ваше пользовательское поле отображалось как класс поста.

ID, 'post-class'); ?> " >

Это выведет следующий HTML:

Теперь вы можете добавить пользовательский CSS для класса post_class, который вы добавили с помощью пользовательского поля.

.трендинг

Пользовательские поля могут иметь несколько значений, поэтому вы можете добавить несколько классов CSS, используя одно и то же имя.

Существует множество других способов индивидуальной стилизации постов WordPress. По мере роста ваших навыков вы будете открывать для себя новые способы стилизации постов с использованием различных условий.

Мы надеемся, что эта статья помогла вам узнать, как стилизовать каждый пост WordPress по-своему. Вы также можете посмотреть наш окончательный список самых востребованных советов, трюков и хаков WordPress.

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий