Облагораживаем список рубрик на WordPress-блоге
Как мы знаем, WordPress позволяет выводить на блоге список рубрик и в скобках после название рубрики отображать количество записей в ней. Выглядит это примерно так:
- Банки и кредиты (12)
- Бизнес и Финансы (4)
- Инвестиции (137)
- Недвижимость (7)
Я хотел бы рассказать, как преобразить данный список, оставив названия рубрик слева, а цифры, указывающие количество записей в них – справа, чтобы получилось примерно следующее:
- Банки и кредиты (12)
- Бизнес и Финансы (4)
- Инвестиции (137)
- Недвижимость (7)
А реализуется такая вещь очень просто.
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)
Здравствуйте! А можно поинтересоваться, каким образом реализовано на вашем сайте “облако рубрик”? Это какой то плагин, или сами делали?
Это плагин Category Tagging.
Меня больше интересует само оформление списка, можете дать какой нибудь пример ?
А то уродливый список совсем глаз не радует :(
Добрый день!
использую wp_list_cats.. категории выводятся, все красиво, но (!) почему категории – не кликабельны, т.е. не как ссылки ?
вот код:
Интересные рубрики
в результате:
ИНТЕРЕСНЫЕ РУБРИКИ
Блогосфера (3)
Инфографика (1)
Новости (4)
Проекция реальности (3)
А можно сделать так же со стандартным ВП виджетом ?
Не сделать, т.к. код виджета не изменить.
Жаль. Все равно спасибо за ответ! ))
Отлично. мегаполезная статья. Скинул в закладки.
а как посчитать количество постов в родственной рубрике?
то есть, чтоб когда я читаю определенный пост, я еще видел сколько постов в этой рубрике есть?
Уважаемый Дмитрий, статья простая и полезная, попытался применить на своем сайте, все получилось. Однако при попытке использовать свой значек маркированного списка, используя list-style-image происходит следующее: название рубрики выравнивается по левому краю, количество постов в рубрике – по правому, а значек маркированного списка не прижат к левому краю, а находится после ссылки. Вот скриншот http://zalil.ru/31779069
Не подскажете, как исправить данную проблему? заранее благодарен
Рекомендую не использовать
list-style-image, а вместо этого задать фон для тега<li>.Спасибо, все получилось, радуюсь)
Большое спасибо за хак автору!
Вот какой возник вопрос: как убрать дужки в которые заключено количество постов в рубрике?
В пхп полный нуб, простите мне это))
Вот так:
Работает! Спасибо большое! :)
Спасибо за статью
Еще вопрос: у меня всего две категории и если их поставить не списком а в одну линию, можно вывести список записей под ними а не рядом?
Дима здравствуйте, подскажите пожалуйста, уже всю голову сломал, не могу найти хоть убей! Хочу увеличить шрифт текста рубрик, мой сайт wpos.com.ua , имеется ввиду рубрики (новости, обзоры, игры, ос). Как увеличить шрифт? Нашел пункты в style.css: #navcontainer .current-cat a и пункт #navcontainer
В первом случае задаю font-size и шрифт увеличивается только когда рубрика выбрана\нажата, просто #navcontainer не реагирует на fonte-size
Помогите плиз!
Ищите в стилях
#nav { ... }, размер текста указан там.К сожалению параметра #nav там нету! Пробовал вручную вписать – изменений со шрифтом никаких(((
Он находится в файле /wp-content/themes/Sheds/menu/MenuMatic.css. Там для ссылки указан размер 12px.
Получилось! Ура! Спасибо большое! Очень выручили!
Кстати у Вас очень качественный и красивый блог, особенно нравится реализация соц. кнопок и система комментирования! Не поделитесь ими?)
Пожалуйста и спасибо за отзыв =)
Соц. кнопки – http://share42.com/
В комментариях что конкретно интересует?
Спасибо за кнопочки, надеюсь получиться прилепить красиво слева как у вас)
В комментариях интересует оформление (вы как админ выделяетесь, нумирация комментов в углу, да и в целом как-то красиво всё))
Выделение коммента автора
Нумерация комментариев
Ну спасибо большое! Кстати кнопочки поставил, они шикарные, так понял это Ваша разработка – вы молодец! Единственное, у меня нет кнопчоки Google +1 как у вас она самая первая, не подскажете как вбить?
Да и ещё заметил момент, когда захожу на свой сайт со смартфона – кнопочки проталкивают пост и остается целый пустой квадрат до поста!(( Как быть в этом случае?
Всё, уже не слетает, добавил top: 50%
По поводу гугла плюс один, нашел на сайте статью, буду изучать)
Вот только не могу найти как сделать, чтобы при наведении курсора на соц.кнопки пропадала прозрачность, ну как у вас в общем?)
На share42.com в на вкладке “Установка” даются стили, которые делают эту прозрачность.
Всё, разобрался, спасибо вам ещё раз за всё!
Дима, если и это поможете, то я ваш должник навеки))
У меня на wpos.com.ua постоянно слетает под меню страниц (главная, вопрос-ответ, контакты) поле поиск когда я захожу на сайт со своего смартфона (дисплей 4 дюйма, разрешение 800х400)! Вы случайно не в курсе с чем это может быть связанно????
Потому что верстка Вашего сайта не рассчитана под это разрешение.
поправить как-то можно это дело?
Если найдете того, кто исправит, то да.
Понял, спасибо!