Как задать для каждой категории свою иконку?

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

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

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

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

Иконки для сайта

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

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

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

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

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

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

Как установить иконки

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

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

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





Скачать иконки для сайта

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

Иконки категорий wordpress

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

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

<?php
/**
 * The Sidebar containing the main widget area.
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];
if ( 'content' != $current_layout ) :
?>
<div id="secondary" class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>
<aside id="archives" class="widget">
<h3 class="widget-title"><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>
<aside id="meta" class="widget">
<h3 class="widget-title"><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>
<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->

<?php endif; ?>

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

<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

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

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

<aside id="categories" class="widget">
<h3 class="widget-title">Рубрики</h3>
<ul>
<?php
if (is_single()) {
 $cat = get_the_category();
 $cat = $cat[0]->cat_ID;
 $currentCat = '&current_category='.$cat;
}
 wp_list_categories('hierarchical=1&show_count=1&title_li='.$currentCat);
 ?>
</ul>
</aside>

Это мы вывели список категорий. Теперь зададим ему оформление — открываем файл 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 — он создаст в таблице отдельную колонку с идентификаторами.

как установить иконки категорий

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

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

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

li.cat-item-409

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

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

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

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Увидев подобное у вас, сразу подумал о том, как вы это смогли реализовать, стал копаться в блоге. Теперь понимаю. Спасибо за инструкцию.

  • Александр, спасибо за подробную инструкцию, все получилось и мне нравится. Обожаю такие штучки на сайте, как и дома(статуэтки, цветочки и разные приятные мелочи)

  • Здравствуйте, Александр! А можно поподробнее про установку иконок для страниц? С помощью плагина на моем шаблоне они не устанавливаются. Есть еще какой-нибудь вариант установки? Спасибо.

    • Здравствуйте! Вариант установки без плагина тоже описан — попробуйте его

Добавить комментарий