Облако тегов WordPress

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

Пример, облако тегов WordPress

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

Возможно вам этого будет достаточно. Но там …

  1. Нет встроенных стилей.
  2. Классы не имеют смысла.
  3. Полное URL.

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

к меню ↑

Облако тегов WordPress

Для начала напишем функцию PHP, которая возвращает индивидуальное облако тегов. Функция пишется в файле functions.php активной темы.

Назовём функцию My_TagCloud, которая принимает массив именованных аргументов и наборы по умолчанию:

// облако тегов
function My_TagCloud($params = array()) {
	extract(shortcode_atts(array(
		'orderby' => 'name',		// сортировка по названию
		'order' => 'ASC',		// по Возрастанию или Убыванию
		'number' => ",			// ограничение количества тегов
		'wrapper' => ",		// тэг, внутри тега ссылки, например, li
		'sizeclass' => 'tagged',        // название класса тэга
		'sizemin' => 1,			// наименьшее количество применяемых в классе тега
		'sizemax' => 5			// наибольшее число применяемых на вкладку класса
	), $params));

Дальше мы инициализируем $ret в HTML, $min и $max — минимальное и максимальное количество раз использование тега:

// инициализируем
	$ret = ";
	$min = 9999999; $max = 0;

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

// теги WordPress
	$tags = get_tags(array('orderby' => $orderby, 'order' => $order, 'number' => $number));

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

// получить минимальное и максимальное количество важных тегов
	foreach ($tags as $tag) {
		$min = min($min, $tag->count);
		$max = max($max, $tag->count);
	}

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

// построение списка тэгов
	foreach ($tags as $tag) {
		$url = get_tag_link($tag->term_id);
		$title = $tag->count . ' article' . ($tag->count == 1 ? " : 's');

Дальше нам нужно, назначить класс используемых тегов с tagged1 по tagged5 для наиболее часто используемых (имя класса и количество может быть переопределено установив sizeclass, sizemin и sizemax параметры при вызове функции).

Мы знаем, минимальное и максимальное количество, сколько тег может быть использован, так что немного математики определит названия класса. Но есть одно но, если каждый тег использовался, скажем, только один раз, будет ошибка. Для этого добавим класс $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'));

Шорткод для контента:

tagcloud

Шорткод для шаблона:

add_shortcode('tagcloud', 'My_TagCloud');

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

My_TagCloud();{
$tags = My_TagCloud(array('wrapper' => 'li'));
if ($tags) {
 echo "<h2>Теги:</h2>\n<ul class=\"tagcloud\">$tags</ul>
 \n";
}
}

HTML

<h2>Теги</h2>
<ul class="tagcloud">
<li><a href="/tag/word" class="tagged1" title="1 article">HTML5</a></li>
<li><a href="/tag/tag" class="tagged2" title="2 articles">CMS</a></li>
<li><a href="/tag/phrase" class="tagged5" title="4 articles">PHP</a></li>
<li><a href="/tag/subject" class="tagged1" title="1 article">CSS</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; }

htmlhook.ru | Скрипты для веб-приложений