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

4 комментария

Иконки для категорий

Доброго времени суток! Скучно было смотреть, как оформлен вывод рубрик в WordPress по умолчанию. Существует специальный плагин Category & Page Icons для того, чтобы украсить их при помощи загружаемых иконок. Но учитывая, что это можно сделать просто при помощи средств CSS, то загружать еще один плагин для еще одного блога как-то не хотелось. И так снега намело на сайте  . Тем более, что данный плагин далеко не у всех заработал, да и обновлялся он 2 года назад. Предыдущий пост как раз и показал, что иногда WordPress вносит в код такие изменения, которые делают разного рода надстройки неработоспособными.

Для начала надо раздобыть картинки для всех Ваших категорий. Вы можете нарисовать их и сами или найти на бескрайних просторах Интернета. Я воспользовалась ресурсом IconSearch. Их надо загрузить на блог и складировать в какую-нибудь отдельную папку для удобства.

Затем необходимо в файл style.css Вашей темы внести некоторые изменения.

В моей теме потребовалось сделать для списка категорий небольшой отступ слева, чтобы картинки не «царапали» край сайдбара.

Категории по умолчанию отображаются в виде маркированного списка <ul><li></li>…..</ul>. Чтобы оформить внешний вид отдельных категорий, я добавила код для тега li:

Теперь самое интересное. Нам необходимо прописать для каждой категории свою картинку. Ниже в том же файле style.css пишутся строки вида:

Вместо ID надо прописать идентификатор категории. Проще всего это сделать через просмотр HTML-кода страницы блога. Откройте любую его страницу при помощи сочетания клавиш Ctrl + U в большинстве браузеров. Случай с Internet Explorer был рассмотрен много ранее.

В открывшемся окне ищем часть кода, связанную с отображением рубрик, нас интересует тот номер, который обведен в красный прямоугольник в составе наименования класса CSS:

идентификаторы категорий

В данном случае это номер 5, именно его мы вставляем вместо ID и в соответствии с наименованием рубрики прописываем в текущем блоке путь до нужной картинки.

При этом обращаю особое внимание на то, что путь до картинки Вы должны прописать очень аккуратно. В приведенном примере папка img будто бы находится в одной папке с файлом style.css. Если на самом деле она находится в другой папке, то надо уйти одним или несколькими уровнями выше, например, так:

Сколько у нас отображаемых категорий, столько таких блоков и должно быть. Иначе картинка будет не везде . Не забываем во время копипасты этих блоков (ну как же без нее ) менять ID категории и название соответствующей картинки.

Результат данной операции можно видеть на данном блоге.


4 комментария “Вывод рубрик WordPress с картинками без плагина”

  1. Дмитирй

    Здравствуйте! Спасибо за статью. Вы описали как прикрепить картинки к категориям. А как сделать чтобы при выводе материалов категории они отображались как на главной? Вот пример главной http://rodinblog.ru, а вот пример скучногго вывода материалов по категории http://rodinblog.ru/category/vebinary/

    Ответить
    • NoService
      NoService

      Добрый день, Дмитрий!
      Как я понимаю, Вам хочется, чтобы при выводе списка тем в рамках одной категории выводилась картинка поста, а также был более красивый вывод текста.

      Для этого для каждого поста надо задать картинку-миниатюру (есть плагин для автоматизации процесса) и заполнить поле «Отрывок». Также не исключено, что придется ковырять код, чтобы все отображалось так, как хочется. Мне, например, пришлось это делать. Но это уже надо разбираться с каждым конкретным случаем отдельно.

      Ответить
  2. Антон Сергеевич

    Не сработало на моём блоге!(Пока сижу без картинок!((

    Ответить
    • NoService
      NoService

      Здравствуйте, Антон Сергеевич!
      Вас на блоге все немного по-другому, но можно попытаться задать похожий код для тегов

    • . В css можно попытаться задать для данного класса свойство background. Далее надо не забыть сбросить кэш сайта.
    • Ответить

Оставьте комментарий

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url=""> <img src="" alt="" class="" width="" height="">

http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ab.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ac.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ag.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ah.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ai.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ak.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/am.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/an.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ao.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aq.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ar.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/at.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/av.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/aw.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/ay.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/az.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bb.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bc.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/bd.gif 
http://noservice.ru/wp-content/plugins/wp-monalisa/icons/be.gif 
больше...