Быстрая навигация по этой странице:
Теги для сайта на WordPress помогают не только красиво оформить сайт, но и улучшить навигацию. Обычно с помощью облака меток можно группировать посты блога по темам, позволить пользователям найти похожие статьи.
В WordPress существует встроенный виджет облака меток, поэтому для установки стандартных тегов не нужно изобретать велосипед. Следует лишь настроить этот виджет, выбрав расположение самого облака на странице — в правой (левой) колонке или же в подвале. Обычно метки лучше размещать справа в сайдбаре WordPress — теги так более кликабельны, и вы сможете повысить число просмотров страниц на вашем сайте на WordPress.
Однако иногда виджет не подходит. Это может случиться по двум главным причинам:
Самый часто используемый плагин для создания дизайнерского облака называется WP-Cumulus. Он работает по технологии flash. А еще он прост в установке — его необходимо загрузить в плагины вашего сайта, а затем отметить галочками нужные настройки. Виджет работает автоматически и вам не следует внедрять в код сайта скрипт облако тегов.
Для того, чтобы вставить на сайт облако от WP-Cumulus, надо выбрать виджет и перетащить его в сайдбар (в подвал такое облако тегов обычно не вписывается).
Хотите придать интересный вид вашему облаку? Тогда откройте настройки и измените их.
В настройках вы можете:
Последнее отмечается для удобства пользователей. Люди должны успеть нажать на нужный тег, пока «земной шар» крутится. Желательно также выбрать опцию расположения тегов равномерно по сфере, а то теги могут сливаться, наезжая друг на друга.
Иногда вебмастеру не нужно изобретать велосипед, он хочет использовать стандартное облако меток. Надо лишь изменить пару параметров (например, удалить один часто встречающийся тег, который мозолит глаза). Настройки можно найти в файле wp-include/category-template.php, в функции — wp_tag_cloud(). Поэтому если вы мечтаете изменить теги для сайта — html (хотя бы азы этого языка) надо знать.
Параметры, которые можно менять, таковы:
Это два самых распространенных вариантов сделать облако меток. Последнее время многие начинающие вебмастера, которые любят делать все онлайн, ищут как создать облако тегов онлайн.
Действительно, сейчас существует масса сервисов, которые генерируют метки онлайн (TagCrowd, Word It Out и так далее). Однако плагинами или собственным Вордпресс-виджетом пользоваться намного проще. Ведь они уже заточены под эту CMS, и работают на ней отлично, чего не скажешь о разнообразных внешних сервисах.
В этой статье я познакомлю вас с тремя способами вывода облака меток на блоге. Каждый способ вывода имеет свои преимущества. Давайте рассмотрим каждый способ по отдельности.
1-ый способ.
Вывод облака меток кодом php
Преимущество: облако меток можно вывести в любом месте.
Кстати, недавно, меня этот способ здорово выручил на оном из моих сайтов, так как мне нужно было задать свой стиль к заголовку и к самим меткам.
Недостаток: нужно уметь работать с кодами. К сожалению, не все любят или даже не умеют что-то исправлять в файлах.
Вот сам код:
Код вставляете в любом месте в файле вашей темы (шаблона).
Дополнительные параметры :
○ Параметр «smallest» – определяет размер шрифта тега с наименьшей популярностью.
○ Параметр «largest» – определяет размер шрифта тега с наибольшей популярностью.
Комбинируем два параметра «smallest» и «largest» :
○ Параметр «number» – определяет количество показанных тегов на странице
○ Параметр «orderby» – производит сортировку тегов по имени (name) и по популярности (count)
Или
○ Параметр «order» – выводит облако тегов в алфавитном порядке – ASC(А-Я), DESC(Я-А) и RAND (случайный порядок вывода).
○ Параметр «exclude» – поможет исключить из общего списка ненужные метки. ID меток прописываете через запятую.
○ Параметр «include» – поможет указать, какие метки выводить в общий список. ID меток прописываете через запятую.
2-ой способ
Преимущества: это быстро.
Недостатки: есть ограничения в настройках, да и не всегда можно оформить, как хочется.
Итак, зайдите в админ панель => «Внешний вид» => «Виджеты»
. Слева найдите виджет «Облако меток»
. Нажмите на него
и выберите доступное место для вставки виджета.
3-ий способ
. Вывод облака меток через плагин «wp-cumulus» или «Tag Cloud Canvas»
«WP-Cumulus» или «Tag Cloud Canvas» - плагин для создания 3D облака тегов в WordPress и после установки облако меток имеет вот такой вид:
Скачать плагин «WP-Cumulus» и посмотреть, как он настраивается, можете по этому адресу:
https://mywordpress.ru/plugins/wp-cumulus-oblako-tegov/
Скачать плагин «Tag Cloud Canvas»:
https://wordpress.org/plugins/tag-cloud-canvas/
Преимущества: красивый и быстрый вывод облака меток.
Недостатки: не всегда подходит под дизайн блога, а также лишняя нагрузка на блог.
На этом все, друзья! Желаю сделать вам правильный и удачный выбор!
Привет всем! С Вами Владимир Савельев и сегодня я расскажу о такой теме как — Облако тегов WordPress и девяти плагинах, которые сделают это красиво и эффективно!
Облако тегов WordPress - это визуальный блок, представленный в виде списка категорий (меток). Посетитель вашего сайта может кликнуть на заинтересовавшее его словосочетание и перейти в раздел статей, объединенных одним тегом. Благодаря этому пользователю будет намного удобнее осуществлять поиск интересующего его материала на вашем блоге.
Кроме того, представим, что вы пишете о фильмах, кинопремьерах и интересных событиях, связанных с продюсерами, актерами и съемками. Посетителю, заинтересовавшемуся фильмом «Ночь в музее-3», будет интересно узнать и о его предыдущих двух частях и, например, об актере Бене Стиллере.
Во-первых, тег – это ключевое слово , поэтому оно должно быть емким и состоять из одного или двух главных слов. Главное его назначение – попасть в точку, описав важнейшие моменты и суть записи, поэтому они четко привязаны к содержанию поста.
Во-вторых, стоит уделить внимание форме, а не только содержанию. Потому как «Бен Стиллер» и «бен стиллер» — это разные теги. Они имеют разный регистр, поэтому собирают под собой две разных группы записей, разделяя и уменьшая доступ к информации, что наносит только вред.
Определитесь со стилем оформления и сделайте его единым для всех заголовков и меток. Так вы получите грамотно составленную систему тегов.
В-третьих, может возникнуть проблема недобора или перебора меток, ухудшающих навигацию. Если теги WordPress вы использовали крайне редко, то имело смысл их делать. Если же ваш блог переполнен метками, то ценность каждого из них настолько мала, что не стоит всех усилий.
Также ошибкой будет и применение одного тега для всех записей. Разбудите фантазию, включите креативность и придумайте содержательные и яркие теги.
Важным вопросом является и способ отображения тегов.
Одно из первых облаков было линейного вида. Создать такое облако вы без труда сможете при помощи стандартного виджета. Но для того, чтобы оно отобразилось на страницах вашего веб-ресурса, вам нужно присвоить метки к опубликованным постам. Сделать это несложно. Для этого зайдите в админку, перейдите в пункт «Записи» и выберите раздел «Теги».
Многие блоггеры выбирают размещение в блоке «метаданные записи». Выбирайте этот способ, если хотите сбить с толку читателей.
Более удачным и читабельным может стать их отображение в форме облака. Размещаемые теги WordPress компонует в своеобразное облако и отображает его в вашем сайдбаре. Облако устроено по такому принципу, что наиболее часто используемые метки выделяются более крупным шрифтом, а менее популярные среди пользователей имеют шрифт поменьше.
Это выглядит компактно, когда меток не очень много или есть определенные темы, которые среди других должны бросаться в глаза.
Но если в облаке меток чересчур много, то они в совокупности кажутся слишком громоздкими. В этом случае выбирайте золотую середину – создавайте облако тегов, но не помещайте его в сайдбар.
Безусловно, теги не устроят революцию на вашем блоге/сайте, но заметно упростят и улучшат жизнь вам и вашим читателям при их правильном использовании.
Если разместить теги, указывающие разделы блога, то он станет удобным и сподручным алфавитным указателем.
Кроме того, представим, что вы пишете о фильмах, кино премьерах и интересных событиях, связанных с продюсерами, актерами и съемками. Посетителю, заинтересовавшемуся фильмом «Ночь в музее-3», будет интересно узнать и о его предыдущих двух частях и, например, об актере Бене Стиллере.
Если после статьи вставлена метка «Бен Стиллер», «Ночь в музее», то читателю не доставит хлопот найти остальную информацию. А вам поставит отметку «плюс» в посещаемости.
В этом списке я собрал лучшие плагины которые сделают красивое и эффективное отображение тегов и меток на сайте. Установка плагинов производится из админ-панели на странице «добавить новый», копируете название в поиск и устанавливаете... проще не бывает!
Кстати только вчера обнаружил, что появилась новая версия библиотеки jquery 2 , она намного меньше весит по сравнению с версией 1.x, так как там вырезали поддержку IE6-7-8. И правильно на фиг они нужны Меньше вес, быстрее загрузка сайта, в общем установил новую версию — все работает как часы...
Задумался серьезно над созданием , интересно послушать где заказывали и по чем... напишите в комментах!
На днях пришло сообщение от Google, что Ваш сайт не оптимизирован под мобильные устройства и это будет учитываться при ранжировании Вот такая петрушка...
Метки –это ещё один функциональный элемент на движке WordPress, который используется на ряду с рубриками и строкой поиска. Благодаря им можно улучшить поведенческие факторы на своём веб-проекте, позволяя читателю искать похожие публикации по соответствующем словам.
Зачастую, вывод меток уже реализован в теме оформления (в конце каждой записи), но помимо, можно использовать сторонние плагины типа « », которые создают оригинальный формат «облака меток». Либо воспользоваться имеющимся стандартным виджетом из набора WordPress, который легко впишется в любой дизайн шаблона.
Стандартный виджет «Облако меток» находится в админ-панели в разделе «Внешний вид» — «Виджеты», и устанавливается, как и все другие виджеты (путём перетягивания в активный Sidebar или через контекст-меню).
В отличие от сторонних решений, «облако меток» имеет минимальные настройки, предлагая вебмастеру задать имя для заголовка и отметить вывод таксономии (помимо тегов, будут показываться рубрики и пользовательские типы данных).
Сам код виджета, точнее его функция «wp_tag_cloud», находятся в базовых директориях WordPress (wp-includes), поэтому редактирование исходника не рекомендуется. Но мы можем воспользоваться иным способом тонкой настройки виджета.
Для внесения изменений можно создать отдельную функцию с указанием требуемых параметров для стандартного виджета, либо , и через текстовый виджет разместить «облако меток».
Мне больше понравился способ через виджет «Текст», и мой вариант принял код следующего вида:
Теперь более подробно о параметрах функции, которые могут использоваться для вывода меток:
Таким образом редактируя код PHP в текстовом виджете можно добиться требуемого вида для «облака меток». Теперь зная параметры, видим, что приведённый мной пример будет выводить 30 меток с размером шрифта 9pt — 16pt, и сортировать их по алфавиту (по названиям).
В сем привет. Сегодня мы с вами будем красиво оформлять при помощи стилей оформления CSS3 метки (облако тегов). Метки - используются на сайтах для группировки записей по какому-то признаку и предназначены для удобства нахождения информации пользователем на блоге. Для вывода всех меток в WordPress используется виджет: облако меток.
Для отображения облака тегов на сайте достаточно просто перетащить виджет в нужное место сайдбара или (см. скриншот). Но, если вы в процессе написания записей не указывали метки для записи, то это облако тегов будет у вас пустым. Практически все бесплатные cms для создания сайтов, имеют встроенную поддержку меток, их можно создавать при написании записи или после в админ панели сайта, раздел «Записи» - «Метки».
После добавления облака тегов на сайт, они будут иметь не очень красивый вид, а мы с вами попытаемся сделать их более привлекательными:
Ну что, подойдет такое оформление? Тогда приступим.
Для создания такого облака тегов мы с вами будем использовать стилевое оформление на 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 Скопируйте приведенный выше код и вставьте его в самый конец файла. На этом работа с файлом стилей завершена.
Если, открыть Html код страницы, и посмотреть на отображение облака тегов , то можно увидеть, что оно описывается двумя классами:
Первым классом 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; }
Обязательно установите параметр ‘largest’=’smallest’ = 10; - одинаковый размер шрифта для популярных и наименее популярных меток облака тегов . Остальные параметры устанавливайте на ваше усмотрение.
Теперь в файле category-template.php (он находится в папке wp-includes), найдите при помощи сочетания клавиш cntr+F следующие строки:
$a = "$tag_name";
$a = "$tag_name";
