Иконки для рубрик без плагинов и без PHP!

2013-11-15 | WordPress

Всем опять здравствуйте! Недавно мой блог сменил дизайн. И, как видите, изменилось оформлениие списка рубрик в виджете «Рубрикатор» — около каждой рубрики появилась иконка.

В прошлой статье я обещал написать о том, как можно сделать иконки для рубрик без использования плагинов и без правки файла темы sidebar.php.

Данный способ добавления иконок для рубрик самый простой и, на мой взгляд, самый лучший.

Однако стоит отметить, что это подойдет не для всех WordPress-тем. Это частный пример, который, я надеюсь, поможет Вам.

Иконки для рубрик без плагинов

Все что нужно — это отредактировать style.css.

Первым делом нужно узнать id рубрики.
Сделать это можно через админпанель блога, либо через браузер.

Способ 1.

Для определения id рубрики в админпанели переходим на страницу Рубрики и наводим курсор на нужную рубрику. Нужно записать id всех рубрик.

иконки для рубрик

Способ 2.

Этот способ узнать id рубрики более удобен, нежели первый. В браузере открываем исходный код страницы и в нем находим список рубрик.

В коде перед самой ссылкой на рубрику будет примерно такая конструкция:

c0734faa02d5f6194852ee9c902fb1c6000

Самое главное — это cat-item. На него и нужно ориентироваться.

Также id рубрики можно узнать через просмотр кода элемента, например в Google Chrome, или через исследование элемента в Mozilla FireFox.

иконки для рубрик

Переходим к делу. Как правило, для списков li сайдбара, или виджета блога есть свои стили. У меня оформление списков такое:

#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):

#sidebar li.cat-item{ /* добавляем подчеркивание снизу */
border-bottom: 1px dotted #ccc;
width:285px;
padding:3px 4px;
}
 
#sidebar li.cat-item:hover{ /* добавляем фон при наведении курсора */
background:#99ffff;
opacity:0.7;
}

Вот таким незамысловатым способом можно сделать иконки для рубрик без плагина.

Поделиться:

Записи по теме:

13 комментариев к записи "Иконки для рубрик без плагинов и без PHP!"

Pasagir от 16.11.2013 в 20:20 пишет:

Интересно..а главное без доп. плагинов.
Нужно будет поэкспериментировать..

Ответить ↓
- Никита от 17.11.2013 в 00:08 пишет:
  
  Плагин в любом случае необязателен. Правда может придется редактиовать файл sidebar.php. Вдруг Вам это не подойдет. Если что не получится, можете обратиться в контактах. Попытаюсь помочь.
  
  Ответить ↓
Василий от 17.11.2013 в 17:37 пишет:

Хотел себе такое сделать. Нужно будет попробовать.

Ответить ↓
- Никита от 17.11.2013 в 17:48 пишет:
  
  Рад Вас видеть на блоге! Пробуйте!
  
  Ответить ↓
Руслан от 19.11.2013 в 19:41 пишет:

Делал себе так же, только плагином, ни как не мог найти как сделать кодом и тут ты выручил. Спасибо буду делать себе, что бы красиво было.

Ответить ↓
- Руслан от 23.11.2013 в 19:49 пишет:
  
  Сделал себе, но иконок почему — то нет?
  
  Ответить ↓
  - Никита от 23.11.2013 в 22:48 пишет:
    
    У тебя скорее всего надо по другому прописывать стили, но cat-item-id_рубрики присутствовать должен!
    
    Ответить ↓
Мозгунова Ирина от 24.11.2013 в 17:49 пишет:

Тоже иногда видела, что напротив рубрик имеются маленькие иконки, и это мне кажется, очень стильно и красиво.
Теперь знаю, где можно этому научиться и сделать такое интересное добавление к сайту.

Ответить ↓
- Никита от 24.11.2013 в 17:56 пишет:
  
  Имейте в виду, что добавление иконок зависит от конкретной темы! Это всего лишь пример, который не всем подходит!
  
  Ответить ↓
amberbloom от 06.12.2013 в 13:42 пишет:

Полезно, спасибо большое!

Ответить ↓
Алекс от 13.12.2013 в 10:47 пишет:

Какие иконки предпочтительнее: png или ico?
Зашёл на iconsearch.ru, ввёл в поиск «секс» — показалась всего одна обычная картинка в 5-ти размерах.

Ответить ↓
- Никита от 13.12.2013 в 13:47 пишет:
  
  Я использую png. Простите, Вы делаете сайт 18+?
  
  Ответить ↓
Алекс от 13.12.2013 в 18:51 пишет:

Нет, конечно, не делаю сайт для 18+.
Элементарное любопытство. Захотелось узнать, а чего у них мало, т.к. на «интернет» очень много страниц с красивыми иконками.
Иконки в .ico можно делать в Студиях разных, но я плохо рисую.

Ответить ↓