Здравствуйте, давайте добавим к одному из виджетов фоновую картинку! Украсим виджет!

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

Чтобы добавить пользовательские стили CSS на сайт wordpress, можно либо редактировать файл style.css темы (находится в пункте “Внешний вид”, подпункт “Редактор”), либо установить плагин – Simple Custom CSS:
Сайт плагина: “ru.wordpress.org/plugins/simple-custom-css/”
Автор плагина: John Regan, Danny Van Kooten
Количество активных установок: 300 000+
Преимущества:
– Simple Custom CSS позволяет добавлять собственные стили или переопределять стили CSS плагинов или темы.
– Стили, которые вы сохраняете здесь, останутся даже после переключения тем.
– Для использования вводите Ваш код CSS и нажимаете на кнопку “Обновить пользовательский CSS”. Так просто!

В данной статье воспользуемся вторым способом – установим плагин – Simple Custom CSS.
После активации и установки плагина в админке, в пункте “Внешний вид”, появится новый подпункт “Пользовательские стили”:

Здесь мы будем добавлять стили CSS для виджета, но для начала нужно узнать его id или class.

Вот на моем сайте есть виджет “УКРАШАЕМ САЙТ НА НОВЫЙ ГОД”:

, давайте добавим к нему фоновую картинку:

Чтобы определить id или class виджета нам нужно открыть сайт, например, Яндекс.Браузером, далее нажать на правую клавишу мышки и выпавшем меню выбрать пункт “Исследовать элемент”:

После этого откроется следующая панель:

С помощью кнопки в виде трех точек, расположенных вертикально, можно переместить данную панель влево, вправо, вниз:

Мне нравится, когда она находится внизу.

Затем кликаем левой кнопкой мышки по следующей кнопке (Select an element…), которая находится слева:

И перетаскиваем курсор мышки до нужного нам виджета, который должен выделится следующим образом, после чего в коде у нас подсветится id и class данного виджета:

В данном примере, id виджета: “custom_html-4”, а class виджета “widget_custom_html”.

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

#custom_html-4 {
background-image: url("https://mnogoblog.ru/wp-content/uploads/2020/01/nypattern.jpg");
padding: 25px;
border-radius: 15px;
}

В данном примере мы использовали id виджета, но можно воспользоваться и параметром – class виджета, но тогда данный стиль распространится на все виджеты “HTML-код”, который я использовал для создания данного виджета.

Вот пример кода с использованием параметра – class:

.widget_custom_html {
background-image: url("https://mnogoblog.ru/wp-content/uploads/2020/01/nypattern.jpg");
padding: 25px;
border-radius: 15px;
}

В итоге виджет у нас стал выглядеть следующим образом:

Параметр “padding: 25px;” для своего виджета я поменял на “padding: 15px;”, так красивее.

Также можно использовать не картинку для фона, а просто цвет, вот код:

#custom_html-4 {
background: #B9EBFA;
padding: 15px;
border-radius: 15px;
}