Статьи

Как создать лучшее облако тегов в WordPress

Декабрь 31, 2018

После того, как вы определили большой набор тегов для ваших постов ( или страниц ) WordPress, вы захотите отобразить облако тегов где-то в вашем шаблоне. Обычно это достигается с помощью функций wp_tag_cloud () или wp_generate_tag_cloud (), которые выполняют тяжелую работу за вас: 

<a href="http://www.mysite.com/tag/word" class="tag-link-7" title="1 topic" style="font-size: 8pt;">word</a>
<a href="http://www.mysite.com/tag/tag" class="tag-link-5" title="2 topics" style="font-size: 14.3pt;">tag</a>
<a href="http://www.mysite.com/tag/phrase" class="tag-link-6" title="4 topics" style="font-size: 22pt;">phrase</a>
<a href="http://www.mysite.com/tag/subject" class="tag-link-4" title="1 topic" style="font-size: 8pt;">subject</a>

Возможно, вы довольны этим. Я не…

  1. Встроенные стили? Разве мы не отказались от них в 1998 году?
  2. Занятия бессмысленны. Мне, вероятно, никогда не понадобится стилизовать отдельный тег, и даже если я сделаю это, ссылка на него по идентификатору будет хрупкой.
  3. Мне не нужен полный URL.

wp_tag_cloud() Помимо перечисленных выше моментов, я бы хотел назначить тегам пять или шесть классов в зависимости от их популярности, например, «tagged1» для наименее используемого тега и «tagged5» для наиболее используемого.

Давайте напишем функцию PHP, которая возвращает настроенное облако тегов. Его можно поместить в файл functions.php вашей темы (wp-content / themes / <themename> /functions.php) или в плагин.

Во-первых, у нас есть имя функции, которое принимает массив именованных аргументов и устанавливает значения по умолчанию: 

 // generate tag cloud
function My_TagCloud($params = array()) {

	extract(shortcode_atts(array(
		'orderby' => 'name',		// sort by name or count
		'order' => 'ASC',		// in ASCending or DESCending order
		'number' => '',			// limit the number of tags
		'wrapper' => '',		// a tag wrapped around tag links, e.g. li
		'sizeclass' => 'tagged',	// the tag class name
		'sizemin' => 1,			// the smallest number applied to the tag class
		'sizemax' => 5			// the largest number applied to the tab class
	), $params));

Теперь мы инициализируем $ret$min$max 

 	// initialize
	$ret = '';
	$min = 9999999; $max = 0;

Функция WordPress get_tags () теперь вызывается. Возвращает массив объектов тегов: 

 	// fetch all WordPress tags
	$tags = get_tags(array('orderby' => $orderby, 'order' => $order, 'number' => $number));

Теперь нам нужно определить минимальное и максимальное количество раз, когда тег используется на нашем сайте. Следующий цикл устанавливает $min$max 

 	// get minimum and maximum number tag counts
	foreach ($tags as $tag) {
		$min = min($min, $tag->count);
		$max = max($max, $tag->count);
	}

Теперь мы можем создать наше собственное облако тегов HTML. Нам нужно перебрать все теги во второй раз и получить URL и заголовок ссылки — сообщение, указывающее, сколько статей используют этот тег: 

 	// generate tag list
	foreach ($tags as $tag) {
		$url = get_tag_link($tag->term_id);
		$title = $tag->count . ' article' . ($tag->count == 1 ? '' : 's');

Теперь для хитрости. По умолчанию мы хотим назначить класс «tagged1» для наименее используемого тега до «tagged5» для наиболее используемого (имя и номера класса можно переопределить, установив параметры sizeclasssizeminsizemax

Мы знаем минимальное и максимальное количество раз, которое тег может быть использован, поэтому небольшая математика может определить имя класса для нас. Однако уравнение вызовет ошибку деления на ноль, если каждый тег будет использоваться, скажем, только один раз. В этой ситуации мы устанавливаем класс $sizeclass 

 		if ($max > $min) {
			$class = $sizeclass . floor((($tag->count - $min) / ($max - $min)) * ($sizemax - $sizemin) + $sizemin);
		}
		else {
			$class = $sizeclass;
		}

Теперь у нас достаточно информации для создания HTML-кода для нашего единственного тега и завершения цикла: 

 		$ret .= 
			($wrapper ? "<$wrapper>" : '') . 
			"<a href="$url" class="$class" title="$title">{$tag->name}</a>" .
			($wrapper ? "</$wrapper>" : '');
	}

Наконец, мы удаляем URL домена блога из $ret 

 	return str_replace(get_bloginfo('url'), '', $ret);
}

Функцию можно вызывать в любом файле темы с помощью My_TagCloud(); , Аргументы могут быть переданы в виде ассоциативного массива, например, My_TagCloud(array('orderby'=>'count','order'=>'DESC')); , Однако мы также можем разрешить редакторам контента добавлять облако тегов, используя шорткод WordPress, например 

 // enable [tagcloud] shortcode
add_shortcode('tagcloud', 'My_TagCloud');

В следующем примере мы создадим облако тегов в неупорядоченном списке: 

 $tags = OW_Tags(array('wrapper' => 'li'));
if ($tags) {
	echo "<h2>Tags</h2>n<ul class="tagcloud">$tags</ul>n";
}

Это приводит к созданию более аккуратного HTML-кода: 

 <h2>Tags</h2>
<ul class="tagcloud">
<li><a href="/tag/word" class="tagged1" title="1 article">word</a></li>
<li><a href="/tag/tag" class="tagged2" title="2 articles">tag</a></li>
<li><a href="/tag/phrase" class="tagged5" title="4 articles">phrase</a></li>
<li><a href="/tag/subject" class="tagged1" title="1 article">subject</a></li>
</ul>

который легче стилизовать и поддерживать CSS: 

 ul.tagcloud, ul.tagcloud li
{
	font-size: 1em;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.tagcloud li
{
	display: inline;
}

ul.tagcloud a
{
	text-decoration: none;
	padding: 3px 4px;
}

a.tagged1 { font-size: 0.60em; }
a.tagged2 { font-size: 0.80em; }
a.tagged3 { font-size: 1.00em; }
a.tagged4 { font-size: 1.20em; }
a.tagged5 { font-size: 1.40em; }

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

42
Share: