Хотите стилизовать теги в WordPress, чтобы они выглядели более заметными??
Теги помогут вам организовать ваш контент по темам. Они похожи на хэштеги для постов вашего блога WordPress и помогают пользователям обнаружить больше контента.
В этой статье мы покажем вам, как легко стилизовать теги в WordPress, чтобы увеличить вовлеченность пользователей и количество просмотров страниц на вашем сайте.
Как отображать теги в WordPress
WordPress поставляется с двумя основными таксономиями, называемыми категориями и тегами. В то время как категории используются для основных областей вашего контента, теги позволяют вам сортировать контент по более конкретным темам.
Многие популярные темы WordPress по умолчанию отображают теги в верхней или нижней части ваших постов.
Тем не менее, вы также можете отображать теги на страницах архива, в футере, боковых панелях и практически везде, где захотите.
Чтобы вставить облако тегов в ваши посты, страницы и виджеты боковой панели, вы можете просто добавить блок Облако тегов.
Облако тегов дает каждому тегу разный размер шрифта в зависимости от количества постов. Вы также можете выбрать отображение количества постов рядом с каждым тегом.
Это лишь стандартные опции, доступные в WordPress, но что если вы захотите настроить свои теги еще больше? Мы покажем вам, как.
Давайте рассмотрим, как легко стилизовать теги в WordPress.
Стилизация облака тегов по умолчанию в WordPress
После того, как вы добавили блок «Облако тегов» к посту или странице, вы можете настроить его, добавив пользовательский CSS.
Блок облака тегов автоматически включает в себя стандартные CSS-классы, сгенерированные WordPress, которые можно использовать для их стилизации.
Чтобы добавить пользовательский CSS на свой сайт WordPress, просто перейдите по ссылке Внешний вид » Настроить страницу и переключитесь на вкладку Additional CSS.
Вы можете начать с добавления этого пользовательского кода CSS в качестве отправной точки.
.tag-link-position-1 < font-size:40px!important;>.tag-link-position-2 < font-size:35px!important;>.tag-link-position-3 < font-size:30px!important; >.tag-link-position-4 < font-size:35px!important; >.tag-link-position-5 < font-size:30px!important; >.tag-cloud-link < text-decoration:none; background-color:#fff; >.tag-link-count
Как вы можете видеть, вы можете использовать .класс tag-link-position для настройки стиля в зависимости от положения ссылок. Теги с большим количеством постов расположены выше, а теги с меньшим количеством постов — ниже.
Если вы хотите, чтобы все теги в блоке облака тегов имели одинаковый размер, то вместо этого можно использовать следующий CSS:
.tag-cloud-link < font-size:16px !important; border:1px solid #d6d6d6; >.tag-cloud-link < text-decoration:none; background-color:#fff; >.tag-link-count
Вот как это выглядело на нашем тестовом сайте:
Стилизация тегов постов в WordPress
Помимо стилизации облаков тегов, вы также можете захотеть стилизовать теги постов, которые отображаются в отдельных записях блога. Обычно ваша тема WordPress отображает их сверху или снизу от заголовка или содержания поста.
Вы можете навести курсор на теги и щелкнуть правой кнопкой мыши, чтобы использовать инструмент Inspect для просмотра классов CSS, используемых вашей темой WordPress.
После этого вы можете использовать эти CSS-классы в своем пользовательском CSS. Ниже приведен пример кода на основе CSS-классов в нашей тестовой теме:
.entry-tag < padding: 5px 8px; border-radius: 12px; text-transform: lowercase; background-color: #e91e63; color:#fff; >.entry-tags a
Вот как это выглядело на нашем тестовом сайте.
Создание пользовательского облака тегов в WordPress
Блок облака тегов по умолчанию прост в использовании, но некоторые опытные пользователи могут захотеть настроить его так, чтобы иметь больше гибкости.
Этот метод позволяет вам добавлять собственные HTML и CSS классы вокруг облака тегов. Вы можете использовать его для настройки внешнего вида облака тегов в соответствии со своими требованиями.
Первое, что вам нужно сделать, это скопировать и вставить этот код в функции вашей темы.php-файл или плагин для конкретного сайта.
function wpb_tags() < $wpbtags = get_tags(); foreach ($wpbtags as $tag) < $string .= ''. $tag->name . 'считать .'' . "n" ; > return $string; > add_shortcode('wpbtags' , 'wpb_tags' );
Этот код добавляет шорткод, который отображает все ваши теги с количеством сообщений рядом с ними. Чтобы отобразить его на странице архивов или в виджете, вам нужно использовать этот шорткод:
При использовании этого кода будут отображаться только ссылки на теги и количество постов рядом с ними. Давайте добавим немного CSS, чтобы это выглядело лучше. Просто скопируйте и вставьте этот пользовательский CSS на свой сайт.
.tagbox < background-color:#eee; border: 1px solid #ccc; margin:0px 10px 10px 0px; line-height: 200%; padding:2px 0 2px 2px; >.taglink < padding:2px; >.tagbox a, .tagbox a:visited, .tagbox a:active < text-decoration:none; >.tagcount
Не стесняйтесь изменять CSS в соответствии с вашими потребностями. Вот как это выглядело на нашем демонстрационном сайте:
Мы надеемся, что эта статья помогла вам узнать, как легко стилизовать теги в WordPress. Вы также можете посмотреть наше руководство о том, как создавать пользовательские целевые страницы в WordPress или посмотреть этот список удобных советов, трюков и хаков WordPress.
Источник: www.wpbeginner.com