Для того, чтобы сделать собственный стиль каждого по-отдельности мета-тега статьи мы будем пользоваться функцией WordPress «the_tags()». Функция выводит ссылки на метки, которые относятся к посту.
Используют это так:
<!--?php the_tags( $before, $separator, $after ); ?-->
Вместо «$before» вставляют текст, который будет выводится перед всеми мета-тегами (по умолчанию: ‘Мета: ‘). «$separator» — заменяют на разделитель между тегами (По умолчанию: ‘, ‘). «$after» — текст после тегов.
Как известно, чтобы настроить стиль объекта в HTML коде можно применить следующий код:
<div class="tagstyle">Ваш объект</div>
А все стилевые описания объекта мы должны прописать в CSS коде используя селектор «tagstyle».
Наш объект, над которым мы применим стиль, является функцией вывода мета-тегов. Следующий код мы вставляем в то место страницы, где должны отображаться теги:
<div class="tagstyle"><!--?php the_tags( 'Теги: ', ' ', '' ); ?--></div>
Теперь пропишем CSS код для данного объекта. Так как каждый тег является ссылкой, то и стиль будет применяться в основном к ссылкам, находящимся в пределах данного селектора класса:
.tagstyle { /* стиль для всего объекта */
font-size: 12px;
}
.tagstyle a { /* стиль для каждого тега объекта */
color: #999;
padding: 4px 10px;
background-color: #e2eef1;
border-radius: 150px;
}
.tagstyle a:hover { /* стиль для каждого тега при наведении на него */
background-color: #d5e6eb;
}
В итоге мы получим следующий результат:
