Skip to content

Облако тегов со скользящими счетчиками

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

Предпосылки

Недавно Евгений оставил комментарий к статье следующего содержания:

Костя а как у вас на блоге реализован ваш блок с метками? Очень привлекательное решение. Я думаю это не только мне интересно.

Еще когда новый дизайн был только в планах, я нашел один красивый пример на сервисе CodePen:

See the Pen Sliding Tags by Thibaut (@Thibaut) on CodePen.

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

Виджет и инструкция

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

  1. Скачайте виджет и распакуйте единственный файл в корень вашей папки с темой
  2. Подключите виджет к теме. Чтобы сделать это,
    в файл function.php добавьте строку:
require_once('sliding-tags.php');

Теперь вы можете использовать данный виджет у себя на сайте. Перейдите в раздел виджеты и добавьте новый виджет «Webnugget Widget: Sliding Tags Could» в нужный сайдбар.

В настройках виджета присутствует выбор цветовой схемы из трех представленных ранее. А также виджет на английском, т.к. я его писал готовым к переводу на другие языки. Кто разбирается в этом, легко должен его перевести под свою тему. Хотя там всего два поля в настройках и они и так понятны без всякого перевода.