Современная, быстрая и удобная система управления сайтом

Кастомизация виджетов

Архив записейКомментарии: 0Просмотров: 29107

Помню как страшный сон: однажды мне нужно было сделать сайт на WordPress, в котором виджеты использовали разное оформление. Оформление менялось довольно серьезно: чередовались вначале один фон/цвет, потом - другой. Тогда выкрутился так: в виджетах прописал свои хуки на которые прицепил static-переменную, по которой и отслеживал четность/нечетность и менял css-класс блока виджета.

Недавно возникла примерно такая же задача в одном из заказов на MaxSite CMS, только ситуация усложнилась в несколько раз. Вместо чередования, нужно оформить каждый виджет уникально. В одном есть рамка, в другом - нет. В одном UL-список нужно булечкой, в другом картинкой. Плюс во всех разные размеры шрифтов.

Обычно для таких задач я сразу отказываюсь от виджетного сайдбара и вручную прописываю виджеты в шаблоне. Всё-таки как-то сложилось так, что виджеты в сайдбарах обычно выглядят однотипно.

Но задача меня заинтересовала и я немного помозговал придумал как сделать так, чтобы каждый виджет получал уникальные css-классы.

Чтобы было понятно о чем речь, расмотрим как обычно оформляется виджет. В файлах sidebar-N.php можно указать HTML до и после виджета. На данный момент все виджеты обрамляются в div.widget.

Для того, чтобы определить скажем третий виджет во втором сайдбаре можно придумать класс div.widget_2_3. А для виджета последних записей указывать класс div.last_pages_widget.

В CSS всё это дело оформляется очень просто:

<div class="widget widget_2_3 last_pages_widget">...

То есть все классы мы просто указываем через пробел, а в style.css описываем по отдельности.

Таким образом, немного изменив систему я ввел для HTML до и после специальные замены:

  • [SB] - заменяется на номер/имя сайдбара
  • [NUMW] - заменяется на номер отображаемого виджета в сайбаре
  • [FN] - имя функции виджета
  • [NUMF] - номер виджета для этой функции (первый - 0)
Стандартно в дефолтном шаблоне теперь будет такой код:
<div class="widget widget_[SB]_[NUMW] [FN] [FN]_[NUMF]">

Например для второго виджета первого сайдбара, Последних записей (last_pages_widget) с номером 2 автоматом получится такой код:


<div class="widget widget_1_2 last_pages_widget last_pages_widget_2">

Что это дает в итоге. Практически безграничные возможности по кастомизации любого виджета.

Например можно для четных и нечетных сделать разное оформление. Для любого виджета можно использовать свои стили. Каждый виджет одной функции также может быть кастомизирован в индивидуальном порядке.

Получаются любые комбинации. :)

Данная возможность будет доступна в MaxSite CMS 0.21.

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

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)