Стилизируем теги в 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 на ваше усмотрение. Вот как выглядит результат на нашем демо-сайте:

tags-post-count[1]

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

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

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

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

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

css-class-tags[1]

На скриншоте выже вы видите, что тема использует 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, чтобы вписать цвета в свою тему. Вот так теги выглядять на нашем демо-сайте:

transformed-tags1[1]

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

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

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

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

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

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

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

VN:F [1.9.22_1171]
Rating: 4.2/5 (5 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
Scroll To Top