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

Непрямо цю тему я вже зачіпав у блозі, коли розповідав про плагін Colorful text widget для створення кольорових віджетів. Там у пості, до речі, описано розв'язання задачі і без застосування віджетів. Думаю, досвідчені вебмайстри, розробники та верстальники добре з цим знайомі. Однак цей та інші модулі допомагають насамперед новачкам та людям, які не сильні у CSS/HTML. Якщо простої зміни кольорів вам недостатньо, то на допомогу прийде плагін Widgets Reloaded, про який ми писали в пості про покращення стандартних віджетів у WordPress. Він додає багато можливостей для оформлення віджету.

Плагін Widget CSS Classes

Але якщо вам просто потрібно вказати клас стилю і не хочеться використовувати громіздкі конструкції? - Тоді знадобиться Widget CSS Classes. Про встановлення плагіна детально розповідати не буду, статтю від того, як це робиться, знайдете тут. Після активації модуля у віджетах з'явиться додаткове поле CSS Class.

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

Тут ми вказуємо віджету сірий фон, а посилань у списку (li) білий колір тексту. У результаті картина на сайті до і після виходить така:

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

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

Визначення класів для меню, що випадає, задається в останньому пункті налаштувань. Таким чином, ви можете попередньо створити кілька варіантів оформлення віджетів, а потім замовник сайту самостійно визначатиме який стиль блоку йому потрібен. Дуже практично!

Плагін сумісний з модулями Widget Logic та Widget Context plugins, також з ним не виникне проблем при локалізації чи мультисайтовості. В цілому, Widget CSS Classes – досить цікаве рішення. Якщо у вас свій сайт і ви добре орієнтуєтесь у розробці, то, звичайно, можна обійтися без модуля. Якщо ж доступу до проекту після здачі його замовнику не буде, попередньо задати кілька стилів оформлення буде дуже гнучким рішенням.