Облако тегов для wordpress. Виджет «Облако меток» на WordPress. Установка плагина и настройка

Можно задуматься об реализации на ресурсе дополнительной навигации с помощью создания облака меток или тегов и выведения его на страницах создаваемого ресурса.

Для начала разбираем что это такое?

Метки(теги) — слова или словосочетания, которые характеризуют прикрепленные к ним записи. Они создаются таким же образом, как рубрики. Они выводятся на блоге для дополнительной навигации по блогу или для искусственного увеличения количества страниц на нем. Правда их создание уменьшает уникальность размещенных заметок.

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

Это удобно читателю и мне хорошо, вот только не стоит злоупотреблять количеством слов и вводить в заблуждение спамностью создаваемых меток. С другой стороны попробуй определи набор слов или коротких фраз, которые будут емко отображать смысл записей. Идеальный вариант в качестве меток использовать Keywords, которые помогут дополнительно оптимизировать каждый пост. Чтобы их определить, Вам поможет плагин All in One SEO Pack

Создать облако тегов WordPress c помощью плагинов.

Я использовал WP-Cumulus русская версия http://www.wordpressplugins.ru/look/wp-cumulus.html (выделите адрес и скопируйте его в адресную строку браузера). Он просто устанавливается и активируется

Просто захожу в панель управления виджетами(6), перетягиваю виджет «Облако тегов» в активную часть боковой панели блога, выбираю что в нем следует отображать:

  • метки
  • рубрики
  • метки и рубрики

В итоге на лицевой стороне блога отображается простое по виду облако(7). Чем массивнее начертание меток — тем больше к ним прикреплено постов.

Такое облако тегов не очень красиво, но им легче пользоваться, так как по постоянно движущимся меткам не всегда удобно кликать.

Вывод облака тегов без плагина

Облако меток можно создать на блоге WordPress и без плагина. Это облегчит сам код ресурса, избавит нас от установки стороннего дополнения.

1. Вставьте этот код в файл sidebar.php, как это выполнить написано в серии заметок о редактировании файлов шаблонов WordPress :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

облако меток

10 , // Размер шрифта для наименее используемых тегов "largest" => 14 , // Размер шрифта для наиболее часто используемых тегов "unit" => "px" , // Выбор размера шрифта в pt, em, px и.т.д.) "number" => 60 , // Отображаем максимальное кол-во меток "format" => "array" , "separator" => "" , "orderby" => "name" , // name - вывод в алфавитном порядке; count - по популярности "order" => "RAND" , // начиная с А, или исходя из количества наибольших упоминаний статей "exclude" => "" , // показываем все, кроме отмеченных ID "include" => "" , // Подключаем только эти ID - все остальные не показываем "link" => "view" , // view - показываем ссылку "taxonomy" => "post_tag" , // post_tag, link_category, category - любой из этих видов "echo" => true ) ) ; foreach ($arr as $value ) { $ptr1 = strpos ($value , "font-size:" ) ; $ptr2 = strpos ($value , "px" ) ; $px = round (substr ($value , $ptr1 + 10 , $ptr2 - $ptr1 - 10 ) ) ; $value = substr ($value , 0 , $ptr1 + 10 ) . $px . substr ($value , $ptr2 ) ; $ptr1 = strpos ($value , "class=" ) ; $value = substr ($value , 0 , $ptr1 + 7 ) . "color-" . $px . " " . substr ($value , $ptr1 + 7 ) ; echo " " . $value . " " ; //Размер и цвет точки - разделителя между тегами } ?>

Обратите внимание на комментирование — это текст, который идет после //. В комментариях определено некоторые условия, изменение которых позволяет настроить облако тегов по своему усмотрению.

2. Способ, который требует интеграции первого кода в файл functions.php

1 2 3 4 5 6 7 8 9 10 11 function wm_postCountByTag() { $tags = get_tags( array ("orderby" => "count" , "order" => "DESC" ) ) ; if ($tags ) { foreach ( (array ) $tags as $tag ) { echo " . get_tag_link($tag -> term_id ) . "" rel="tag">" . $tag -> name . " (" . $tag -> count . ") " ; } } }

а вот этого кода в файл sidebar.php или в любой другой.

В файле style.css определить свойства оформления облака тегов, которые помогут его красиво адаптировать к внешнему виду Вашего ресурса.

3. Интегрировать вот этот код

Для настройки облака меток используйте следующие свойства:

  • ‘orderby’ => ‘name’ — оператор позволяет сортировку по: name — по имени тегов, count — по количеству записей
  • ‘order’ => ‘ASC’ — определяет порядок сортировки: ASC — прямой, DESC — обратный
  • ‘number’ => 25 — число определяет максимальное количество тегов, которое будет выводиться в облаке.
  • ‘largest’ => 16 — максимальный размер шрифта, которым будет форматироваться тег, к которому было прикреплено больше всего заметок
  • ’smallest’ => 11 — Минимальный размер шрифт меток, к которой привязано минимальное количество постов.
  • ‘unit’ => ‘pt’ — единицы измерения шрифтов
  • ‘exclude’ => ” — если есть желание исключить метки, нужно её id присвоить атрибуту. Если исключаются несколько тегов, id прописываются через запятую.
  • ‘include’ => ” — включает метки в область облака тегов, id прописываются через запятую.

Вот и все что я желал рассказать. Надеюсь, я Вам помог и Вы решили поставленную задачу перед собой. Если Вы желаете решить любую задачу по оформлению своего блога, работающего на WordPress, читайте .

На движке WordPress создается огромное количество сайтов, им пользуются как новички, так и профессионалы.

Преимуществ у CMS много, одна из них – это огромный выбор разных плагинов, с помощью которых можно преобразовать внешний вид сайта. За счет расширений можно установить массу интересных виджетов, в том числе и облако тегов (категорий).

Как сделать облако тегов для WordPress? В этом движке есть стандартный плагин, чтобы установить красивую форму с плавающими тегами.

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

Лучший плагин для облака тегов на WordPress

В стандартном наборе есть много разных расширений, однако, они не всегда качественные и часто оказывают высокую нагрузку на сервер.

Для оптимизации сайта мы уже рассказывали, как добавить . Установить облако меток без расширений слишком сложно, а лучшее решение – это плагин WP-Cumulus .

Скачивайте и устанавливайте дополнение, после чего в основном меню административной панели появится новый пункт, чтобы вы могли задать настройки. Их не так много, но всё необходимое здесь есть:

Заголовок можно не указывать, размерность устанавливайте так, чтобы блок красиво вписывался в шаблон, то же самое касается цвета фона. Скорость вращения лучше оставить по умолчанию. Обратите внимание, что в облаке можно отображать теги и рубрики , это основное преимущество плагина WP-Cumulus.

После настройки параметров добавляйте облако тегов в любую область (идеально подходит сайдбар), должно получиться что-то вроде этого:

Обычный формат, в котором представляются все рубрики и теги. Вы потратите всего несколько минут, чтобы установить такой же блок на своем сайте.

Альтернативные плагины для облака тегов на WordPress

Естественно, у WP-Cumulus есть масса аналогов, поэтому вы легко решите проблему, если по каким-то причинам вам не подойдет это расширение. Появляются новые плагины постоянно, рассмотрим только те, что уже давно используются тысячами владельцев сайтов.

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

Плагин Cool Tag Cloud: облако меток WordPress

Плагин Cool Tag Cloud создаёт легко настраиваемый виджет облака меток, который хорош на восприятие и удобен в кастомизации и использовании. Имеется полностью русский перевод, поэтому сложностей с ним не возникает.

Облако меток – это дополнительный инструмент навигации, который помогает лучше сориентироваться посетителям сайта, представить, какие темы охватывает данный проект. Этот элемент полезен для поведенческих факторов.

Чтобы создать облако меток WordPress, скачайте плагин Cool Tag Cloud по ссылке ниже. Установите его и активируйте.

После настроек облако меток может выглядеть так.

Облако меток WordPress Cool Tag Cloud

У плагина нет собственных настроек, поэтому сразу переходим в пункт консоли «Внешний вид» и подпункт «Виджеты». Выбираем виджет «Cool Tag Cloud», перетягиваем его в нужный сайдбар и разворачиваем его для настроек.

Все опции на русском языке. Не стану даже рассказываться, что для чего нужно.

Просто приведу список возможностей данного плагина:

  • Гибкая настройка шрифтов: семейство, начертание и размер. Можно задать минимальный размер шрифта меток, и максимальный – для тегов с большим и меньшим количеством записей.
  • 10 вариантов цветов сделают это облако меток WordPress подходящим для любого дизайна.
  • Ориентирования влево или вправо, благодаря чему можно гармонично поместить облако как в левый, так и в правый сайдбар.
  • Простая и лёгкая анимация при наведении.
  • Возможность установить максимальное количество меток, выводимое в виджете.
  • Возможность выводить рубрики вместо меток, а также другие таксономии на сайте, если они имеются.
  • Отображение количества записей в метке при наведении.
  • Возможность подключения атрибута rel=»nofollow», чтобы метки не индексировались.

На . Метки — это ключевые слова, которые присваиваются Вашим статьям. Эти слова — дополнительная связь между Вашими статьями, потому что с их помощью статьи разбиваются по отдельным темам. По отдельным темам статьи распределяются и с помощью рубрик, но если одной статье присваивается, как правило, одна рубрика, то меток присваивается несколько.

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

Я рекомендую присваивать статье три-четыре метки . Кроме того, общее количество меток на всем блоге не должно быть большим. Вполне достаточно 20−40 меток на весь блог , каким бы обширным он ни был.

Если Вы нажимаете на любую из меток, у Вас появляются статьи, которым эта метка принадлежит. Вы также можете поставить на свой блог WordPress не статичные метки, а облако , состоящее из меток.

Плагин WP-Cumulus или WP-Cirrus

Чтобы поставить подвижное облако меток , нужно поставить соответствующий плагин . Ставите его таким же образом, как и другие плагины, а именно: заходите в административную панель, в Плагины — Добавить новый , пишете в окошке поиска слов Cumulus , и нажимаете кнопку Поиск плагинов .

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

  • WP-Cumulus
  • WP-Cirrus

Выбираете один из них. Можете попробовать оба, посмотреть, какой лучше. Если плагин Вам не подойдет, его всегда можно удалить. Выбираете плагин, затем нажимаете Установить , затем Активировать .

Теперь мы должны плагин поставить в наш сайдбар. Заходите в Виджеты . Слева у Вас появится виджет WP-Cumulus , или WP-Cirrus , в зависимости от того, что Вы выбрали. Справа находите сайдбар, в который хотите поместить данное облако меток , и перетаскивайте виджет в этот сайдбар. После перетаскивания настраивайте его : пишете заголовок, определяетесь с шириной и высотой, меняете цвет слов, фон делаете прозрачный.

Нажимаете Установить , и смотрите, что у Вас получилось.

Видео о том, как поставить плагин для облака меток в WordPress

P.S.: Все течет, все меняется... Если раньше облако меток особо не влияло на выдачу в поисковых системах, то теперь наличие облака меток — дополнительный минус для Вашего блога. Так что ставить этот виджет на блог, или нет — решать Вам. По крайней мере, Вы теперь знаете, как это делать.

Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.

Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:

Все мы знаем, что теги — важная часть таксономий WordPress, и они служат инструментом для их организации. Теги создаются «на лету» в процессе создания записи и помогают нам находить похожие записи, связанные определенными тегами. Обычно в блоге на WordPress различные теги сгруппированы внутри облака тегов, и размер каждого тега определяется частотой его использования в записях. В этой статье мы расскажем вам о том, как правильно использовать функцию wp_tag_cloud() , которая ответственна за все эти облака тегов.

Вступление

Это основная встроенная в ядро функция для вывода тегов, назначенных вашим записям, которая отображает облако тегов.

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

В WordPress Codex страница wp_tag_cloud() отчетливо поясняет все эти параметры функции, но всё же давайте быстро посмотрим на самые основные из них.

  • ‘smallest’ – Этот параметр определяет минимальный размер текста в облаке тегов.
  • ‘largest’ – Этот параметр определяет максимальный размер текста в облаке тегов.
  • ‘number’ – Этот параметр определяет общее количество тегов, отображаемых в облаке тегов. Вы можете указать ‘0’, если хотите, чтобы вводились все
  • ‘format’ – Этот параметр определяет формат отображения облака. Он может принимать значения ‘flat ‘, ‘list ‘, или ‘array
  • ‘separator’ – Этот параметр определяет разделитель тегов в облаке
  • ‘topic_count_text_callback’ – Этот параметр отображает количество записей, назначенных каждому тегу в виде всплывающей подсказки
  • ‘taxonomy’ – Этот параметр определяет тип таксономии WordPress, которая может быть использована в облаке тегов. Значение по-умолчанию — это ‘post_tags ‘, но вы можете использовать и произвольные таксономии

Эти параметры играют ключевую роль в кастомизации облака тегов.

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

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

Параметры разделяются с помощью ‘&’ в одной простой строке.

Указание параметров в формате массива.

"10" ,"largest" => "50", "unit" => "px", "number" => "45", "separator" => ":: ", "orderby" => "count", "order" => "RAND")); ?>

Указываем только выбранные параметры, остальные — оставляем как есть по-умолчанию.

Возвращаем облако тегов в виде массива без отображения его в блоге. Результат можно использовать позже в PHP коде.

Практические примеры

Пример 1: Выводим облако тегов в сайдбаре или футере вашей темы

Создайте функцию в вашем файле functions.php и верните функцию wp_tag_cloud() . После того, как она будет определена, вы можете вызывать эту функцию в любом месте блога.

Function my_cloud($echo = false) { if (function_exists("wp_tag_cloud")) return wp_tag_cloud(); }

Теперь давайте откроем ваш файл sidebar.php и вызовем функцию для вывода облака тегов.

Популярные теги"; my_cloud(); ?>

Давайте добавим немного стилей CSS в наш файл style.css для того, чтобы облако тегов выглядело приличнее.

Mycloud a { background: #FFC414; color: #0000FF; display: inline-block; margin: 0 4px 8px 0; padding: 2px 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-size: 10px; } .mycloud h3 { font-style: italic; font-weight: bold; font-size: 30px; color: #FF00FF; font-family: Comic Sans; }

Вот как оно выглядит теперь:

Также поступаем и в footer.php вашей темы.

Вы можете сделать его еще красивее, если добавите и своих стилей CSS.

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

Wp_tag_cloud(array("taxonomy" => array("post_tag","category")));

Пример 2: Создаем страницу облака тегов для вашего блога

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

Для начала создадим собственный шаблон страницы в папке вашей темы с функцией wp_tag_cloud() . Назовем мы этот файл tagcloud.php.

Теперь нужно зайти в админку WordPress и перейти в Страницы -> Добавить новую . Задайте нужный заголовок странице, а затем в разделе Атрибуты страницы выберите шаблон для нее — Tag Cloud, после чего нажмите Обновить. Вот и все. Ваша страница с облаком тегов готова. Можно «раскрасить» ее с помощью CSS.

Пример 3: Создаем прокручиваемый блок облака тегов для сайдбара

Можно предложить пользователям выбирать теги в сайдбаре из прокручиваемого блока. Для этого нужно создать функцию в файле functions.php .

Function cloudbox () { if (function_exists("wp_tag_cloud")) { $tags = wp_tag_cloud(array("smallest"=>10, "largest"=>10, "orderby"=>"name", "order"=>"ASC", "format" => "array")); foreach($tags as $tag) { echo $tag."
"; } } }

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

Теперь открываем свой sidebar.php и вызываем эту функцию.

Пожалуйста, выберите тег

Давайте оформим его с помощью CSS.

#cloud { background: #FFFFCC; height: 200px; width: 200px; margin: 0 auto; overflow: scroll; border: 4px solid #000000; padding: 2px; text-align: justify; } #cloud a { background: #400000; color: #FFFF00; display: inline-block; margin: 0 4px 8px 0; padding: 2px 10px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-size: 15px; } #text { font-style: italic; font-weight: bold; font-size: 20px; color: #FF9900; font-family: Comic Sans; }

В итоге блок будет выглядеть следующим образом.