Иконки Категорий WordPress — Как Задать Для Каждой Свою?

В сегодняшней статье рассмотрим, как реализовать такую настройку, чтобы каждой рубрике на нашем блоге соответствовала какое-то характерное изображение — иконка категории. Разумеется, я покажу также где скачать иконки для сайта. Вы знаете, что в WordPress есть виджет категорий. При его активации все рубрики отображаются списком в виде текстовых ссылок. Когда их много, глаз что называется «замыливается» и становится сложно найти то, что нужно. Так вот наличие рядом с текстовой ссылкой какой-нибудь картинки, характеризующей данную категорию, сделает навигацию более наглядной и разнообразит наш сайт.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Как всегда, решим нашу задачу двумя способами — с плагином и без.

Как установить иконки категорий с плагином

В этом нам поможет плагин Category Page Icons. После его установки и активации в меню появится новый пункт «Icons»:

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Зайдем в «Settings» — панель настроек плагина.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Основное что надо сделать — указать размеры иконок, указать папку для сохранения изображений (по умолчанию — «uploads/icons») и настроить, будут ли они обрезаться под заданный размер.

Где скачать иконки для сайта?

Есть несколько хороших бесплатных сервисов, где можно свободно скачать иконки для сайта разных размеров. Я обычно пользуюсь двумя — IconSearch.ru и IconFinder.com. Достаточно лишь ввести в поле поиска ключевое слово и появятся все соответствующие ему картинки. Сохраняем нужные к себе на комп и переходим к следующему шагу.

Как установить иконки рубрик на WordPress?

В разделе «Icons» плагина мы будем загружать новые картинки. Для этого нажмите «Select Files» и загрузите все требуемые изображения на сервер.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Когда все загрузили, посмотрите на верхнее меню — здесь несколько пунктов:

  • Assign icons to Pages – здесь будем задавать иконки для страниц
  • Assign icons to Categories – здесь для категорий
  • Add / Delete icons – здесь будем добавлять новые и удалять старые

Заходим в пункт категорий или страниц, видим список всех существующих статических страниц или рубрик и задаем иконки для каждой категории или записи.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

и сохраняем изменения. После активации упомянутого виджета «Рубрики» получаем результат — из простого списка в список с иконками категорий.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Как установить иконки без плагина?

Тоже, по большому счету, ничего сложного нет. Однако делать мы это будем уже не через виджет, а напрямую в файле sidebar.php. Открываем его в редакторе и видим следующий код (я буду показывать на стандартной теме TwentyEleven)










Здесь прописаны те блоки, которые будут отображаться при неактивированных виджетах в боковом >>сайдбаре. Если хотим добавить в их компанию наш список рубрик — будем добавлять новый блок сразу за строкой

. Если же хотим, чтобы они отображались всегда вне зависимости от активации виджетов, то перед ней.

А добавить нам надо следующий код:


Рубрики

Это мы вывели список категорий. Теперь зададим ему оформление — открываем файл style.css и находим стили, отвечающие за оформление вывода списка категорий. В TwentyTen он такой:

/* =Widgets
----------------------------------------------- */

.widget-area {
        font-size: 12px;
}
.widget {
        clear: both;
        margin: 0 0 2.2em;
}
.widget-title {
        color: #666;
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.1em;
        line-height: 2.6em;
        text-transform: uppercase;
}
.widget ul {
        font-size: 15px;
        margin: 0;
}
.widget ul ul {
        margin-left: 1.5em;
}
.widget ul li {
        color: #777;
        font-size: 13px;
}
.widget a {
        font-weight: bold;
        text-decoration: none;
}
.widget a:hover,
.widget a:focus,
.widget a:active {
        text-decoration: underline;
}

Нашли? Теперь надо найти ID рубрик, для которых мы хотим установить иконку. Это делается в разделе «Записи > Рубрики». Наведите на любую рубрику и внизу в строке состояния браузера появится адрес ссылки с параметром ID=xxx. Упростить процесс опознания ай ди поможет плагин Reveal IDs — он создаст в таблице отдельную колонку с идентификаторами.

Иконки Категорий WordPress — Как Задать Для Каждой Свою?

Запоминаем их. И добавляем в файл стилей код:

.widget #categories li.cat-item-409 a {
 background: url(images/icons/wordpress.png) no-repeat left center;
 }

Здесь в строке

li.cat-item-409

число 409 как раз и есть ID категории. А адрес изображения — иконка, которая будет отображаться рядом со ссылкой. Задаем таким же образом картинки для каждой катогории.

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

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

Оцените статью