Облагораживаем список рубрик на 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 доступны по низким ценам качественные сухие смеси для строительства и ремонта от ведущих производителей продукции. Осуществляется доставка заказанных товаров по Москве.
Иногда, кстати, возникает дикое желание выводить этот список по самым популярным пунктам или по алфавиту. Можно было бы сделать какую-то кнопочку для переключения этих штук - типа сортировки:)
На счет сортировки по алфавиту. Если использовать сборку Макса (maxsite.org), то там эта сортировка прекрасно работает по умолчанию. А на счет “по самым популярным пунктам” - я такого нигде не встречал и не знаю вообще, реально ли подобное реализовать.
Ух ты как просто :) - попробую сделать у себя :)
Читал через rss, а там выравнивания никакого нету и примеры “так” и “эдак” выглядят одинакого - долго тупил и искал отличия… :)
Да, кстати, у меня то же самое было:) Потом подумал, может ксс не подгружается какой-то и решил на сайте глянуть.
и у меня тоже оба списка одинаково выглядели =) сразу понял, что тут что-то нечисто и пришел на сайт; для ленты, имхо, лучше такие штуки картинками делать =)
Я для контроля подписан на свой блог, поэтому после публикации тоже это заметил. Вообще-то стили вставлены прямо в коде поста, поэтому я рассчитывал, что и в ридере все будет отображаться, как я задумал. Видимо, таможня аля федбернер что-то там изменяет. А картинкой сделать я вообще-то изначально хотел, да вот как-то не особо люблю с ними возиться :) Мне интереснее сделать вживую.
Спасибо, будем знать и пользоваться)
А на мой скромный взгляд первый вариант - логичнее. А во втором варианте просится отточие ……………. как в оглавлениях. А иначе глазу не за что уцепиться будет. Особенно если много категорий.
Спасибо! Побольше таких маленьких полезностей) Вобще, это похоже на идею для отдельного проекта - лайфхак применительно к блоггингу..
Vlad Ossipov, если сайдбар не слишком широкий, то глазу не сложно будет зацепиться. А так, конечно, с точками было бы еще нагляднее. Только вот с учетом имеющихся html-элементов этого списка не получится их сделать красиво.
Ну там собственно для каждой рубрики есть свой класс - cat-item-N, где N - номер рубрики. Можно фоном выделить - будет на чём глазу зацепится :)
Очень рад, что вовремя сам начал работать с дивами и CSS. Красота, две строчки и готово…
[quote comment=”3469″]Ну там собственно для каждой рубрики есть свой класс - cat-item-N, где N - номер рубрики. Можно фоном выделить - будет на чём глазу зацепится :)[/quote]
А если рубрик, допустим, 20-30, будете для каждой прописывать свой класс? ИМХО, не очень разумно.
[quote comment=”3472″]Очень рад, что вовремя сам начал работать с дивами и CSS. Красота, две строчки и готово…[/quote]
Верно, молодец! ;)
Если сильно хочется, то можно, ведь и с помощью JavaScript пробегать по пунктам и подкрашивать фон в каждой четной строке.
Олег, я бы не стал разукрашивать список рубрик, как зебру =)
Ну собственно ява-скриптом можно и лишние элементы добавить чтобы между рубрикой и количеством статей проставить точки :) - хотя это уже полноценный хак
А если ячейка где выводится список рубрик велика, то такой разброс по сторонам тоже не смотрится.
Перемещение цифр в правую колонку, противоречит всем правилам юзабилити, я бы так делать не стал.
А вас не смущает что таким образом вот уже более 200 лет выглядят оглавления книг?
И если человечеству до сих пор было удобно - то почему бы не перенести это и в веб?
Да и вообще выглядеть оно будет нормально если длинна самого длинного пустого места бедут меньше чем длинна самой длинной из рубрик
Steward, в том то и дело, что вэб страдает из попыток перенести многое из полиграфии и печатной продукции. :-)
Поэтому и существую различия между вэб-дизайнерами и дизайнерами полиграфии.
Вэб - он другой и применять все что используется в типографике - нельзя.
Все гениальное как всегда очень просто.
Спасибо - заюзаем.
Спасибо огромное за подсказку! Я бы сама и не додумалась!
Здорого, но у меня возникла проблемма иконками, которые всегда находясь в бэкграунде слева от рубрики, сьехали вправо, к счетчику.
Спасибо! Воспользуюсь!
Только можно было бы сразу и написать скрипт сортировки по количеству записей в рубрике! :)
Гм, так что можно придумать, что бы иконки не убегали вместе со (счеткиком)?
Максим, чтобы я подсказал, что нужно поправить, мне нужно увидеть пример с ошибкой.
Подумалось мне, что большая часть блоггеров - эстеты. НУ не нравится им (нам) как выглядит та или иная фишка. Всегда хочется что-то поправить. А главное - время на это уходит прилично. Надо делать паузы, господа. Например на недельку. =)
А вообще, спасибо за “хак”. Пригодится в будущем.
Дмитрий, вот два скриншота. yourorigami.info/1.tiff и yourorigami.info/1.tiff
Да дело даже не в том, нравится или не нравится. Просто иной раз хочется оригинальности, одно и то же надоедает :)
Максим, нужны исходники неправильного варианта, а не скриншоты.
Давно искал решение, оказалось все довольно просто.
Спасибо, отпишу на блоге, хорошие решения достойны
ссылки.
Тоже в свое время лопатил литературу в поисках этого, а оказалось все просто и красиво :)
Попробую сделать подобное на облаке рубрик 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)