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

Здравствуйте, сегодня поговорим о том, как добавить иконку (картинку, изображение) напротив заголовка виджетов — то есть каждому виджету своя иконка — с помощью 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(http://mnogoblog.ru/wp-content/uploads/2013/08/navi.png) no-repeat !important;
padding-left: 30px !important;
}

, где «http://mnogoblog.ru/wp-content/uploads/2013/08/navi.png» — путь до иконки.

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

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

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

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

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

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

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

#archives-2 h3 {
background: url(http://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

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