Список рубрик или меток с выдвигающимся числом записей

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

рубрики1

Как и обещала, я расскажу о том, как можно сделать подобный вывод списка рубрик на вордпресс.

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

Шаг 1. Выводим список рубрик

Сначала при помощи функции get_categories() выведем список рубрик:

Обратите внимание, в исходном HTML-коде список “обернут” в тег <div class="container"<, но если мы оставим такое название класса, то в некоторых темах на WordPress код работать не будет, так как такое название класса уже используется для div-а, в который “обернута” вся страница. Поэтому я переименовала класс в tags-container.

Шаг 2. Добавляем стили

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

В итоге, полученный список рубрик будет выглядеть примерно так:

рубрики

Если вы хотите поменять цвет ярлычка, то код, который мы написали в шаге 2, необходимо немного изменить, и добавить класс “green” или “blue” к тегу UL:

К сожалению, сделать так, чтобы одновременно использовались все три цвета, нельзя.

Как видите, сделать красивый вывод списка рубрик на wordpress совсем не сложно 🙂 Если у вас есть какие-то вопросы или комментарии, пишите!




7 комментариев к “Список рубрик или меток с выдвигающимся числом записей”

  1. Сергей

    Спасибо огромное

    Ответить
  2. Сергей

    Этот код ведь только для рубрик подходит?
    Как вы выводите число записей рядом с меткой (а не рубрикой)?

    Ответить
  3. sk

    как вывести дочерние категории чуть правее (древовидным) образом, а то все идут в кучу

    Ответить
    • Ирина

      Автором этого примера не предусмотрена возможность вывода списка древовидным образом. Вы можете сделать это самостоятельно, при помощи CSS. Извините, я сейчас очень занята и у меня нет времени, чтобы думать над тем, как это сделать.

      Ответить
  4. Ярослав

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

    Ответить
  5. Стас

    У меня проблема. Названия и число записей выводится нормально, но но все ссылки ведут на текущую страницу. Кто небудь знает в чем может быть проблема?

    Ответить

Оставить комментарий