Главная WordPress

Облагораживаем список рубрик на 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. Здравствуйте! А можно поинтересоваться, каким образом реализовано на вашем сайте «облако рубрик»? Это какой то плагин, или сами делали?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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