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

Обновлено: 25.04.2024

Плагин позволяет привязывать к вашим страницам метки и рубрики.

Essential Widgets

Essential Widgets is a WordPress plugin for widgets that allows you to create and add…

Tag Pages

Add tags to Pages, just as you would do with Posts

Head Meta Data

Adds a custom set of tags to the section of all posts &…

All Meta Tags

Easily and safely add your custom meta tags to the WordPress website's head section. This…

Flexible Posts Widget

An advanced posts display widget with many options. Display posts in your sidebars any way…

Category Tag Pages

Adds categories and tags functionality for your pages.

Cool Tag Cloud

Простое, но очень красивое облако меток.

Visual Term Description Editor

Replaces the plain-text category and tag description editor with a visual editor.

Ultimate Tag Cloud Widget

This plugin aims to be the most configurable tag cloud widget out there, able to…

Simply Exclude

Note to all used who tried the version 2.0 and 2.0.1 there were was bugs…

Multi-column Tag Map

Multi-column Tag Map will display tags, pages, posts, categories, custom post types, authors and taxonomies…

Configurable Tag Cloud (CTC)

Display a tag cloud customized with your preferences in the sidebar.

WPA SEO Auto Linker

WPA SEO Auto Linker assists in creating cornerstone SEO content. This is not a replacement…

Page Tagger

Page Tagger is a Wordpress plugin which lets you tag your pages just like you…

Permalinks Customizer

Permalinks Customizer helps you to set the different permalink structure for different PostTypes and Taxonomies…

WordPress Tag Cloud Plugin — Tag Groups

The best WordPress plugin to organize your tags and display them in highly customizable tag…

Taxonomy List Widget

Creates a list (bulleted, number, or custom) of non-hierarchical taxonomies as an alternative to the…

SEO Auto Links

With SEO Auto Links you can easily add links (automatically) for keywords and phrases in…

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

Способов реализации есть несколько: специальные модули, функция 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 стилях прописываете что-то вроде:

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

Важно(!) заметить, что функция 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 и модифицируете его следующим образом:

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

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

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

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

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

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

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

Категории: Возможности;
Теги: виджеты, настройки системы, оформление блога, перелинковка блога, сайдбар, сниппеты, теги, функции wordpress.

Добавляем кнопку

И настраиваем внешний вид

Вот что у нас должно получиться

Далее отключаем внешний вид конструктора

И вырезаем наш код

Разбиваем этот код на составляющие. В Экселе

Главное правильно разбить код на части, а то вся верстка поплывет

После всего этого копирую и добавляем в то место откуда вырезали код.

И включаем конструктор

Вот и наши теги.

Сложнее конечно добавлять когда уже много сделано на странице, но тут главное найти свой код в этой массе, поэтому этот блок добавляю в конец страницы

Если подумать, то решение разработчиков CMS вполне логичное — данная фишка естественным образом смотрится только в записях блогов, а в остальных случаях, вроде как, и не требуется. Однако по работе возникают разные ситуации, в том числе и необходимость указывать теги и категории для страниц WordPress. Они могут пригодиться:

при создания каталога статей (разбиения по рубрикам);
как еще один способ навигации;
чтобы скрыть статьи из выбранной категории;
при реализации похожих страниц (выступают в качестве критериев схожести нескольких объектов);
для краткой «характеристики» определенного контента (за счет меток).

Плагины для задания категорий и тегов страницам

В большинстве случаев код вставляется в page.php (или другой подходящий файл).

Post Tags and Categories for Pages

С этим модулем я знаком уже давно. Он обновлялся 10 месяцев назад и пропустил несколько последних знаковых релизов, тем не менее, при тестировании все было отлично. Не удивительно, что Post Tags and Categories for Pages имеет более 30тысяч скачиваний и почти максимальную оценку.

Процесс установки прост — находите плагин по названию среди других и активируете, настроек никаких нет. Сразу после этого в меню админки для раздела страниц появится 2 новых дополнительных пункта. Работать с ними можно точно также, как с записями.

На скриншоте видите, что расширение совместимо и с некоторыми другими, например, с Simple Tags. Также я успешно тестировал вывод тегов страниц в WordPress через the_tags в шаблоне и аналогичную фишку для категорий — the_category.

Единственный возможный минус — в своих «личных записях» нашел пометку о том, что данное решение глючит с исключениями (не могу вспомнить, что это значит): то ли речь идет о параметре exclude в WP функциях, то ли о плагинах похожих постов и Exclude categories … Как выход из ситуации, предлагается добавить метки, а после отключить модуль. Вдруг, информация кому-то пригодится.

Tag Pages

В отличии от предыдущего решения это позволяет работать исключительно с WordPress тегами. Если вам нужна только такая фишка, то есть смысл ставить плагин без поддержки категорий. Из плюсов: однозначно актуальность (обновка около месяца назад) + 20тысяч загрузок и хорошая оценка.

появление специального блока ввода меток в WP при редактировании;
с помощью фильтра pre_get_posts все ваши публикации будут корректно выводиться в архивах, RSS фидах;
совместим с мультисайтовой установкой;
не делает никакие правки в БД, только использует хуки.

Add Category to Pages

У модуля меньше всего загрузок — 10тысяч, но при этом максимальная оценка. Не смотря на название, он позволяет работать не только с категориями страниц WordPress но и тегами. Вы сможете просматривать архивы со списками публикаций по определенной теме. Единственное, что смущает — последний апдейт был 3 года назад. Хотя, по сути, применяемые здесь WP функции, за это время не изменились.

Хаки добавления тегов / категорий в страницы

В сети имеется несколько нужных нам сниппетов, в которых суть плюс-минус одинаковая, поэтому я выберу лишь один найден здесь (самый детальный). Хак следует разместить в файле function.php вручную либо используйте плагин Code Snippets. Весь код состоит из двух частей.

Сначала реализуем отображение блоков меток и категорий для страниц WordPress внутри админки:

Если вам надо активировать какую-то одну сущность — удалите лишнюю строчку, оставив только вариант с post_tag или category.

Вторая часть сниппета:

if ( ! is_admin() ) < add_action( 'pre_get_posts', 'tag_cat_archives' ); >function tag_cat_archives( $wp_query ) < $my_taxonomies_array = array('post','page'); if ( $wp_query->get( 'category_name' ) || $wp_query->get( 'cat' ) ) $wp_query->set( 'post_type', $my_taxonomies_array ); if ( $wp_query->get( 'tag' ) ) $wp_query->set( 'post_type', $my_taxonomies_array ); >

Данный код нужен дабы система WordPress смогла выводить архивные списки рубрик/меток. Вы модифицируете запрос Wp_Query + используете хук pre_get_posts. При этом действия происходят только во фронтенде, т.к. мы указали условие !is_admin().

Еще в одном случае мне встречалась конструкция, где вместо задания сущностей ‘post‘,’page‘ для Wp_Query был параметр ‘any‘ (любые):

if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');

Прием подойдет, когда у вас на сайте имеются и другие форматы объектов, которые хотелось бы выводить в архивах.

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

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

Категории: Возможности;
Теги: категории блога, простые плагины, сниппеты, страницы сайта, теги.

WordPress

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

Плагин — Post Tiles можно установить прямо из админ-панели wordpress. Перейдите по вкладке: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Чтобы настроить плагин, перейдите по вкладке: Настройки — Post Tiles .

— Pick Your Cutom Tile Colors, здесь вы сможете выбрать цвет фона плитки для каждой категории, а так же цвет текста в плитке.

— Tile Trasnparency, здесь можно указать процент прозрачности плиток.

— Set Tile Dimensions, размеры плиток.

— Set Featured Image Dimensions, размеры плиток с изображениями.

— Make Post Tiles Responsive, вы сможете сделать плитки адаптивными под любые устройства, смартфоны, планшеты и т.д. Если вы включите On адаптивный режим, то размер плиток вы не сможете задавать.

— Set Excerpt Length, количество символов из отрывка записи, для отображения в плитке.

— jQuery Category Sorting & Animation, эффект анимации.

— Display the Category Key, если включите данную функцию, то над плитками будут отображаться название категорий, как показано на скриншоте в начале. Нажав на определённую категорию, будут показаны плитки из данной категории.

— Display Pagination For Tiles, можно включить навигацию и указать где она будет отображаться.

— Use Featured Images For Tiles, использовать избранные изображения для плитки.

— Feature Image Animation Type, здесь можно выбрать тип анимации. С данной функцией нужно поэкспериментировать.

— Нажмите на кнопку — Сохранить изменения .

Чтобы добавить плитки на сайт, используйте шорткоды:

1.) Отображаются плитки с записями из всех категорий, по умолчанию 8 записей.

2.) Можно увеличить или уменьшить количество записей-плиток, указав цифру в шорткоде.

3.) Можно указать ID категорий, записи которых будут отображаться в плитках. Так же можно указать и id категорий и количество записей-плиток.

На этом всё, если у вас остались вопросы, то напишите комментарий и я обязательно вам отвечу. До новых встреч !

Читайте также: