scheme

Реклама

Для того, чтобы сделать собственный стиль каждого по-отдельности мета-тега статьи мы будем пользоваться функцией 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;
}

В итоге мы получим следующий результат:

Снимок экрана 2014-06-23 в 22.10.03