Lidtracker.ru

Лид Трэкер
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Сделать красивое облако тегов на сайте

Сделать красивое облако тегов на сайте.

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

Облако тегов может быть реализовано в виде: трёхмерного Flash-ролика или последовательности слов (гиперссылок) различного размера. В этой статье будет рассмотрено, как сделать облако тегов на простом html сайте и как сделать красивое flash облако тегов.

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

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

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

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

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

Создать красивое облако тегов можно как вручную, так и прибегнув к помощи специальных генераторов — программ, создающих облака на любой вкус и запрос. Реализовать облако меток можно с помощью flash-технологий или в виде гиперссылки html. Также существуют специальные плагины для установки облака меток на сайт или блог, в разных CMS — различные. Вы всегда можете задать необходимое именно вам количество отображаемых меток, а также поэкспериментировать с размером и цветом шрифта и оформлением облака.

Создание 3D облака тегов для сайта с использованием flash.

В этой статье рассмотрено создание очень красивого 3D облака тегов, на примере сайта управляемого CMS Ucoz, с использованием flash. В сети достаточно много материалов, посвященных этой теме, но все они, обычно, несколько сложны для новичков. Здесь все написано подробно и простым языком, у начинающих никаких проблем не возникнет.

1. В корневом каталоге сайта создаем при помощи файлового менеджера папку с названием tagcloud. Можно назвать и по-другому, но в скриптах прописаны адреса именно до этой папки и, чтобы не изменять файлы назовем папку именно так.

2. Закачиваем в эту папку файлы swfobject.js и tagcloud.swf (для того, чтобы получить эти файлы кликните по соответствующей ссылке правой кнопкой мыши и в появившемся меню выберите пункт “Сохранить”).

3. В нужное место страницы сайта, там, где Вы хотите разместить облако тегов, вставьте HTML код.
<table style=”border-collapse: collapse;” height=”158″ width=”158″><tbody><tr><td style=”border: 0px solid rgb(0, 0, 0);”>
<script type=”text/javascript” src=”http://ваш сайт.ru/tagcloud/swfobject.js”></script>
<div style=”text-align:center;font-size:12pt;”>
Для отображения блока требуется <noindex><a href=”http://get.adobe.com/flashplayer” rel=”nofollow” target=”_blank” title=”Скачать Flash Player бесплатно”>Flash Player</a></noindex><br><br>$MYINF_0$
</div>
<script type=”text/javascript”>
var rnumber = Math.floor(Math.random()*9999999);
var so = new SWFObject(“http://ваш сайт.ru/tagcloud/tagcloud.swf?r=”+rnumber, “tagcloudflash”, “560”, “400”, “9”);
var tags = new String(‘$MYINF_990$’);
tags = tags.replace(/”/g,”‘”);
tags = tags.replace(/<noindex>/gi,””);
tags = tags.replace(/</noindex>/gi,””);
tags = “<tags>” + tags + “</tags>”;
so.addParam(“wmode”, “transparent”);
so.addParam(“allowScriptAccess”, “always”);
so.addVariable(“minFontSize”, “1.1”);
so.addVariable(“maxFontSize”, “3”);
so.addVariable(“tcolor”, “0xCC0033”);
so.addVariable(“tcolor2”, “0xCC0033”);
so.addVariable(“hicolor”, “0xCC0033”);
so.addVariable(“tspeed”, “100”);
so.addVariable(“distr”, “true”);
so.addVariable(“mode”, “tags”);
so.addVariable(“tagcloud”, tags);
so.write(“3dcloud_block”);
</script>
</td></tr></tbody></table>
4. Измените в этом коде в двух местах выделенный жирным текст “ваш сайт.ru“, заменив его на домен вашего сайта.

5. В этом коде можно так же изменить следующие опции:
“560” – ширина облака тегов, в пикселях,
“400” – высота облака тегов, в пикселях,
“minFontSize”, “1.1” – размер самого маленького шрифта в облаке, задается в пунктах,
“maxFontSize”, “3” – размер самого крупного шрифта в облаке, задается в пунктах,
“tcolor”, “0xCC0033” – цвет самого частого текста в облаке тегов в RGB формате, частота текста определяется по свойству ссылки style, 0x не меняем,
“tcolor2”, “0xCC0033” – цвет самого редкого текста в облаке тегов в RGB формате, частота текста определяется по свойству ссылки style, 0x не меняем,
“hicolor”, “0xCC0033” – цвет текста при наведении на него курсора. 0x не меняем,
“tspeed”, “100” – скорость вращения облака,
“distr”, “true” – тип вращения 3D облака, принимает значение “true” или “false”.

Создание облака тегов на html сайте.

Для размещения облака тегов на обычном html сайте необходимо выполнить всего один шаг.

Код, который Вы видите внизу, вставить между тегами <body> и </body> в то место, где будет располагаться ваше “облако тегов”.

Сервисы, позволяющие создать облако тегов

В данном материале мы приведем сервисы, которые позволяют создать облако тегов. Частота слов в тексте, наиболее важные термины, популярность упоминаний в статье – все это важные данные. Следить за ними позволяет облако слов. Для его организации могут использоваться приложения онлайн-сервисы.

Word It Out

создать облако тегов

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

Tagxedo

облако слов

Этот сервис также позволяет создать облако тегов без регистрации. В настройках пользователь может изменить цветовую схему, пространственную ориентацию и параметры текста. Создать облако слов можно различной формы, выбрав подходящий вариант из имеющейся библиотеки. Текст для анализа можно загрузить на сайт либо указать ссылку на него. Кириллица в данном сервисе отображается корректно. После создания готового объекта, его можно загрузить на свой компьютер в виде изображения в формате png или jpg. При этом можно указать параметры качества.

Читать еще:  Нужно сократить ссылку - ТОП лучших сервисов

Через социальные сети

генератор облака тегов

Если вас интересует программа для создания облака тегов, обратите внимание на сервис Tagul. Он позволяет сформировать необходимый объект непосредственно в окне браузера. Особенность его заключается в том, что регистрация в данном случае происходит посредством одного из аккаунтов, в предложенных социальных сетях. Текст добавляется вручную либо путем указания ссылки на него. Настройки дают возможность изменить различные параметры облака. Также в данном сервисе реализована библиотека форм, которая позволяет создать уникальный объект. Для верного отображения кириллицы потребуется выбрать, один из выделенных синим цветом, шрифт. Когда облако будет создано, его можно скачать на компьютер. Готовый файл получит формат png. Также поделиться созданным объектом легко, скопировав ссылку на него. Если навести курсор на определенное слово, он увеличится. Полная версия сервиса позволяет также скачать объект в векторном формате svg.

Другие сервисы

программа для создания облака тегов

Создать облако тегов поможет сервис Word Cloud. В нем можно установить угол расположения слов. Кроме того, функции сервиса включают смену шрифта, указание количества слов в объекте. Результат можно сохранить в формате svg или png. У этого сервиса есть и свой минус, слова на кириллице отображаются не вполне корректно. Способ загрузки стандартен: можно указать ссылку или ввести текст.

Сервис Wordcloud pro также позволяет создать облако тегов. Также с его помощью можно сделать постер, рекламный баннер или открытку. Для использования предложенных возможностей, достаточно выполнить определенную последовательность действий.

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

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

Для начала работы, на главной странице ресурса кликаем Create now. Перед нами открывается окно редактора. Окно Words создано для обработки слов. Чтобы добавить новый элемент, используем функцию Add. Слово в данном случае, предстоит ввести вручную. Чтобы удалить лишний элемент, применяем функцию Remove.

3 бесплатных онлайн-сервиса для создания “Облака тегов” 2017 года

Мы сейчас проводим опрос IT-компаний про то, какие информационные системы у них используются (если интересно, то опрос можно пройти тут: https://ru.surveymonkey.com/r/23528V5 ). В результате опроса накапливается простая статистика — название системы и сколько раз за нее проголосовали.

blank

Конечно такой результат можно показать в виде диаграммы, например так:
Но если нет цели показывать точные числовые значения, а нужно просто визуально сравнить за какие системы дали больше голосов, то можно использовать Word Cloud или, как у нас называют, “Облако тегов”.

Какая польза от такого представления? А такая:

  1. Это очень наглядно — величина текста соответствует частоте голосов. Чем чаще проголосовали за систему, тем большими буквами написано ее название.
  2. Это можно сделать красиво — полная свобода творчества. Можно подобрать цвета, шрифты, наклон текста и даже разместить названия систем в пределах заданного контура-фигуры.
  3. Такое облако может вполне заменить иллюстрацию к статье, если сложно подобрать нужную картинку.

Я просмотрел какие сейчас существуют инструменты для бесплатного создания Word Cloud и расскажу о тех, что попробовал. Не претендую на полноту обзора и если, как говорят в Одессе “имеете что сказать” — смело пишите в комментарии.

Как я буду их сравнивать?
Посчитаем количество параметров, которые сможет изменить дизайнер — назовем это число “степенью свободы дизайнера”.

Проверим, поддерживаются ли такие возможности:

  1. “свой шрифт” — возможность использования своих шрифтов;
  2. “кириллица” — поддержка кириллического алфавита;
  3. “фразы” — можно ли работать с фразами — с несколькими словами разделенными пробелом;
  4. “фигуры” — можно ли вместить слова в заданную фигуру;
  5. “статистика” — размер слова пропорционален их частоте в исходном тексте.
Word Cloud Generator

1. Word Art

Имеет интерфейс со множеством кнопок, но и функций достаточно много — дизайнеры будут счастливы.
Можно добавить слова вручную, и можно выполнить импорт из буфера обмена. Вставлять можно не только скопированный текст, но и скопированные ячейки из 1. Word ArtExcel — сервис распознает отдельные слова и заполнит таблицу исходных слов.
При импорте фразы разбивает на отдельные слова, но вручную фразы можно ввести.
По работе со словами — 4 степени свободы дизайнера — цвет, шрифт, наклон, прописные/строчные буквы.
Кириллица поддерживается — можно загружать свои кириллические шрифты. Загрузка своего шрифта — тоже очень полезная дизайнерская функция.
По фигурам есть огромная библиотека которая содержит как силуэты, так и цветные векторные рисунки. Более того можно загрузить свой векторный рисунок, например, выбрать из https://www.flaticon.com ( JPEG или PNG ). Если рисунок будет цветным — WordArt автоматически подберет словам цвета так, чтобы они повторили рисунок.
Я взял вот такой рисунок в качестве фигуры blank ( https://www.flaticon.com/free-icon/light-bulb_167745 ), и вот что получилось:
blank Результат получается замечательный, только одно плохо — размер букв абсолютно не зависит от их частоты в загруженном тексте. Т.е. для иллюстраций — WordArt идеален, но показать вес слов — это не его.
Бесплатно результат можно скачать только в форматах PNG и JPEG.

2. Word Cloud Generator

Все аскетично, сделано программистом и без рюшечек. Просто поле для вставки текста и пару параметров для настройки результата.
Из того, что можно изменить дизайнеру — я нашел только шрифт и наклон. Цвет словам подбирается автоматически. И наклон тоже, но тут можно задать варианты углов. По степеням свободы — оценка 2.
Шрифт можно указать только из тех, что есть у вас в системе. Для этого нужно вписать его название в соответствующее поле. Загрузить свой — возможности нет.
Слова не повторяются и их размер зависит от частоты слова в тексте.
Фразы разбивает на отдельные слова.
Фигуры не поддерживает.
Результат можно скачать в векторном формате SVG.

blank

3. WordItOut
blank

blank

Выглядит проще, чем WordArt. Текст со словами надо вставить в поле и автоматически генерируется облако. Можно изменять правила по которым создается облако.
Так можно изменить цвет слов, их шрифт, прописные/строчные буквы (3 степени свободы дизайнера). Наклон изменить нельзя, все слова будут расположены горизонтально.
Шрифты можно выбрать только из тех, что предложены и часть из них не поддерживает кириллицу.
Можно выбрать правило, по которому будет устанавливаться размер слов. Но, если честно, я не увидел явной зависимости размера от частоты повтора слов в тексте, как мне требовалось.

На этом все. Я остановил свой выбор на первых двух сервисах.

Читать еще:  Как отметить человека на фотографии в Вконтакте

Выводим облако меток в WordPress через виджет и функцию wp_tag_cloud (+полезные хаки)

Вывод облака меток

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

Способов реализации есть несколько: специальные модули, функция wp_tag_cloud и встроенный виджет. Когда-то я уже рассказывал о плагине Simple Tags, а сегодня рассмотрим использование базовых возможностей:

    (+ хак с его модификацией). . (в зависимости от популярности). .

В принципе, несколько лет назад на момент написания прошлой статьи Simple Tags был отличным вариантом со множеством дополнительных опций, но сейчас он не так актуален. Для вывода похожих постов я ставлю Yet Another Related Posts Plugin и некоторые другие модули, а блок TagCloud делаю стандартными методами.

Виджет облака тегов

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

Виджет Облака меток

Из настроек: заголовок, отображение количества элементов и выбор таксономии. Последнее позволят выводить не только теги (метки), но и категории с другими пользовательскими типами данных. Сохраняем и проверяем результат.

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

add_filter(‘widget_tag_cloud_args’,’set_tag_cloud_args’); function set_tag_cloud_args( $args )

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

Параметры функции wp_tag_cloud

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

Чтобы понять какой результат получится в ходе выполнения данной строки, привожу список всех параметров wp_tag_cloud (величина по умолчанию — указана в скобках):

  • smallest (8) — минимальный размер шрифта для наименее используемых тегов;
  • largest (22) — максимальная величина шрифта у популярных меток;
  • unit (pt) — определение единицы измерения размера шрифта: pt, px, em, % (я обычно ставлю в пикселях px);
  • number (45) — отображаемое количество элементов/тегов;
  • format (flat) — формат вывода ссылок: flat — разделенные пробелом, list — список UL, array — как PHP массив;
  • separator (пробел, «n») — символ-разделитель между линками;
  • orderby (name) — сортировка: name — по названию, count — по популярности;
  • order (ASC) — порядок сортировки: возрастающая — ASC, по спадающей — DESC, случайным образом — RAND;
  • exclude — исключенные метки из блока TagCloud;
  • include — теги для включения в облако (показываются только они);
  • topic_count_text_callback — функция выводит текст с количеством элементов у меток;
  • link (view) — линки ведут на страницу просмотра (view) либо на редактирование (edit);
  • taxonomy (post_tag) — задает какие таксономии там будут: post_tag, category, link_category или другие.
  • show_count (false) — показывать ли число объектов;
  • echo (true) — выводить результат на сайте или нет.

Сохраняем и проверяем, что в итоге вышло. Как правило, я также делаю выравнивание содержимого посредине. Добавляйте в файл стилей style.css код:

Разный цвет ссылок в облаке тегов

Если для отображения блока меток вы используете функцию wp_tag_cloud либо встроенный WP виджет, то все линки будут иметь одинаковый цвет. Модуль Simple Tags обладал классной фишкой с выбором оттенков самых популярных и непопулярных WordPress меток в облаке. Таким образом, градация элементов визуализировалась не только за счет размера шрифта, но и цвета (более светлого/темного). Без дополнительных хаков тут не обойтись.

В сети есть несколько вариантов решения задачи, но не все они оказались рабочими. В итоге у меня получилось скомпоновать следующий хак для functions.php:

В ходе срабатывания фильтра все вхождения в готовом сгенерированном HTML коде облака, где производится задание размера ссылки (style=»font-size: …») заменяются на определенный Причем он «выцепляет» только целую часть значений, поэтому в CSS стилях прописываете что-то вроде:

#sidebars li .st-tag-cloud a#tag-cloud-size-11 < color: #4dbde7; font-size: 11px; >#sidebars li .st-tag-cloud a#tag-cloud-size-12 < color: #3da9d7; font-size: 12px; >#sidebars li .st-tag-cloud a#tag-cloud-size-13 < color: #2e96c7; font-size: 13px; >#sidebars li .st-tag-cloud a#tag-cloud-size-14 < color: #1e83b8; font-size: 14px; >#sidebars li .st-tag-cloud a#tag-cloud-size-15 < color: #1a7caf; font-size: 15px; >#sidebars li .st-tag-cloud a#tag-cloud-size-16

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

Облако тегов

Важно(!) заметить, что функция wp_tag_cloud определяет динамические размеры шрифта, то есть часть ссылок будет иметь не целые показатели font-size. Поэтому, к сожалению, сделать «плавные переходы» между оттенками цветов линков как в Simple Tags не получится. Теоретически, можно к 6-ти целым значениям из примера выше дополнительно добавить более детализированные: 11.5px, 12.5px, 13.5px и т.п., но для этого пришлось бы усложнить метод преобразования стилей в классы (одним preg_replace там не обойтись).

Второй вариант, который был найден в сети и отмечен в stackexchange как рабочий, находится тут. Код вставки в functions.php следующий:

Список всех меток на сайте

Когда вы располагаете данный блок где-то в сайдбаре, то вполне логично выводить там лишь часть самых популярных тегов (20, 30, 40 и т.п.) дабы лишний раз не отвлекать. Тем не менее, никто не мешает вам добавить специальную страницу, где бы отображался полностью весь их список.

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

1. Для начала определитесь где будете выводить облако тегов: отдельная запись или какая-то из уже существующих. В первом случае ее потребуется создать.

2. Далее нужно добавить отдельный шаблон страницы в WordPress — об этом уже рассказывал. Если вкратце: копируете по FTP файл макета page.php и модифицируете его следующим образом:

Новый шаблон страницы

Здесь, во-первых, в самом верху есть блок с названием нового макета:

<?php /* * Template Name: All Tags Page * Template Post Type: page */ ?>

А во-вторых, после отображение контента (the_content) вызываем функцию wp_tag_cloud.

Сохраняйте этот файл под именем page-alltags.php или как-то так и загрузите его обратно на FTP. Чтобы добавить вывод облака меток после 404 ошибки или на странице «О проекте», редактируете соответствующие файлы макетов.

3. Для «активации» шаблона в WP админке устанавливаете его для той или иной странички. В итоге у вас получится что-то вроде:

Страница с облаком тегов

Дополнительно в текстовом редакторе можете добавить какой-то текст описание.

4. Четвертый шаг необязательный, но улучающий сайт. Под виджетом облака в сайдабре создаете новый элемент HTML, куда вставляете код ссылки, ведущей на страницу с полным списком меток. Кстати, не забудьте на ней скрыть данный виджет — делается это через плагин Widget Logic с условием !is_page(…) — если не понятно как именно, читайте обзор модуля.

Читать еще:  Airalo - интернет пакеты с eSIM, которые дешeвле роуминга!

Итого. Выводить облако меток в WordPress можете любым из этих способов. С виджетом получается максимально просто и наглядно. После его создания в functions.php задаете нужные параметры внешнего вида. Если же собираетесь реализовывать все в файле шаблонов, то просто используйте wp_tag_cloud. Надеюсь хак с разными цветами ссылок также пригодится. Первый я внедрял на своем сайте, и все ок, но увы гарантировать тот же результат и для проекта вашего не могу.

P.S. Постовой. Порталы городов по типу map.vn.ua помогают узнать информацию если вам нужна служба такси Винница или например интересны последние новости-события жизни города.

Понравился пост? Подпишись на обновления блога по RSS wordpress insideRSS, RSS wordpress insideEmail или twitter wordpress insidetwitter!
рейтингОцените статью:

Создаю облако тегов WordPress

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

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

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

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

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

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

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

Затем в код файла sidebar.php вписал специальный код, так как решил, что именно в боковой панели блога будет отображаться такое облако тегов:

Вот на месте, где установлен этот код появляется такое облако тегов:

вывод облака меток на блог

Этот плагин имеет массу настроек, панель можно вызвать, нажав на ссылку WP Comulus, которая находиться в виджете “Параметры”.

allseoplugins555

Настройка плагина не вызывает трудностей, так как все здесь прописано по-русски. Нужно только подобрать его размер: ширина и высока(1), в соответствии с параметрами боковой панели блога установленного шаблона. Далее определить цвет меток-анкоров(2) и цвет самого фона облака меток(3), чтобы человеку было ими удобно пользоваться: анкоры не сливались с фоном, были читаемы.

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

Еще ниже размещена опция, которая позволяет выводить в облаке меток ссылки, созданные только из меток и рубрик, или собрать их вместе в одном облаке тегов(5). Далее идут несколько необязательных опций, на которые можно не обращать внимания при настройке плагина WP-Cumulus.

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

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

Вывод облака тегов с помощью виджетов по умолчанию.

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

oblteg1

Просто захожу в панель управления виджетами(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, читайте seomans.ru.

Приветствую Вас, на блоге seomans.ru

Зарегистрируйтесь, чтобы получать рекомендации по созданию блогов и сайтов от seomans.ru

Приветствую Вас на seomans. ru, уважаемый читатель. Предлагаю подписаться на RSS ленту моего блога, Вы также можете следить за развитием моего проекта, читая мой Twitter

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector