Facebook Google+ Twitter Вконтакте Одноклассники

Обратная связь

  • E-mail: raznoblog13@gmail.com
Интересные статьи,советы 
профи, последние новости мира интернета, горячие обсуждения и любопытные факты,всё это в нашей рубрике. Женщина и компьютер вещи не совместимые?Я попытаюсь опровергнуть это заблуждение.

Добро пожаловать на страницы интернет-журнала "Разноблог". Данный блог будет интересен в первую очередь людям, кого интересуют новости интернета и высоких технологий. Этот блог будет полезен, как "чайникам" в сети, так и опытным пользователям всемирной паутины. Интересные и познавательные статьи, советы профессионалов, последние новости безграничного мира интернета, горячие обсуждения и любопытные факты, всё это в нашем интернет издании. Вы считаете, что женщина и компьютер вещи не совместимые? Мы попытаемся опровергнуть это заблуждение!

В начало
Женский журнал
Мужской журнал
О медицине
Страхование
SEO блог
Женский журнал.

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

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

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

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

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

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

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

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

<a href="https://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="https://www.raznoblog.com/internet/tag/wordpress/" class='tag-link-1 tagsz-1' title='3 topic'>wordpress</a>

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

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

a.tagsz-1 { font-size: 8px; color: #cc0000;font-weight: bold;}
a.tagsz-2 { font-size: 10px; color: #666666;}
a.tagsz-3 { font-size: 12px; color: #009900;font-style: italic;}
a.tagsz-4 { font-size: 14px; color: #cecece;}
a.tagsz-5 { font-size: 16px; color: #000088;}
.
.
.

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

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

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


Комментарии

Комментариев (3) для этого поста.

  1. dionis в Май 20, 2010 9:12 пп

    А что не так с WP-Cumulus? О каких минусах идёт речь?

  2. Ig в Октябрь 18, 2010 4:08 пп

    Спасибо за Отличную Статью!! ..по делу!
    ..вообще Сайт смонтирован с умом! ..Так держать!!

  3. Ирина в Апрель 8, 2011 7:31 дп

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

Написать комментарий

Позвольте мне знать, что вы думаете?