Устанавливаем свой стиль меток в WordPress за 1 минуту.

Многие из нас сталкивались с проблемой всевозможных настроек свежеустановленного блога на WordPress. Сегодня мне бы хотелось уделить внимание такой теме, как дизайн блога, а точнее - как изменить стиль меток(тегов) и добавить свои собственные CSS классы.

Устанавливаем стиль меток.

Удивительно, но в столь продвинутой платформе для автономных блогов как WordPress, почему-то, совсем не продумали опцию настроек стилей меток, без которых сегодня просто невозможно представить современный блог. Я говорю про т.н. “облако меток” в сайдбаре.

Полагаю, Вы не раз встречали интересные блоги с корявыми дизайнами, частью которых были ОГРОМНЫЕ, в прямом смысле, метки(теги). Конечно, Вы можете сказать, что сейчас уже не модно использовать не анимированные облака меток, что сейчас “круто” использовать WP-Cumulus - “живое” облако тегов. Возможно, но думаю не нужно Вам рассказывать об очевидных минусах этого “чуда природы”. В любом случае, выбор за Вами. Лично я предпочитаю старый и привычный вид меток.

Сегодня я расскажу Вам, как всего за 1 минуту Вашего драгоценного времени Вы без труда сможете придать человеческий вид Вашим незаменимым меткам. При этом, Вам не нужно быть крутым программистом или HTML верстальщиком. Просто следуйте инструкциям и все у Вас получится.

Если Вы посмотрите в исходный(HTML)код любой странички Вашего блога, то без труда найдете, что-то вроде этого:

<a href="http://www.raznoblog.com/internet/tag/wordpress/" class='tag-link-1' title='3 topic'  style='font-size: 8pt;'>wordpress</a>

Причем чем больше меток, тем больше диапазон значений ДИНАМИЧЕСКИХ классов: tag-link-1, tag-link-77, tag-link-31…

Как нам победить эту глупость разработчиков нашего любимого WordPress?

Итак:

1) Открываем файл functions.php. Для этого в админке Вашего блога заходим “Внешний вид -> Редактор - > Функции темы(functions.php) “ и добавляем туда следующий код:

// Скопируйте этот код в Ваш файл functions.php
 

function style_tag_cloud($tags)
{
	$tags = preg_replace_callback("|(class='tag-link-[0-9]+)('.*?)(style='font-size: )([0-9]+)(pt;')|",
		create_function(
			'$match',
			'$low=1; $high=5; $sz=($match[4]-8.0)/(22-8)*($high-$low)+$low; return "{$match[1]} tagsz-{$sz}{$match[2]}";'
		),
		$tags);
	return $tags;
}
 

add_action('wp_tag_cloud', 'style_tag_cloud');

2) Сохраняем файл и обновляем страничку блога в браузере. Теперь в исходном коде наша проблематичная строчка приобрела вид:

<a href="http://www.raznoblog.com/internet/tag/wordpress/" class='tag-link-1 tagsz-1' title='3 topic'>wordpress</a>

Если Вы заметили, то к нашему классу добавился дополнительный класс tagsz-i(где i=1,2,3,4…..)

Вот, пожалуй и все, теперь Ваши метки-теги приобрели человеческий вид. Однако, можно не останавливаться на достигнутом. Вы можете самостоятельно определить, как будет выглядеть каждая метка в отдельности.
Достигнуть этого можно путем определения наших новых классов:

Таким образом, просто изменив Ваш файл functions.php Вы добиваетесь желаемого результата. Все гениальное - просто.

А как Вы считаете, стоит ли использовать обычные метки вместо красивых и анимированных?

Стиль тегов в WordPress.