Сен
1
8

Стили оформления виджетов — плагин Widget CSS Classes

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

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

Плагин Widget CSS Classes

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

Виджеты CSS Classes

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

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

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

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

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

Настройки плагина Widget CSS Classes

Здесь можно:

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 6, средний балл: 4,17 из 7)
Загрузка...

категория Категории: Виджеты; Плагины;
теги Теги: , , , , , .

комментариев 8 к статье “Стили оформления виджетов — плагин Widget CSS Classes”

  • Юрий   12.09.2014

    Большое спасибо за статью! Спасибо за виджет! А для .widget-title возможно задать свой стиль?

  • Tod   12.09.2014

    Юрий, к сожалению, уже не помню в какое именно места виджета добавляет указанный стиль. Возможно, получится использовать .myclass .widget-title но точно не уверен. Нужно пробовать.

  • Юрий   12.09.2014

    Спасибо за ответ! Методом тыка я опробовал . Получилось !!!!!! Спасибо за виджет. Им возможно и title и фон виджета и фон рабочий области задавать. Т.е. все три области виджета регулируются.

  • cfyz   28.06.2015

    Здравствуйте, я активировал, вписал стили но эфекта нет но в виджетах отображается в админке

  • Tod   29.06.2015

    cfyz, плагин позволяет добавить class для виджета, а стили вам нужно прописать самостоятельно в style.css.

  • cfyz   29.06.2015

    я прописал в стайл цсс

    .mylast {
    background: grey;
    }

    .mylast ul li a {
    color: white;

    а в витжете в поле стилей вписал как на скрине =муласт= на ингл

  • Tod   30.06.2015

    cfyz, тогда посмотрите HTML код готовой страницы. Есть ли там вообще класс mylast? Если есть и ничего не происходит, то 2 варианта — ошиблись в CSS либо какой-то другой стиль перекрывает ваш. Во втором случае добавьте background: grey !important;

  • cfyz   30.06.2015

    добавьте background: grey !important; — это куда именодобавить

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты
Лучшее в категории
Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости