Облагораживаем список рубрик на WordPress-блоге
Как мы знаем, WordPress позволяет выводить на блоге список рубрик и в скобках после название рубрики отображать количество записей в ней. Выглядит это примерно так:
- Банки и кредиты (12)
- Бизнес и Финансы (4)
- Инвестиции (137)
- Недвижимость (7)
Я хотел бы рассказать, как преобразить данный список, оставив названия рубрик слева, а цифры, указывающие количество записей в них - справа, чтобы получилось примерно следующее:
- Банки и кредиты (12)
- Бизнес и Финансы (4)
- Инвестиции (137)
- Недвижимость (7)
А реализуется такая вещь очень просто.
HTML + PHP
Сначала обозначим код, который выводит список рубрик WordPress-блога со счетчиком записей:
1 2 3 | <ul id="categories"> <?php wp_list_categories('show_count=1&title_li='); ?> </ul> |
CSS
Теперь нужно написать для этого списка всего пару строк CSS-кода:
1 2 3 4 5 6 7 8 9 10 | #categories { text-align: right; /* выравниванием содержимое списка по правому краю */ } #categories a { float: left; /* сделав ссылки (названия рубрик) плавающими, прижимаем их влево */ } |
Вот и все.
Единственное, что стоит добавить - если длина названия рубрики будет больше отведенного ей пространства до скобок, то список будет смотреться не красиво.
* * *
В интернет-магазине Keremet.ru доступны по низким ценам качественные сухие смеси для строительства и ремонта от ведущих производителей продукции. Осуществляется доставка заказанных товаров по Москве.
Давно искал решение, оказалось все довольно просто.
Спасибо, отпишу на блоге, хорошие решения достойны
ссылки.
Тоже в свое время лопатил литературу в поисках этого, а оказалось все просто и красиво :)
Попробую сделать подобное на облаке рубрик wp_cat_cloud
может не в тему но, хотела бы спросить, а как прилинковать записи которые обозначены кактегогиями, которые в некоторыхтемах выходят в правом боку, а вот закладки которые я добавилас в HTML наверху к ним не цепляются.
Словом,я новичек, и может что то неправильно написала, http://www.maratakhmedjanov.com/
вот живой тому пример, мне надо разобраться как прилинковать категории, к закладке
REFERENCES/
заранее большой Рахмат ака Dimox
xela, сложно вас понять. Вы хотите вывести список рубрик только на странице “REFERENCES”?
извините, наверное я что то не правильно написала.
по порядку:
1. в этой теме PRESSROW, как ни странно, рубрики которые заводятся в админ панели, не линкуются, с рубриками которые я завела сама в ручную на главной странице как закладки) я их добавила сама в template -header.php.
вот, я сама никак не пойму как их теперь привязать друг к другу, чтоб нажав на закладку например REFERENCES ( которая уже заполнена) выводилась рубрика, которая относится к ней, которая в этой теме выводится в правом углу, с колличеством (цыфрами о которых тут вы пишите) записей.
мне сложно обьяснить я в этом деле чайник, но я быстро всему учусь.
Спасибо.
xela, в статье указан код, которым выводится список рубрик.
У меня получилось, только вот названия категории большие, и поеэтому отображает в 2 ряда.
Кстати, по поводу вашего примера: есть некоторое “но”.
#categories
{
text-align: right;
}
#categories a
{
float: left;
}
когда делаем как выше написано, то в некоторых темах титулка рубрики сдвигается тоже вправо вместе с цифрами. Пришлось сделать так:
#categories ul li,
#categories-1 ul li,
#categories-2 ul li,
#categories-3 ul li,
#categories-4 ul li,
#categories-5 ul li,
#categories-6 ul li,
#categories-7 ul li,
#categories-8 ul li,
#categories-9 ul li {
background: url(images/mini-category.gif) no-repeat;
text-align: right; #добавил эту строчку и все стало на свои места.
}
это я так, для начинающих, если кто столкнется (сам тоже пару дней назад поставил вордпресс :) )
а за статью спасибо.
Добрый всем день, эта статья почти то, что мне нужно. Тока нельзя ли описать процесс оформления списка категорий по точнее, например как поменять не css параметры а html код одного пункта. Вот как оно есть изначально http://pikucha.ru/60391/rub.jpg и как хотелось бы в итоге http://pikucha.ru/60392/rubnew.jpg.
Помогите пожалуйста. Я Wordpress юзаю тока пару дней и ничего пока подобного не нашел.
К сожалению, исходный хтмл-код списка невозможно изменить. Ваш пример можно сделать, меняя только CSS.
Здравствуйте! А можно поинтересоваться, каким образом реализовано на вашем сайте “облако рубрик”? Это какой то плагин, или сами делали?
Это плагин Category Tagging.
Меня больше интересует само оформление списка, можете дать какой нибудь пример ?
А то уродливый список совсем глаз не радует :(
Добрый день!
использую wp_list_cats.. категории выводятся, все красиво, но (!) почему категории - не кликабельны, т.е. не как ссылки ?
вот код:
Интересные рубрики
в результате:
ИНТЕРЕСНЫЕ РУБРИКИ
Блогосфера (3)
Инфографика (1)
Новости (4)
Проекция реальности (3)
А можно сделать так же со стандартным ВП виджетом ?
Не сделать, т.к. код виджета не изменить.
Жаль. Все равно спасибо за ответ! ))
Отлично. мегаполезная статья. Скинул в закладки.
а как посчитать количество постов в родственной рубрике?
то есть, чтоб когда я читаю определенный пост, я еще видел сколько постов в этой рубрике есть?
Уважаемый Дмитрий, статья простая и полезная, попытался применить на своем сайте, все получилось. Однако при попытке использовать свой значек маркированного списка, используя list-style-image происходит следующее: название рубрики выравнивается по левому краю, количество постов в рубрике - по правому, а значек маркированного списка не прижат к левому краю, а находится после ссылки. Вот скриншот http://zalil.ru/31779069
Не подскажете, как исправить данную проблему? заранее благодарен
Рекомендую не использовать list-style-image, а вместо этого задать фон для тега <li>.
Спасибо, все получилось, радуюсь)
Большое спасибо за хак автору!
Вот какой возник вопрос: как убрать дужки в которые заключено количество постов в рубрике?
В пхп полный нуб, простите мне это))
Вот так:
2
3
4
5
6
7
8
<?php
$cats = wp_list_categories('show_count=1&title_li=&echo=0');
$cats = str_replace('(', '', $cats);
$cats = str_replace(')', '', $cats);
echo $cats;
?>
</ul>
Работает! Спасибо большое! :)
Спасибо за статью
Еще вопрос: у меня всего две категории и если их поставить не списком а в одну линию, можно вывести список записей под ними а не рядом?