На многих ресурсах выводятся теги непросто для заполнения пустого места или красоты, как это часто бывает, а и для прямого назначения. Материал группируют по определенным словам, что лучше позволяет находить необходимую информацию. Или даже заменяют стандартные рубрики на сортировку по тегам, это относится к большим порталам.
Сегодня мы рассмотрим один способ вывода облака тегов на отдельной странице сайта, и через стандартный виджет, задав каждому тегу разный цвет ссылки или фона. В итоги получим цветное облако тегов, и ко всему этому добавим вывод обычных меток в конце поста.
Мы не будем использовать специальные плагины, хоть в официальном репозитории их очень много по этой теме. К примеру, для , старенький и всем известный модуль. Все действия выполним в ручном режиме, так сказать, своими силами с помощью некоторых функций.
Облако тегов на отдельной странице
Для реализации нам понадобится , убрать лишние функции и добавить свои в нужном месте. Детали, касающиеся шаблона, я пропущу в описание, затрону только основные моменты (со всем остальным можете ознакомиться по ссылке выше).
Продублируйте стандартный файл 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; }
Результат.
Вот и все.
Можно задуматься об реализации на ресурсе дополнительной навигации с помощью создания облака меток или тегов и выведения его на страницах создаваемого ресурса.
Для начала разбираем что это такое?
Метки(теги) — слова или словосочетания, которые характеризуют прикрепленные к ним записи. Они создаются таким же образом, как рубрики. Они выводятся на блоге для дополнительной навигации по блогу или для искусственного увеличения количества страниц на нем. Правда их создание уменьшает уникальность размещенных заметок.
Облако тегов состоит из набора слов, которые размещаются в границах определенной области на блоге, обычно это боковая панель. Пользователь смотрит на эти слова, ищет те слова, которые характеризуют смысл искомой информации, он кликает по слову-анкору ссылки, и открывает страницу анонсов, может быть они его смогут заинтересовать.
Это удобно читателю и мне хорошо, вот только не стоит злоупотреблять количеством слов и вводить в заблуждение спамностью создаваемых меток. С другой стороны попробуй определи набор слов или коротких фраз, которые будут емко отображать смысл записей. Идеальный вариант в качестве меток использовать 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 |
Обратите внимание на комментирование — это текст, который идет после //. В комментариях определено некоторые условия, изменение которых позволяет настроить облако тегов по своему усмотрению.
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 . Надо признать, навигация и структурирование блога на WordPress сильно хромают, порой трудно только с помощью меню найти нужную информацию. На помощь приходят именно метки, которые способны сгруппировать статьи по какому-либо признаку и дать дополнительный способ навигации на блоге.
Фактически, облако тегов — это список всех имеющихся в . Его стараются выполнить красиво, броско, чтобы читатели пользовались им для быстрого нахождения статьи определенной тематики. Часто самые популярные метки выделяют цветом или увеличенным шрифтом, чтобы они сразу бросались в глаза. С точки зрения оформления, я бы выделил два вида облака меток:
- Красивые объемные 3D облака, выполненные в виде прозрачной сферы. Метки расположены как бы на ее поверхности. При наведении на них курсора мыши, сфера начинает вращаться, что выглядит очень эффектно. Думаю, вы часто видите их на различных блогах. Для их реализации используется flash или технология Canvas из HTML5.
- Простые, но в то же время симпатичные плоские 2D облака тегов. Прекрасно подойдут тем, кто не любит навороты.
Замечу, что все рассмотренные в данном посте плагины устанавливаются стандартно: закачиваете архив с wordpress.org, распаковываете в текущий каталог и полученную папку с файлами загружаете на сервер в директорию /wp-content/plugins, используя . Остается только активировать его в разделе «Плагины» в админке WordPress.
WordPress плагины для создания объемного 3D облака тегов
Я просмотрел достаточно много плагинов по этой теме, наиболее удачные из них — WP-Cumulus и Tag Cloud Canvas. По получаемому эффекту они схожи — оба создают объемное сферическое облако тегов, только первый из них использует flash, а второй новую технологию Canvas из HTML5.
WP-Cumulus — flash облако тегов
Скачайте русскую версию WP-Cumulus и установите, как я описал выше.
Облако тегов на страницы блога можно вывести тремя способами:
- Воспользоваться шорт кодом для вывода в область контента страниц и постов WordPress.
- Вставить следующую строчку php кода в шаблоны используемой темы WP:
- И самый популярный способ — вывести облако меток в сайдбаре блога с помощью нового одноименного .
В настройках виджета можно задать его заголовок, размеры, цвет фона и текста, скорость вращения. Кроме этого, имеется возможность выводить не только теги, но и рубрики. Данный вариант подойдет людям, которые как и я не используют метки в WordPress.
Вот так это выглядит:
Конечно, в динамике облако смотрится куда эффектнее.
Tag Cloud Canvas — HTML5 облако тегов
По своему функционалу данный плагин идентичен рассмотренному выше WP-Cumulus, только используется не flash, а HTML5. Скачать Tag Cloud Canvas можно с wordpress.org. Вывод облака тегов в области контента не предусмотрен, доступен только новый одноименный виджет.
Пусть настройки его на английском языке, но их совсем немного и разобраться несложно.
- Title -заголовок.
- Taxonomies — что выводим: теги, категории или и то, и другое.
- Shape — облик облака (какая игра слов!). Можно выбрать сферу, горизонтальный цилиндр или вертикальный.
- Width и Height — ширина и высота в пикселях.
- Text Color — цвет текста.
- Background Color — цвет заднего фона.
- Background Transparent? — сделать задний фон прозрачным.
Внешне мало чем отличается от WP-Cumulus:
Создание 2D облака
Теперь, что касается плоских 2D облаков тегов WordPress. Здесь опять же хочется выделить два весьма симпатичных плагина Opacity Tags и Better Tag Cloud. Рассмотрим каждый из них подробнее.
Скачайте Opacity Tags и установите в WordPress. Появится новый виджет — Opacity Tags Tag Cloud. Рассмотрим его настройки:
- Font Size in Pixels — размер текста в пикселях.
- Number of Tags to Display — количество выводимых тегов.
- Tag Font Color — цвет текста. Если выбрать цвет не получается, то сохраните виджет и попробуйте снова.
Настроек не густо, ну да ладно. Вот так виджет будет выглядеть на блоге.
Скачать плагин со столь нескромным название можно опять же с wordpress.org. Все настройки плагина располагаются в разделе «Плагины» — «Better Tag Cloud». Быстро пробежимся по основным из них:
- Title — заголовок.
- Taxonomy — что выводим. По умолчанию значится post_tag, то есть метки.
- Smallest font size — минимальный размер текста; Largest font size — максимальный размер; Unit — единицы измерения.
- Numbers of tags to show — количество выводимых меток. 0 — отображать все имеющиеся метки.
- Format — формат вывода.
- Orderby — сортировать по названию, числу постов с данным тегом или сразу по обоим параметра.
- Add post count to tags? — отображать число постов, в которых задействован каждый из тегов.
- Put the post count outside of the hyperlink? — Вынести счетчик постов за пределы гиперссылки?
- Show only tags that have been used at least so many times — Показать только теги, которые были использованы по меньшей мере столько раз.
- Add categories to tag cloud? — добавить категории?
- Force tags with multiple words on one line? — обязательно выводить метки из нескольких слов одной строкой?
- Add the nofollow attribute? — добавить к ссылкам атрибут nofollow?
Когда с настройками покончено, можно приступать к выводу на страницы сайта. Доступны три способа.
Хотите расположить свои метки на облаке, вернее, на динамическом облаке, которое всегда в движении и привлекает внимание посетителей сайта? Думаю, что да, потому что сегодня получила несколько писем с вопросом: на блог. А если есть такие, кто еще не знает нужно это ему или нет, или вообще не знают о чем речь, то просто посмотрите на главную страницу моего блога и оцените, как Вам облако меток WordPress.
Давайте перейдем к делу: чтобы установить облако меток WordPress нужно установить и активировать плагин WP Cumulus. При этом обратите ВНИМАНИЕ, что этот плагин нужно обязательно скачать самостоятельно с Интернет! Обязательно русскоязычную версию!! А то, если воспользоваться поиском при на вкладке Добавить плагин, поиск найдет англоязычный вариант этого плагина, который не сможет корректно работать с Вашими русскими тегами.
- ПУА - Плагин - Добавить плагин - Загрузить файл.
- Активировать.
- Настроить плагин.
Что значит настроить плагин? А давайте не будем настраивать и просто посмотрим как выглядит наше облако на странице!
Чтобы добавить облако на страницу, выберите Виджет Облако меток и перетащите его в сайдбар. Готово? Тогда переходите к просмотру главной страницы сайта.
И как? Все нравится?
- Цвет текста, цвет фона устраивает?
- Проверьте работу тегов: нажмите на любой тег и посмотрите результат. Кстати, успели нажать на тег? Скорость вращения устраивает?
- Кстати, обратите внимание, вписалось ли Ваше облако в размеры сайд-бара! У меня при первоначальной установке размеры облака не соответствовали моему сайд-бару.
- Как расположены ваши теги? Не кажется Вам, что они сбились в кучку? Если, да, то обязательно нужно поставить галочку в настройках плагина, чтобы равномерно расположить теги на облаке.
Поэтому, все-таки, давайте вернемся на страницу настройки облака и подправим все, что нас не устраивает.
Для настройки плагина смело нажимайте ЛКМ на названии плагина WP Cumulus на вкладке Настройка. Вносите необходимые Вам изменения, переходите на сайт и любуйтесь изменениями. Только ВНИМАНИЕ, сделав изменения, обязательно проверьте как это выглядит в реалии, и если что возвращайте параметры на место.
Кстати, эти же настройки плагина можно выполнить, если нажмете Облако меток на вкладке Виджеты.
НЕ ЗАБУДЬТЕ! Обращаю Ваше внимание, что нужно обязательно поставить галочку
Располагает теги на равных друг от друга расстояниях вместо случайного расположения
иначе Ваши теги могут сбиваться в кучку и удовольствия и красоты от облака Вы не получите!
Кстати, чуть не забыла предупредить: плагин нужно устанавливать только, если есть хотя бы одна метка!!! Если меток нет, обязательно открывайте статьи и добавляйте метки!!!
Подведем итоги:
- узнали зачем нужен плагин WP Cumulus
- скачали плагин WP Cumulus
- узнали, как установить, активировать, настроить плагин WP Cumulus
- узнали, как установить облако меток WordPress на блог
Я тестировала работу этого облака три месяца и решила, что пока уберу это облако со своего сайта. Протестирую работу блога без облака меток.
На . Метки — это ключевые слова, которые присваиваются Вашим статьям. Эти слова — дополнительная связь между Вашими статьями, потому что с их помощью статьи разбиваются по отдельным темам. По отдельным темам статьи распределяются и с помощью рубрик, но если одной статье присваивается, как правило, одна рубрика, то меток присваивается несколько.
Метки могут быть видны в сайдбаре блога WordPress . меток в WordPress выглядит, как набор отдельных слов. Какие-то слова имеют больший шрифт, какие-то меньший. Если шрифт какого-то слова больше, это значит, что данная метка присвоена большему количеству статей.
Я рекомендую присваивать статье три-четыре метки . Кроме того, общее количество меток на всем блоге не должно быть большим. Вполне достаточно 20−40 меток на весь блог , каким бы обширным он ни был.
Если Вы нажимаете на любую из меток, у Вас появляются статьи, которым эта метка принадлежит. Вы также можете поставить на свой блог WordPress не статичные метки, а облако , состоящее из меток.
Плагин WP-Cumulus или WP-Cirrus
Чтобы поставить подвижное
облако меток
, нужно поставить соответствующий плагин
. Ставите его таким же образом, как и другие плагины, а именно: заходите в административную панель, в Плагины — Добавить новый
, пишете в окошке поиска слов Cumulus
, и нажимаете кнопку Поиск плагинов
.
Появляется выдача плагинов, и на первом месте Вы увидите следующие плагины:
- WP-Cumulus
- WP-Cirrus
Выбираете один из них. Можете попробовать оба, посмотреть, какой лучше. Если плагин Вам не подойдет, его всегда можно удалить. Выбираете плагин, затем нажимаете Установить , затем Активировать .
Теперь мы должны плагин поставить в наш сайдбар. Заходите в Виджеты
. Слева у Вас появится виджет WP-Cumulus
, или WP-Cirrus
, в зависимости от того, что Вы выбрали. Справа находите сайдбар, в который хотите поместить данное облако меток
, и перетаскивайте виджет в этот сайдбар. После перетаскивания настраивайте его
: пишете заголовок, определяетесь с шириной и высотой, меняете цвет слов, фон делаете прозрачный.
Нажимаете Установить , и смотрите, что у Вас получилось.
Видео о том, как поставить плагин для облака меток в WordPress
P.S.: Все течет, все меняется... Если раньше облако меток особо не влияло на выдачу в поисковых системах, то теперь наличие облака меток — дополнительный минус для Вашего блога. Так что ставить этот виджет на блог, или нет — решать Вам. По крайней мере, Вы теперь знаете, как это делать.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях.
Это не займет много времени. Просто нажмите на ссылку ниже:
