Настраиваем облако тегов в WordPress с помощью wp_tag_cloud(). Виджет «Облако меток» на WordPress Wp облако

В этом посте мы разберем плагин WP-Cumulus который выводит метки (теги) в виде подвижной объемной сферы (flash ).Облако тегов удобно тем, что посетителю не нужно будет искать интересные ему статьи по всем рубрикам, а просто воспользоваться тегами.

Установка плагина и настройка

1. Ваша версия WordPress должна быть 2.3 или выше. Облако тегов для W ordpress не будет работать с более старыми версиями.

2. Качаем русскую версию Кидаем папку wp-cumulus в ваш каталог плагинов (wp-content/plugins/ ).

3.Активируем плагин в админке.

Все настройки плагина находятся в (Парамет рах\WP Cumulus) . Если вдруг у вас в настройках плагина не стоит галочка, (Расположить теги равномерно на сфере ) то нужно обязательно поставить. А то иначе теги в облаке будут друг на друга наезжать и будет не красиво.

Чтобы вывести wordpress облако тегов, у вас есть три варианта.

1. Если вам нужно вставить wordpress облако в статью или в страницу, добавьте в нее тег

Этот тег будет заменен на flash облако тегов при просмотре страницы.

2. Для вставки wordpress облака тегов через шаблон используем код:

3. Если вы хотите вывести облако тегов в сайдбаре.То вам нужно зайти в (Дизайн\Виджеты ) и добавить виджет.

Виджет имеет отдельный набор настроек, так что можем изменить цвет фона, размеров и т.п.

Настройте этот виджет так, как вам нужно и нажмите на "Сохранить ".

Все переведено на русский, думаю разберетесь.

В сем привет. Сегодня мы с вами будем красиво оформлять при помощи стилей оформления 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";

Хотите расположить свои метки на облаке, вернее, на динамическом облаке, которое всегда в движении и привлекает внимание посетителей сайта? Думаю, что да, потому что сегодня получила несколько писем с вопросом: на блог. А если есть такие, кто еще не знает нужно это ему или нет, или вообще не знают о чем речь, то просто посмотрите на главную страницу моего блога и оцените, как Вам облако меток 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, если не удалось получить метки.

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

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

Аргументы параметра $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"

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

• 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

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

• post_tag ;
• category ;
• link_category ;
• Своя таксономия;
• Массив названий таксономий - параметр введен в версии 3.1.
  По умолчанию: post_tag

Примеры

#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 у тега