Реклама на блоге
Контакты
на HTML
На CSS
в PhotoShop
для WordPress
Видеоуроки
Акции и конкурсы
Кроссворды
Всем опять здравствуйте! Недавно мой блог сменил дизайн. И, как видите, изменилось оформлениие списка рубрик в виджете «Рубрикатор» — около каждой рубрики появилась иконка.
В прошлой статье я обещал написать о том, как можно сделать иконки для рубрик без использования плагинов и без правки файла темы sidebar.php.
Данный способ добавления иконок для рубрик самый простой и, на мой взгляд, самый лучший.
Однако стоит отметить, что это подойдет не для всех WordPress-тем. Это частный пример, который, я надеюсь, поможет Вам.
Иконки для рубрик без плагинов
Все что нужно — это отредактировать style.css.
Первым делом нужно узнать id рубрики.
Сделать это можно через админпанель блога, либо через браузер.
Способ 1.
Для определения id рубрики в админпанели переходим на страницу Рубрики и наводим курсор на нужную рубрику. Нужно записать id всех рубрик.
Способ 2.
Этот способ узнать id рубрики более удобен, нежели первый. В браузере открываем исходный код страницы и в нем находим список рубрик.
В коде перед самой ссылкой на рубрику будет примерно такая конструкция:
af4a1d1e8c539a460ee9f35c362ed2d8000
Самое главное — это cat-item. На него и нужно ориентироваться.
Также id рубрики можно узнать через просмотр кода элемента, например в Google Chrome, или через исследование элемента в Mozilla FireFox.
Переходим к делу. Как правило, для списков li сайдбара, или виджета блога есть свои стили. У меня оформление списков такое:
1 2 3 4 5 6 7 | #sidebar ul li { font-size:16px; /* размер шрифта */ padding:1px 0 3px; list-style-image:url("images/arrow.png"); /* изображение для списка */ letter-spacing: 1px; /* пробелы между буквами */ font-style:italic; } |
А для добавления иконки к рубрике нужно добавить в style.css такой код:
1 2 3 | #sidebar li.cat-item-id_рубрики{ list-style-image:url("images/icons/css.png"); } |
Иконки для рубрик можно найти на сервисах поиска иконок, например на iconsearch.ru.
Помимо иконок добавил еще бирюзовый фон при наведении на рубрику и подчеркивания, но здесь проще — нужно добавить стили только для оформления списка рубрик (cat-item):
1 2 3 4 5 6 7 8 9 10 | #sidebar li.cat-item{ /* добавляем подчеркивание снизу */
border-bottom: 1px dotted #ccc;
width:285px;
padding:3px 4px;
}
#sidebar li.cat-item:hover{ /* добавляем фон при наведении курсора */
background:#99ffff;
opacity:0.7;
} |
Вот таким незамысловатым способом можно сделать иконки для рубрик без плагина.
Интересно..а главное без доп. плагинов.
Нужно будет поэкспериментировать..
Плагин в любом случае необязателен. Правда может придется редактиовать файл sidebar.php. Вдруг Вам это не подойдет. Если что не получится, можете обратиться в контактах. Попытаюсь помочь.
Хотел себе такое сделать. Нужно будет попробовать.
Рад Вас видеть на блоге! Пробуйте!
Делал себе так же, только плагином, ни как не мог найти как сделать кодом и тут ты выручил. Спасибо буду делать себе, что бы красиво было.
Сделал себе, но иконок почему — то нет?
У тебя скорее всего надо по другому прописывать стили, но cat-item-id_рубрики присутствовать должен!
Тоже иногда видела, что напротив рубрик имеются маленькие иконки, и это мне кажется, очень стильно и красиво.
Теперь знаю, где можно этому научиться и сделать такое интересное добавление к сайту.
Имейте в виду, что добавление иконок зависит от конкретной темы! Это всего лишь пример, который не всем подходит!
Полезно, спасибо большое!
Какие иконки предпочтительнее: png или ico?
Зашёл на iconsearch.ru, ввёл в поиск «секс» — показалась всего одна обычная картинка в 5-ти размерах.
Я использую png. Простите, Вы делаете сайт 18+?
Нет, конечно, не делаю сайт для 18+.
Элементарное любопытство. Захотелось узнать, а чего у них мало, т.к. на «интернет» очень много страниц с красивыми иконками.
Иконки в .ico можно делать в Студиях разных, но я плохо рисую.