Здравствуйте, сегодня поговорим о том, как добавить иконку (картинку, изображение) напротив заголовка виджетов – то есть каждому виджету своя иконка – с помощью CSS или же при помощи плагинов.
Скачать исходники для статьи можно ниже
Что у нас должно получиться?
Оказывается достичь этого очень легко!
Как же это сделать с помощью CSS?
1. Заходим на свой сайт и начинаем исследовать заголовки виджетов.
Буду показывать на примере браузера Google Chrome (аналогично Яндекс.Браузер).
Для примера возьмем стандартную тему wordpress – Twenty Eleven.
Наводим курсор на заголовок любого виджета, нажимаем правую клавишу мышки и выбираем пункт “Просмотр кода элемента”.
Далее смотрим на правое нижнее окошко (выделено синей стрелкой на скриншоте выше).
Тут можно заметить следующее у каждого виджета есть свой id.
Так например:
– у виджета “Поиск” – id=”search-2″;
– у виджета “Последние записи” – id=”recent-posts-2″;
– у виджета “Последние комментарии” – id=”recent-comments-2″;
и т.д.
Как определить – у какого виджета какой 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 иконок для вставки их в заголовок виджетов в сайдбаре вашего сайта.
После установки и активации плагина заходите в пункт “Виджеты” (Панель управления – Внешний вид – Виджеты), переносите нужный виджет в сайдбар и смотрите на его настройки, в которых появились дополнительные пункты:
Все достаточно просто и с большим количеством настроек.