На многих ресурсах выводятся теги непросто для заполнения пустого места или красоты, как это часто бывает, а и для прямого назначения. Материал группируют по определенным словам, что лучше позволяет находить необходимую информацию. Или даже заменяют стандартные рубрики на сортировку по тегам, это относится к большим порталам.
Сегодня мы рассмотрим один способ вывода облака тегов на отдельной странице сайта, и через стандартный виджет, задав каждому тегу разный цвет ссылки или фона. В итоги получим цветное облако тегов, и ко всему этому добавим вывод обычных меток в конце поста.
Мы не будем использовать специальные плагины, хоть в официальном репозитории их очень много по этой теме. К примеру, для , старенький и всем известный модуль. Все действия выполним в ручном режиме, так сказать, своими силами с помощью некоторых функций.
Облако тегов на отдельной странице
Для реализации нам понадобится , убрать лишние функции и добавить свои в нужном месте. Детали, касающиеся шаблона, я пропущу в описание, затрону только основные моменты (со всем остальным можете ознакомиться по ссылке выше).
Продублируйте стандартный файл page.php , сохраните его под именем tags.php и в самом начале файла добавьте комментарий:
/* Template Name: tag cloud */
Внутри данного файла уберите ненужные функции: цикл, навигация, форму комментариев и все остальное, что не понадобится. По идеи должно остаться header, sidebar, footer и блоки, сохраняющие корректность вида контента.
заменим ее на эту:
Осталось прописать в файле functions.php следующий код:
|i", "colorCloudCallback", $text); return $text; } function colorCloudCallback($matches) { $text = $matches; #Цвет фона тегов $colors = array("F99","C9C","F96","6CC","6C9","37A7FF","B0D686","E6CC6E"); $color=$colors; $pattern = "/style=(\"|\")(.*)(\"|\")/i"; #Стили тегов $text = preg_replace($pattern, "style=\"display: inline-block; *display: inline; *zoom: 1; color: #fff; text-shadow: 1px 1px 1px #989898; padding: 1px 5px; margin: 0 5px 5px 0; background-color: #{$color}; border-radius: 2px; text-decoration: none!important; -webkit-transition: background-color .4s linear; -moz-transition: background-color .4s linear; transition: background-color .4s linear;\"", $text); $pattern = "/style=(\"|\")(.*)(\"|\")/i"; return "
Он добавит рандомный (случайный) цвет фона меток.
Результат.
Цветное облако тегов в сайдбаре
Чтобы в сайдбаре вывести обычное облако тегов, достаточно использовать стандартный виджет. Он присутствует изначально на любом сайте WordPress, и находится в разделе «Внешний Вид-Виджеты ». Но, по неизвестным причинам, если это кому-то не подходит можно также использовать функцию wp_tag_cloud . Только вначале , затем в него поместить такой код:
И в последнем действие добавим в файл functions.php следующий код:
Function colorCloud($text) { $text = preg_replace_callback("||i", "colorCloudCallback", $text); return $text; } function colorCloudCallback($matches) { $text = $matches; $color = dechex(rand(0,16777215)); $pattern = "/style=(\"|\")(.*)(\"|\")/i"; $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text); return ""; } add_filter("wp_tag_cloud", "colorCloud", 1);
Предупреждение. Не используйте одновременно две эти функции (цвет фона, цвет ссылки) иначе может быть конфликт. Выбирайте что-то одно, и оно будет работать со всеми метками.
Результат.
Вывод меток в конце поста
В заключении, как говорилось выше, выведем теги в конце статьи. Нам нужно добавить в файл single.php , после функции , такой код:
И чуток стилей оформления.
Tagpost a{ background:#D02B7B; border-radius:2px; padding:4px; text-decoration:none !important; color:#fff!important; font-size:11px; }
Результат.
Вот и все.
Хотите расположить свои метки на облаке, вернее, на динамическом облаке, которое всегда в движении и привлекает внимание посетителей сайта? Думаю, что да, потому что сегодня получила несколько писем с вопросом: на блог. А если есть такие, кто еще не знает нужно это ему или нет, или вообще не знают о чем речь, то просто посмотрите на главную страницу моего блога и оцените, как Вам облако меток WordPress.
Давайте перейдем к делу: чтобы установить облако меток WordPress нужно установить и активировать плагин WP Cumulus. При этом обратите ВНИМАНИЕ, что этот плагин нужно обязательно скачать самостоятельно с Интернет! Обязательно русскоязычную версию!! А то, если воспользоваться поиском при на вкладке Добавить плагин, поиск найдет англоязычный вариант этого плагина, который не сможет корректно работать с Вашими русскими тегами.
- ПУА - Плагин - Добавить плагин - Загрузить файл.
- Активировать.
- Настроить плагин.
Что значит настроить плагин? А давайте не будем настраивать и просто посмотрим как выглядит наше облако на странице!
Чтобы добавить облако на страницу, выберите Виджет Облако меток и перетащите его в сайдбар. Готово? Тогда переходите к просмотру главной страницы сайта.
И как? Все нравится?
- Цвет текста, цвет фона устраивает?
- Проверьте работу тегов: нажмите на любой тег и посмотрите результат. Кстати, успели нажать на тег? Скорость вращения устраивает?
- Кстати, обратите внимание, вписалось ли Ваше облако в размеры сайд-бара! У меня при первоначальной установке размеры облака не соответствовали моему сайд-бару.
- Как расположены ваши теги? Не кажется Вам, что они сбились в кучку? Если, да, то обязательно нужно поставить галочку в настройках плагина, чтобы равномерно расположить теги на облаке.
Поэтому, все-таки, давайте вернемся на страницу настройки облака и подправим все, что нас не устраивает.
Для настройки плагина смело нажимайте ЛКМ на названии плагина WP Cumulus на вкладке Настройка. Вносите необходимые Вам изменения, переходите на сайт и любуйтесь изменениями. Только ВНИМАНИЕ, сделав изменения, обязательно проверьте как это выглядит в реалии, и если что возвращайте параметры на место.
Кстати, эти же настройки плагина можно выполнить, если нажмете Облако меток на вкладке Виджеты.
НЕ ЗАБУДЬТЕ! Обращаю Ваше внимание, что нужно обязательно поставить галочку
Располагает теги на равных друг от друга расстояниях вместо случайного расположения
иначе Ваши теги могут сбиваться в кучку и удовольствия и красоты от облака Вы не получите!
Кстати, чуть не забыла предупредить: плагин нужно устанавливать только, если есть хотя бы одна метка!!! Если меток нет, обязательно открывайте статьи и добавляйте метки!!!
Подведем итоги:
- узнали зачем нужен плагин WP Cumulus
- скачали плагин WP Cumulus
- узнали, как установить, активировать, настроить плагин WP Cumulus
- узнали, как установить облако меток 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, уже есть функция «облако тегов», поэтому все, что нужно - это активировать ее. Для этого необходимо зайти в панель администратора на вашем сайте и выбрать в меню «Внешний вид» пункт «Виджеты». Далее нужно всего лишь перетащить виджет «Облако тегов» на подходящую колонку в боковой панели. После этого следует сохранить все изменения, и «Облако меток» будет размещено на ваше ресурсе.
Во многих популярных CMS-системах, таких как WordPress, Drupal и Joomla, имеются достаточно мощные специальные плагины, которые помогут создать как статические, так и динамические облака меток. Они очень просты в использовании, поэтому трудностей в работе с ними не должно возникнуть. При помощи таких плагинов вы сможете гармонично вписать облако меток в дизайн вашего сайта, что поможет посетителям находить нужную информацию в несколько раз быстрее.
Воспользуйтесь и плагинами, которые можно скачать в сети Интернет. Один из них - WP-Cumulus. После скачивания необходимо залить в корень папку с плагином. Далее активируем его и заходим в меню настроек. После следует вставить код облака меток на сайт. Лучшим местом для его расположения является сайдбар, поэтому нужно выбрать здесь подходящее место и вставить код «WP-CUMULUS». На этом настройка облака тегов закончена, и вы можете наслаждаться его видом. Оно получается достаточно удобным и красивым, так как построено на флеше.
Если у Вас самописный сайт, то можете ознакомиться со статьей "Создание flash-облака тегов на своем сайте ", о которой я писал раньше.
Если вы хотите, чтобы ваше облако тегов было особенным и неповторимым, можете сделать его самостоятельно. Но в случае отсутствия необходимого количества знаний в этой области, хорошим вариантом будет воспользоваться предложениями фрилансеров, которые за определенную плату сделают для вас уникальное облако тегов.
Многие блогеры недооценивают облака тегов, приводя против подобных плагинов множество доводов. Тем не менее, большинство считает, что облако меток может отлично вписаться в структуру и дизайн любого ресурса, особенно учитывая многообразие дизайнерских решений. Также приносимую им пользу постоянно отмечают и посетители сайтов, поэтому облако тегов на вашем сайте лишним не будет!
В этом посте мы разберем плагин 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. Если вы хотите вывести облако тегов в сайдбаре.То вам нужно зайти в (Дизайн\Виджеты ) и добавить виджет.
Виджет имеет отдельный набор настроек, так что можем изменить цвет фона, размеров и т.п.
Настройте этот виджет так, как вам нужно и нажмите на "Сохранить ".
Все переведено на русский, думаю разберетесь.