Стили оформления для виджетов

Опубликовано: 23.08.2018

видео Стили оформления для виджетов

Красивые виджеты для Windows 10

Я тут решил все посты про виджеты объединить в отдельную категорию и по такому случаю написать еще одну тематическую заметку. Вообще раньше виджеты не особо любил, мне казалось намного более эффективно прописать нужный php в шаблоне. Однако сейчас, когда админка вордпресс стала более дружелюбнее для пользователей, да и учитывая наглядность виджетов, думаю, их использование вполне оправдано. А пост сегодня будет о добавлении стилей оформления для виджетов.



Косвенно данную тему я уже затрагивал в блоге, когда рассказывал о плагине Colorful text widget для создания цветных виджетов. Там в посте, кстати, описано решение задачи и без применения виджетов. Думаю, опытные вебмастера, разработчики и верстальщики хорошо с этим знакомы. Однако этот и другие модули помогают в первую очередь новичкам и людям, которые не сильны в CSS/HTML. Если простого изменения цветов вам недостаточно, то на помощь придет плагин Widgets Reloaded о котором мы писали в посте про улучшение стандартных виджетов в WordPress . Он добавляет очень много возможностей для оформления виджета.


НОВАЯ ФУНКЦИЯ DISCORD! (Фишки, новое оформление)

Но что, если вам просто нужно указать класс стиля и не хочется использовать громоздкие конструкции? — тогда пригодится Widget CSS Classes . Про установку плагина детально рассказывать не буду, статью от том, как это производится найдете тут . После активации модуля в виджетах появится дополнительное поле — CSS Class.


Красивый виджет «Популярные сообщения» для Blogger: 5 разных стилей

В него вы можете дописать название класса для добавления стилей. Далее идем в файл style.css и задаем нужное оформление виджету, например:

.mylast { background : grey ; } .mylast ul li a { color : white ; }

.mylast { background: grey; } .mylast ul li a { color: white; }

Здесь мы указываем виджету серый фон, а для ссылок в списке (li) белый цвет текста. В итоге картина на сайте до и после получается следующая:

Это всего лишь обычный пример. Однако модуль не так прост, как кажется на первый взгляд — у него есть интересные настройки (пункт Widget CSS Classes в разделе «Параметры»):

Здесь можно:

Задать автоматическое добавление номеров для виджетов (widget-1, widget-2). Включить/выключить добавление класса для первого и последнего виджета. Включить/выключить классы для парных/непарных виджетов. Отобразить дополнительное поле с ID для CSS стилей. Выбрать вид ввода классов: текстовый, выпадающее меню либо скрыть поле.

Определение классов для выпадающего меню задается в последнем пункте настроек. Таким образом, вы можете предварительно создать несколько вариантов оформления виджетов, а потом заказчик сайта будет самостоятельно определять какой стиль блока ему нужен. Очень практично!

Плагин совместим с модулями Widget Logic и Widget Context plugins, также с ним не возникнет проблем при локализации или мультисайтовости. В целом, Widget CSS Classes — достаточно интересное решение. Если у вас свой сайт и вы хорошо ориентируетесь в разработке, то, конечно, можно обойтись без модуля. Если же доступа к проекту после сдачи его заказчику не будет, то предварительно задать несколько стилей оформления будет весьма гибким решением.

IRC (Internet Relay Chat)
rss