Стилизируем теги в WordPress

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

Выводим все теги с количеством записей для них в WordPress

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

Первым делом вам необходимо скопировать и вставить этот код в файл functions.php вашей темы или в плагин для сайта WordPress:

function devise_tags() { 
$devisetags =  get_tags();
foreach ($devisetags as $tag) { 
$string .= '<span class="tagbox"><a class="taglink" href="'. get_tag_link($tag->term_id) .'">'. $tag->name . '</a><span class="tagcount">'. $tag->count .'</span></span>' . "\n"   ;
} 
return $string;
} 
add_shortcode('devisetags' , 'devise_tags' );

Этот код просто выводит все ваши теги с количеством помеченных ими записей рядом с названием тега. Однако, для вывода их на ваших страницах архивов или в виджете вам нужно использовать шорткод:

[devisetags]

Использование этого кода как есть просто выведет ссылки на теги и количество рядом с ними. Давайте сделаем их более красивыми. Добавим немного 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 { 
background-color:green;
color:white;
position: relative;
padding:2px;
}

Не стесняйтесь модифицировать CSS на ваше усмотрение. Вот как выглядит результат на нашем демо-сайте:

Стилизируем теги в мета-блоке записи

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

Давайте рассмотрим способ стилизации тегов под записями в WordPress.

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

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

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

.terms a, .terms a:visited, .terms a:active { 
background:#eee;
border:1px solid #ccc;
border-radius:5px;
text-decoration:none;
padding:3px;
margin:3px;
text-transform:uppercase;
}

.terms a:hover { 
background:#a8281a;
color:#FFF;
}

Не стесняйтесь модифицировать CSS, чтобы вписать цвета в свою тему. Вот так теги выглядять на нашем демо-сайте:

Вы могли заметить разницу между двумя скриншотами, не говоря об изменениях в CSS, ведь мы также изменили Теги на Помечено (Tagged) и убрали запятые между тегами. Как мы это сделали?

Мы изменили тег шаблона the_tags(); в нашем файле single.php следующим образом:

<?php the_tags('Помечено:', '' ,'' ); ?>

Вы также можете ограничить общее количество выводимых тегов при необходимости.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

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