Облако меток для WordPress

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

Оглавление
  1. Метки в WordPress
  2. Облако меток

Метки в WordPress

Облако меток по умолчанию в WordPress будет иметь следующий код:

<div class="tagcloud">
<a class="tag-link-118 tag-link-position-1" style="font-size: 14.086956521739pt;" title="7 записей" href="http://site.ru/tag/adobe">adobe</a> 
<a class="tag-link-70 tag-link-position-2" style="font-size: 17.434782608696pt;" title="16 записей" href="http://site.ru/tag/api">api</a> 
<a class="tag-link-86 tag-link-position-3" style="font-size: 12.869565217391pt;" title="5 записей" href="http://site.ru/tag/canvas">canvas</a> 
<a class="tag-link-351 tag-link-position-4" style="font-size: 13.579710144928pt;" title="6 записей" href="http://site.ru/tag/dom">dom</a>
</div>

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

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

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

К началу

Облако меток

Для начала напишем функцию 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(home_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/adobe" class="tagged1" title="1 article">HTML5</a></li>
  <li><a href="/tag/api" class="tagged2" title="2 articles">CMS</a></li>
  <li><a href="/tag/canvas" class="tagged5" title="4 articles">PHP</a></li>
  <li><a href="/tag/dom" 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; }
автор 1432
htmlhook.ru | Скрипты для веб-приложений