Плагин облако тегов в прямоугольниках для вордпресс. Облако тегов на WordPress

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Термин «облако тегов » появился достаточно давно, и изначально теги присутствовали на сайтах, созданных на WordPress. Но через некоторое время облака меток стали самостоятельными элементами и часто появлялись на других ресурсах, независимо от движка.

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

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

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

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

Воспользуйтесь и плагинами, которые можно скачать в сети Интернет. Один из них - WP-Cumulus. После скачивания необходимо залить в корень папку с плагином. Далее активируем его и заходим в меню настроек. После следует вставить код облака меток на сайт. Лучшим местом для его расположения является сайдбар, поэтому нужно выбрать здесь подходящее место и вставить код «WP-CUMULUS». На этом настройка облака тегов закончена, и вы можете наслаждаться его видом. Оно получается достаточно удобным и красивым, так как построено на флеше.

Если у Вас самописный сайт, то можете ознакомиться со статьей "Создание flash-облака тегов на своем сайте ", о которой я писал раньше.

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

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

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

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

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

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

Это удобно читателю и мне хорошо, вот только не стоит злоупотреблять количеством слов и вводить в заблуждение спамностью создаваемых меток. С другой стороны попробуй определи набор слов или коротких фраз, которые будут емко отображать смысл записей. Идеальный вариант в качестве меток использовать 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 :

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

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

а вот этого кода в файл 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, читайте .

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

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