Wp облако тегов разные шрифты. Как сделать облако тегов для WordPress? Улучшаем Облако тегов WordPress плагинами

Метки –это ещё один функциональный элемент на движке WordPress, который используется на ряду с рубриками и строкой поиска. Благодаря им можно улучшить поведенческие факторы на своём веб-проекте, позволяя читателю искать похожие публикации по соответствующем словам.

Зачастую, вывод меток уже реализован в теме оформления (в конце каждой записи), но помимо, можно использовать сторонние плагины типа « », которые создают оригинальный формат «облака меток». Либо воспользоваться имеющимся стандартным виджетом из набора WordPress, который легко впишется в любой дизайн шаблона.

Облако меток

Стандартный виджет «Облако меток» находится в админ-панели в разделе «Внешний вид» — «Виджеты», и устанавливается, как и все другие виджеты (путём перетягивания в активный Sidebar или через контекст-меню).
В отличие от сторонних решений, «облако меток» имеет минимальные настройки, предлагая вебмастеру задать имя для заголовка и отметить вывод таксономии (помимо тегов, будут показываться рубрики и пользовательские типы данных).

Сам код виджета, точнее его функция «wp_tag_cloud», находятся в базовых директориях WordPress (wp-includes), поэтому редактирование исходника не рекомендуется. Но мы можем воспользоваться иным способом тонкой настройки виджета.

Настройки «Облака меток»

Для внесения изменений можно создать отдельную функцию с указанием требуемых параметров для стандартного виджета, либо , и через текстовый виджет разместить «облако меток».

Мне больше понравился способ через виджет «Текст», и мой вариант принял код следующего вида:

Теперь более подробно о параметрах функции, которые могут использоваться для вывода меток:

  • smallest –минимальный размер для шрифта менее популярных публикаций;
  • largest –максимальный размер для шрифта самых популярных публикаций;
  • unit –единица измерения для размера шрифта, может принимать значения: pt, px, %;
  • number – число меток для вывода (по умолчанию 45);
  • format – формат вывода ссылок: flat (разделенные пробелом – по умолчанию), list – список UL, array – как массив для PHP;
  • separator – значение разделителя между метками (по умолчанию – пробел);
  • orderby – настройка сортировки: name – по алфавиту (по умолчанию), count – по количеству;
  • order – порядок сортировки: по возрастанию – ASC (по умолчанию), на убывание – DESC, случайным образом – RAND;
  • exclude – метки, которые следует исключить из показа;
  • include – метки, которые следует отображать обязательно.

Вместо послесловия

Таким образом редактируя код PHP в текстовом виджете можно добиться требуемого вида для «облака меток». Теперь зная параметры, видим, что приведённый мной пример будет выводить 30 меток с размером шрифта 9pt — 16pt, и сортировать их по алфавиту (по названиям).

Хотите расположить свои метки на облаке, вернее, на динамическом облаке, которое всегда в движении и привлекает внимание посетителей сайта? Думаю, что да, потому что сегодня получила несколько писем с вопросом: на блог. А если есть такие, кто еще не знает нужно это ему или нет, или вообще не знают о чем речь, то просто посмотрите на главную страницу моего блога и оцените, как Вам облако меток WordPress.

Давайте перейдем к делу: чтобы установить облако меток WordPress нужно установить и активировать плагин WP Cumulus. При этом обратите ВНИМАНИЕ, что этот плагин нужно обязательно скачать самостоятельно с Интернет! Обязательно русскоязычную версию!! А то, если воспользоваться поиском при на вкладке Добавить плагин, поиск найдет англоязычный вариант этого плагина, который не сможет корректно работать с Вашими русскими тегами.

  1. ПУА - Плагин - Добавить плагин - Загрузить файл.
  2. Активировать.
  3. Настроить плагин.

Что значит настроить плагин? А давайте не будем настраивать и просто посмотрим как выглядит наше облако на странице!

Чтобы добавить облако на страницу, выберите Виджет Облако меток и перетащите его в сайдбар. Готово? Тогда переходите к просмотру главной страницы сайта.

И как? Все нравится?

  • Цвет текста, цвет фона устраивает?
  • Проверьте работу тегов: нажмите на любой тег и посмотрите результат. Кстати, успели нажать на тег? Скорость вращения устраивает?
  • Кстати, обратите внимание, вписалось ли Ваше облако в размеры сайд-бара! У меня при первоначальной установке размеры облака не соответствовали моему сайд-бару.
  • Как расположены ваши теги? Не кажется Вам, что они сбились в кучку? Если, да, то обязательно нужно поставить галочку в настройках плагина, чтобы равномерно расположить теги на облаке.

Поэтому, все-таки, давайте вернемся на страницу настройки облака и подправим все, что нас не устраивает.

Для настройки плагина смело нажимайте ЛКМ на названии плагина WP Cumulus на вкладке Настройка. Вносите необходимые Вам изменения, переходите на сайт и любуйтесь изменениями. Только ВНИМАНИЕ, сделав изменения, обязательно проверьте как это выглядит в реалии, и если что возвращайте параметры на место.

Кстати, эти же настройки плагина можно выполнить, если нажмете Облако меток на вкладке Виджеты.

НЕ ЗАБУДЬТЕ! Обращаю Ваше внимание, что нужно обязательно поставить галочку

Располагает теги на равных друг от друга расстояниях вместо случайного расположения

иначе Ваши теги могут сбиваться в кучку и удовольствия и красоты от облака Вы не получите!

Кстати, чуть не забыла предупредить: плагин нужно устанавливать только, если есть хотя бы одна метка!!! Если меток нет, обязательно открывайте статьи и добавляйте метки!!!

Подведем итоги:

  • узнали зачем нужен плагин WP Cumulus
  • скачали плагин WP Cumulus
  • узнали, как установить, активировать, настроить плагин WP Cumulus
  • узнали, как установить облако меток WordPress на блог

Я тестировала работу этого облака три месяца и решила, что пока уберу это облако со своего сайта. Протестирую работу блога без облака меток.

Выводит или получает облако меток (список меток в виде облака). Можно указать произвольную таксономию.

Чтобы вывести элементы произвольной таксономии в виде облака, укажите название таксономии в параметре taxonomy .

"Облако меток" называется так, потому что размер текста каждой метки зависит от того, сколько записей связано с меткой. Чем больше записей, тем больше будет текст метки (в итоге получается нечто похожее на облако).

С версии 2.8 был добавлен параметр taxonomy , позволяющий создавать облако не только для стандартных меток, но и для категорий и произвольных таксономий.

Возвращает

null. Выводит на экран html код списка.

  • Возвращает HTML, если параметр echo = false .
  • Вернет массив облака меток, если параметр format = array .
  • false, если не удалось получить метки.

Шаблон использования

wp_tag_cloud(array("smallest" => 8, "largest" => 22, "unit" => "pt", "number" => 45, "format" => "flat", "separator" => "\n", "orderby" => "name", "order" => "ASC", "exclude" => null, "include" => null, "link" => "view", "taxonomy" => "post_tag", "echo" => true, "topic_count_text_callback" => "default_topic_count_text",));

Использование

$args(строка/массив) Аргументы, на основе которых будет построен список.
По умолчанию: базовые значения

Аргументы параметра $args

В $args можно также указать все параметры функции get_terms() . Получение элементов таксономии работает на базе этой функции.

Smallest(число) Размер текста для меток с меньшим
По умолчанию: 8 largest(число) Размер текста для меток с большим количеством записей (единицы измерения указываются в параметре unit).
По умолчанию: unit(строка) Единицы измерения параметров smallest и largest . Может быть любым CSS типом размера: pt , px , em , % .
По умолчанию: "pt" number(число) Максимально количество меток, которое будет показано в списке. Если установить на 0 , то будут показаны все метки без ограничения.
По умолчанию: 45 format(строка)

В каком формате выводить список. Может быть:

  • flat - метки будут разделены разделителем, указанным в параметре separator ;
  • list - UL список с CSS классом "wp-tag-cloud";
  • array - вернет облако меток в массиве для дальнейшей обработки в PHP.
    По умолчанию: "flat"
separator(строка) Текст между метками.
По умолчанию: "\n" orderby(строка) Сортировать метки по имени (name) или количеству записей (count). Не влияет на запрос к базе данных.
По умолчанию: "name" order(строка)

Порядок сортировки. Может быть:

  • ASC - по порядку (1,2,3);
  • DESC - в обратном порядке (3,2,1);
  • RAND - хаотичный порядок (перемешать).

order и orderby не влияют на запрос к базе данных. Метки сначала получаются из базы данных, затем сортируются. Эти параметры для получения из базы данных равны: orderby=count и order=DESC и их нельзя изменить.
По умолчанию: "ASC"

Exclude(строка) Исключить указанные метки. Указывать нужно ID через запятую.
По умолчанию: null include(строка) Показать только указанные метки. Указывать нужно ID через запятую.
По умолчанию: null topic_count_text_callback(строка/массив) Функция, которая получает количество записей и возвращает текст для метки. Можно установить свою функцию, если нужно отображать какой-либо другой текст с количеством записей для каждой метки.
По умолчанию: default_topic_count_text link(строка)

  • view - по нажатию на метку, попадем на страницу метки;
  • edit - по нажатию на метку, попадем на страницу редактирования метки.
    По умолчанию: view
taxonomy(строка/массив)

Название таксономии или массив нескольких названий, из которых будет построено облако. Может быть:

  • post_tag ;
  • category ;
  • link_category ;
  • Своя таксономия;
  • Массив названий таксономий - параметр введен в версии 3.1.
    По умолчанию: post_tag
show_count(логический) Показывать ли число записей в метке. По умолчанию 0. Может быть: 0, 1 или true/false. С WP 4.8. echo(логический) 1 - Выводить на экран, 0 - возвращать результат для дальнейшей обработки.
По умолчанию: 1 (true)

Примеры

#1 Базовое использование

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

Популярные метки"; wp_tag_cloud("smallest=8&largest=22"); } ?>

#1.2. Еще одни пример демонстрирующий передачу разных параметров

Изменим размеры меток (smallest=15&largest=40), ограничим количество выводимых меток (number=50) и отсортируем их по количеству записей, а не по имени (orderby=count):

#2 Получим список, не будем выводить его на экран

Запишем список в параметр $tag, чтобы потом использовать его в php для своих целей:

#3 Облако категорий

"category")); ?>

#3.1. Облако меток и категорий одновременно

array("post_tag","category"),)); ?>

#4 Изменение текста атрибута title у тега

"my_tag_text_callback")); function my_tag_text_callback($count) { return sprintf(_n("%s картинка", "%s картинок", $count), number_format_i18n($count)); } ?>

#5 Архив меток

Как один из вариантов использования меток, предлагаю создать архивные страницы меток. При клике на определенную метку, мы попадаем на страницу с постами связанными с этой меткой. Как выглядет такая страница, определяется файлом шаблона tag.php , если такого файла нет (обычно его ент), то формирование вывода отдается файлу archives.php .

Давайте сделаем страницу метки, на которой в самом начале будет показано облако меток, а после него записи относящиеся к выбранной метке. Для этого создадим (если нет) или изменим (если существует) файл tag.php. Создавать файл нужно в каталоге темы.

Содержимое файла tags.php:

Tag Archive

" rel="bookmark" title="Permanent Link to ">

В данном примере не учитываются CSS стили, поэтому возможна несовместимость с шаблоном.

#6 Изменение параметров по умолчанию для виджета облака меток через фильтр

Допустим, нам нужно уменьшить максимальный шрифты для виджета с облаком меток. Нужно поставить значение 16, а не 22 для параметра "largest". Для этого используем хук widget_tag_cloud_args

Add_filter("widget_tag_cloud_args", function($args){ $args["largest"] = 16; return $args; });

На этот пример меня подтолкнул этот комменатрий

Заметки

  • В версии 3.1 добавлен возможность передавать массивы в параметр taxonomy ;
  • В версии 2.9 добавлен параметр separator ;
  • В версии 2.8 добавлены параметры taxonomy и echo ;
  • В версии 2.7 добавлен параметр link ;

Код wp tag cloud : wp-includes/category-template.php WP 5.2.2

8, "largest" => 22, "unit" => "pt", "number" => 45, "format" => "flat", "separator" => "\n", "orderby" => "name", "order" => "ASC", "exclude" => "", "include" => "", "link" => "view", "taxonomy" => "post_tag", "post_type" => "", "echo" => true, "show_count" => 0,); $args = wp_parse_args($args, $defaults); $tags = get_terms($args["taxonomy"], array_merge($args, array("orderby" => "count", "order" => "DESC",))); // Always query top tags if (empty($tags) || is_wp_error($tags)) { return; } foreach ($tags as $key => $tag) { if ("edit" == $args["link"]) { $link = get_edit_term_link($tag->term_id, $tag->taxonomy, $args["post_type"]); } else { $link = get_term_link(intval($tag->term_id), $tag->taxonomy); } if (is_wp_error($link)) { return; } $tags[ $key ]->link = $link; $tags[ $key ]->id = $tag->term_id; } $return = wp_generate_tag_cloud($tags, $args); // Here"s where those top tags get sorted according to $args /** * Filters the tag cloud output. * * @since 2.3.0 * * @param string $return HTML output of the tag cloud. * @param array $args An array of tag cloud arguments. */ $return = apply_filters("wp_tag_cloud", $return, $args); if ("array" == $args["format"] || empty($args["echo"])) { return $return; } echo $return; }

В сем привет. Сегодня мы с вами будем красиво оформлять при помощи стилей оформления CSS3 метки (облако тегов). Метки - используются на сайтах для группировки записей по какому-то признаку и предназначены для удобства нахождения информации пользователем на блоге. Для вывода всех меток в WordPress используется виджет: облако меток.

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

Для отображения облака тегов на сайте достаточно просто перетащить виджет в нужное место сайдбара или (см. скриншот). Но, если вы в процессе написания записей не указывали метки для записи, то это облако тегов будет у вас пустым. Практически все бесплатные cms для создания сайтов, имеют встроенную поддержку меток, их можно создавать при написании записи или после в админ панели сайта, раздел «Записи» - «Метки».

После добавления облака тегов на сайт, они будут иметь не очень красивый вид, а мы с вами попытаемся сделать их более привлекательными:

Ну что, подойдет такое оформление? Тогда приступим.

Файл стилей облака тегов wordpress

Для создания такого облака тегов мы с вами будем использовать стилевое оформление на CSS3:

Tags { float: left; margin: 0 0 7px 15px; position: relative;

font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; font-size: 0.75em; font-weight: bold; text-decoration: none; color: #996633; text-shadow: 0px 1px 0px rgba(255,255,255,.4); padding: 0em 0.417em 0.05em 0.917em; border-top: 1px solid #d99d38; border-right: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0.25em 0.25em 0; -moz-border-radius: 0 0.25em 0.25em 0; border-radius: 0 0.25em 0.25em 0; background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#feda71′, EndColorStr=’#feba47′); -webkit-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); -moz-box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); box-shadow: inset 0 1px 0 #faeaba, 0 1px 1px rgba(0,0,0,.1); } .tags:before { content:»; width: 1.30em; height: 1.358em; background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#feda71′, EndColorStr=’#feba47′); position: absolute; left: -0.69em; top: .2em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-left: 1px solid #d99d38; border-bottom: 1px solid #d99d38; -webkit-border-radius: 0 0 0 0.25em; -moz-border-radius: 0 0 0 0.25em; border-radius: 0 0 0 0.25em; z-index: 1; } .tags: after { content:»; width: 0.5em; height: 0.5em; background: #fff; -webkit-border-radius: 4.167em; -moz-border-radius: 4.167em; border-radius: 4.167em; border: 1px solid #d99d38; -webkit-box-shadow: 0 1px 0 #faeaba; -moz-box-shadow: 0 1px 0 #faeaba; box-shadow: 0 1px 0 #faeaba; position: absolute; top: 0.667em; left: -0.083em; z-index: 9999; } .tags: hover { background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’); border-color: #e1b160; } .tags: hover: before { background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108)); filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr=’#fee18d’, EndColorStr=’#fec86c’);

border-color: #e1b160; }

Откройте админ панель сайта и перейдите на вкладку внешний вид/редактор, в правой колонке выберете файл style.css Скопируйте приведенный выше код и вставьте его в самый конец файла. На этом работа с файлом стилей завершена.

Параметры облака тегов - функция wp_tag_cloud

Если, открыть Html код страницы, и посмотреть на отображение облака тегов , то можно увидеть, что оно описывается двумя классами:

  • tagcloud
  • tags-link

Первым классом tagcloud описывается размер шрифта, формат вывода ссылок, порядок сортировки, разделитель между тегами, и.т.п Вторым классом tags-link описываются непосредственно теги.

Чтобы внести изменения в эти классы нам нужно открыть файл функций (function.php). И добавить в конец файла код описывающий класс tagcloud :

Function set_tag_cloud_args($args) { $args["number"] = 30; $args["largest"] = 10; $args["smallest"] = 10; $args["unit"] = "px"; $args["format"] = "flat"; return $args; }

  • smallest – минимальный размер шрифта наименее популярных тегов;
  • largest – максимальный размер шрифта для популярных меток;
  • unit – величина для определения шрифта – pt, px, em, % (по умолчанию в pt, я ставлю обычно в пикселях px);
  • number – количество тегов для отображения (45 по умолчанию);
  • format – формат вывода ссылок: flat (разделенные пробелом – по умолчанию), list – список UL, array – как массив для PHP;
  • separator – разделитель между тегами (по умолчанию – пробел);
  • orderby – сортировка: name – по названию (изначально), count – по популярности;
  • order – порядок сортировки: возрастающая – ASC (изначально), по спадающей – DESC, случайным образом – RAND;
  • exclude – теги для исключения из облака;
  • include – теги для включения в облако (будут отображены только они).

Обязательно установите параметр ‘largest’=’smallest’ = 10; - одинаковый размер шрифта для популярных и наименее популярных меток облака тегов . Остальные параметры устанавливайте на ваше усмотрение.

Теперь в файле category-template.php (он находится в папке wp-includes), найдите при помощи сочетания клавиш cntr+F следующие строки:

$a = "$tag_name";

$a = "$tag_name";