Приходилось ли вам сталкиваться с сайтами, которые по-разному стилизуют свои посты в блогах? На некоторых сайтах липкие посты выделяются с помощью пользовательского фона, в то время как на других каждый пост категории может быть оформлен уникально. Если вы когда-нибудь хотели узнать, как стилизовать каждый пост WordPress по-разному, то вы попали по адресу. В этой статье мы покажем вам, как стилизовать каждый пост WordPress по-разному.
Примечание: Этот учебник требует добавления пользовательского CSS в WordPress. Вам также необходимо уметь пользоваться инструментом Inspect. Требуются некоторые базовые знания CSS и HTML.
Стилизация отдельных постов в WordPress
WordPress добавляет классы CSS по умолчанию к различным элементам на вашем сайте. Стандартная тема WordPress должна иметь код, необходимый WordPress для добавления CSS-классов для body, постов, страниц, виджетов, меню и т.д.
Основная функция WordPress, называемая post_class(), используется темами, чтобы указать WordPress, куда добавить эти классы CSS по умолчанию для постов.
Если вы посетите свой сайт и воспользуетесь инструментом Inspect в браузере, то сможете увидеть эти классы, добавленные для каждого поста.
Ниже приведены классы CSS, добавляемые по умолчанию в зависимости от того, какую страницу просматривает пользователь.
- .post-id
- .пост
- .вложение
- .липкий
- .hentry (страницы микроформата hAtom)
- .category-ID
- .имя категории
- .tag-name
- .формат-
- .тип-
- .has-post-thumbnail
- .post-password-required
- .post-password-protected
Пример вывода будет выглядеть следующим образом:
Вы можете стилизовать каждый пост WordPress по-разному, используя соответствующие классы CSS.
Например, если вы хотите придать стиль отдельному посту, вы можете использовать класс post-id в вашем пользовательском CSS.
.пост-412
Не забудьте изменить идентификатор поста на свой собственный.
Давайте рассмотрим другой пример.
В этот раз мы будем стилизовать все посты, относящиеся к определенной категории под названием «Новости».
Мы можем сделать это, добавив следующий пользовательский 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