Облагораживаем список рубрик на WordPress-блоге

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

Я хотел бы рассказать, как преобразить данный список, оставив названия рубрик слева, а цифры, указывающие количество записей в них — справа, чтобы получилось примерно следующее:

А реализуется такая вещь очень просто.

HTML + PHP

Сначала обозначим код, который выводит список рубрик WordPress-блога со счетчиком записей:

<ul id="categories">
 <?php wp_list_categories('show_count=1&title_li='); ?>
</ul>

CSS

Теперь нужно написать для этого списка всего пару строк CSS-кода:

#categories {
	text-align: right;
	/* выравниванием содержимое списка
	 по правому краю */
}
#categories a {
	float: left;
	/* сделав ссылки (названия рубрик) плавающими,
	 прижимаем их влево */
}

Вот и все.

Единственное, что стоит добавить — если длина названия рубрики будет больше отведенного ей пространства до скобок, то список будет смотреться не красиво.

* * *

В интернет-магазине Keremet.ru доступны по низким ценам качественные сухие смеси для строительства и ремонта от ведущих производителей продукции. Осуществляется доставка заказанных товаров по Москве.

Комментарии (75)
  1. 1
    @

    Здравствуйте! А можно поинтересоваться, каким образом реализовано на вашем сайте «облако рубрик»? Это какой то плагин, или сами делали?

  2. 3
    @

    Меня больше интересует само оформление списка, можете дать какой нибудь пример ?
    А то уродливый список совсем глаз не радует :(

  3. 4
    Nikolay
    @

    Добрый день!
    использую wp_list_cats.. категории выводятся, все красиво, но (!) почему категории — не кликабельны, т.е. не как ссылки ?
    вот код:

    Интересные рубрики

    в результате:

    ИНТЕРЕСНЫЕ РУБРИКИ
    Блогосфера (3)
    Инфографика (1)
    Новости (4)
    Проекция реальности (3)

  4. 5
    Wordpress.realms.biz

    А можно сделать так же со стандартным ВП виджетом ?

  5. 8
    Виктор

    Отлично. мегаполезная статья. Скинул в закладки.

  6. 9
    alex
    @

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

  7. 10
    vigo

    Уважаемый Дмитрий, статья простая и полезная, попытался применить на своем сайте, все получилось. Однако при попытке использовать свой значек маркированного списка, используя list-style-image происходит следующее: название рубрики выравнивается по левому краю, количество постов в рубрике — по правому, а значек маркированного списка не прижат к левому краю, а находится после ссылки. Вот скриншот http://zalil.ru/31779069
    Не подскажете, как исправить данную проблему? заранее благодарен

  8. 13
    Rico
    @

    Большое спасибо за хак автору!
    Вот какой возник вопрос: как убрать дужки в которые заключено количество постов в рубрике?
    В пхп полный нуб, простите мне это))

  9. 15
    Rico
    @

    Работает! Спасибо большое! :)

  10. 16
    Артур

    Спасибо за статью
    Еще вопрос: у меня всего две категории и если их поставить не списком а в одну линию, можно вывести список записей под ними а не рядом?

  11. 17

    Дима здравствуйте, подскажите пожалуйста, уже всю голову сломал, не могу найти хоть убей! Хочу увеличить шрифт текста рубрик, мой сайт wpos.com.ua , имеется ввиду рубрики (новости, обзоры, игры, ос). Как увеличить шрифт? Нашел пункты в style.css: #navcontainer .current-cat a и пункт #navcontainer
    В первом случае задаю font-size и шрифт увеличивается только когда рубрика выбрана\нажата, просто #navcontainer не реагирует на fonte-size
    Помогите плиз!

  12. 23

    Спасибо за кнопочки, надеюсь получиться прилепить красиво слева как у вас)
    В комментариях интересует оформление (вы как админ выделяетесь, нумирация комментов в углу, да и в целом как-то красиво всё))

  13. 25

    Ну спасибо большое! Кстати кнопочки поставил, они шикарные, так понял это Ваша разработка — вы молодец! Единственное, у меня нет кнопчоки Google +1 как у вас она самая первая, не подскажете как вбить?

  14. 30

    Дима, если и это поможете, то я ваш должник навеки))
    У меня на wpos.com.ua постоянно слетает под меню страниц (главная, вопрос-ответ, контакты) поле поиск когда я захожу на сайт со своего смартфона (дисплей 4 дюйма, разрешение 800х400)! Вы случайно не в курсе с чем это может быть связанно????