Облагораживаем список рубрик на 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 доступны по низким ценам качественные сухие смеси для строительства и ремонта от ведущих производителей продукции. Осуществляется доставка заказанных товаров по Москве.
Смотрите также
WordPress: подсветка искомого запроса в результатах поиска
Узнал о забавной финтифлюшке, которую можно применить на сайте, работающем на движке WordPress. С помощью специального php-кода, вставляемого в файл шаблона, плюс чуток CSS, на странице результатов поиска можно реализовать ...
Wordpress плагин CSS Cache Buster - всегда актуальная версия файла стилей
Как вы наверняка уже знаете, браузер кэширует файл стилей, загружаемый с сайта, и при последующей загрузке страниц он считывает его из кеша, а не загружает вновь с сайта. Если в ...
WordPress: выводим список всех тегов (меток) в рубрике
В одном из заказов на разработку шаблона для WordPress понадобилось выполнить нестандартную задачу – в рубрике вывести список всех тегов из статей, которые в ней находятся. Как обычно в таких ...
Возвращаем столбик "ID" в админку WordPress
При разработке шаблонов для WordPress часто возникает необходимость узнать идентификатор (ID) для страницы, рубрики или любой другой таксономии. Когда-то столбец с ID присутствовал в админке WordPress по умолчанию, но однажды ...
Комментарии (75)
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>.Спасибо, все получилось, радуюсь)
Большое спасибо за хак автору!
Вот какой возник вопрос: как убрать дужки в которые заключено количество постов в рубрике?
В пхп полный нуб, простите мне это))
Вот так:
Работает! Спасибо большое! :)
Спасибо за статью
Еще вопрос: у меня всего две категории и если их поставить не списком а в одну линию, можно вывести список записей под ними а не рядом?
Дима здравствуйте, подскажите пожалуйста, уже всю голову сломал, не могу найти хоть убей! Хочу увеличить шрифт текста рубрик, мой сайт 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)! Вы случайно не в курсе с чем это может быть связанно????
Потому что верстка Вашего сайта не рассчитана под это разрешение.
поправить как-то можно это дело?
Если найдете того, кто исправит, то да.
Понял, спасибо!