Wordpress плагин облако. Создаю облако тегов WordPress. #1 Базовое использование

Привет всем! С Вами Владимир Савельев и сегодня я расскажу о такой теме как — Облако тегов WordPress и девяти плагинах, которые сделают это красиво и эффективно!

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

Кроме того, представим, что вы пишете о фильмах, кинопремьерах и интересных событиях, связанных с продюсерами, актерами и съемками. Посетителю, заинтересовавшемуся фильмом «Ночь в музее-3», будет интересно узнать и о его предыдущих двух частях и, например, об актере Бене Стиллере.

Как расставить теги в Вордпресс

Во-первых, тег – это ключевое слово , поэтому оно должно быть емким и состоять из одного или двух главных слов. Главное его назначение – попасть в точку, описав важнейшие моменты и суть записи, поэтому они четко привязаны к содержанию поста.

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

Определитесь со стилем оформления и сделайте его единым для всех заголовков и меток. Так вы получите грамотно составленную систему тегов.

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

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

Как лучше отобразить облако тегов

Важным вопросом является и способ отображения тегов.

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

Многие блоггеры выбирают размещение в блоке «метаданные записи». Выбирайте этот способ, если хотите сбить с толку читателей.

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

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

Безусловно, теги не устроят революцию на вашем блоге/сайте, но заметно упростят и улучшат жизнь вам и вашим читателям при их правильном использовании.

Если разместить теги, указывающие разделы блога, то он станет удобным и сподручным алфавитным указателем.

Кроме того, представим, что вы пишете о фильмах, кино премьерах и интересных событиях, связанных с продюсерами, актерами и съемками. Посетителю, заинтересовавшемуся фильмом «Ночь в музее-3», будет интересно узнать и о его предыдущих двух частях и, например, об актере Бене Стиллере.

Если после статьи вставлена метка «Бен Стиллер», «Ночь в музее», то читателю не доставит хлопот найти остальную информацию. А вам поставит отметку «плюс» в посещаемости.

Улучшаем Облако тегов WordPress плагинами

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

Небольшие новости

Кстати только вчера обнаружил, что появилась новая версия библиотеки jquery 2 , она намного меньше весит по сравнению с версией 1.x, так как там вырезали поддержку IE6-7-8. И правильно на фиг они нужны Меньше вес, быстрее загрузка сайта, в общем установил новую версию — все работает как часы...

Задумался серьезно над созданием , интересно послушать где заказывали и по чем... напишите в комментах!

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

Все мы знаем, что теги — важная часть таксономий 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; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В этом посте мы разберем плагин 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";

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то