Иконки для виджетов

Здравствуйте, сегодня поговорим о том, как добавить иконку (картинку, изображение) напротив заголовка виджетов – то есть каждому виджету своя иконка – с помощью CSS или же при помощи плагинов.

Скачать исходники для статьи можно ниже

Что у нас должно получиться?

иконки в заголовке виджетов

Оказывается достичь этого очень легко!

 

Как же это сделать с помощью CSS?

1. Заходим на свой сайт и начинаем исследовать заголовки виджетов.
Буду показывать на примере браузера Google Chrome (аналогично Яндекс.Браузер).

Для примера возьмем стандартную тему wordpress – Twenty Eleven.

Наводим курсор на заголовок любого виджета, нажимаем правую клавишу мышки и выбираем пункт “Просмотр кода элемента”.

иконки для заголовков виджетов в сайдбаре

Далее смотрим на правое нижнее окошко (выделено синей стрелкой на скриншоте выше).

Тут можно заметить следующее у каждого виджета есть свой id.

у каждого виджета в сайдбаре свой id

Так например:
– у виджета “Поиск” – id=”search-2″;
– у виджета “Последние записи” – id=”recent-posts-2″;
– у виджета “Последние комментарии” – id=”recent-comments-2″;
и т.д.

Как определить –  у какого виджета какой id?
Если мы нажмем левой клавишей мыши по любому id, то у нас на сайте выделится виджет, которому и принадлежит данный id:

как определить какому виджету принадлежит id

2. Добавляем для нужного виджета нужные стили оформления, в частности – иконку.

То есть заходим в файл стилей сайта.

В wordpress файл стилей – это style.css – для его редактирования – заходим в панель управления сайтом, в левом меню выбираем  пункт “Внешний вид” и его подпункт “Редактор”, справа в списке шаблонов выбираем файл style.css.

Далее спускаемся в конец его кода и вставляем следующее, для примера добавим иконку для виджета “Архив записей” (его id=”archives-2″):

#archives-2 {
background: url(https://mnogoblog.ru/wp-content/uploads/2013/08/navi.png) no-repeat !important;
padding-left: 30px !important;
}

, где “https://mnogoblog.ru/wp-content/uploads/2013/08/navi.png” – путь до иконки.

Правда, если мы посмотрим на виджет сайта, то увидим, что он немного съехал:

картинка в заголовках виджета

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

Опять переходим на заголовок виджета и нажимаем на правую клавишу мыши, в выпадающей менюшке выбираем пункт “Просмотр кода элемента” и смотрим на его код:

иконка виджета

Сразу же видно, что тег заголовка, который использует тема Twenty Eleven –  h3 (в моей теме, например, заголовок виджета использует тег h2).

Теперь немного изменим код в стили оформления темы сайта (style.css) на следующий:

#archives-2 h3 {
background: url(https://mnogoblog.ru/wp-content/uploads/2013/08/navi.png) no-repeat !important;
padding-left: 30px !important;
}

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

иконка слева от заголовка виджета в сайдбаре

Все стало просто отлично – сам виджет не съехал вправо!

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

Плагины для вставки иконки в виджет сайта.

Плагин “Widget Icon” 

Сведения о плагине на основе сайта “wordpress.org”:

Последнее обновление: 2013-5-10

Загрузок: 2,679

Сайт плагина: “wordpress.org/plugins/widget-icon/”

Плагин содержит уже готовые 530 иконок для вставки их в заголовок виджетов в сайдбаре вашего сайта.

После установки и активации плагина заходите в пункт “Виджеты” (Панель управления – Внешний вид – Виджеты), переносите нужный виджет в сайдбар и смотрите на его настройки, в которых появились дополнительные пункты:

плагины для вставки иконок на сайт в виджет

Все достаточно просто и с большим количеством настроек.

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

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