Кастомизация виджетов
Воскресенье, 7 сентября 2008 г.
Просмотров: 582
Подписаться на комментарии по RSS
Помню как страшный сон: однажды мне нужно было сделать сайт на 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.