Виджеты — достаточно удобная технология при работе с шаблонными сайтами. С помощью виджетов вы можете из панели администратора без знания каких-либо языков программирования наполнять нужную области на сайте различными эффектами, текстом, изображениями и т.д.
Чаще всего данную технологию используются при заполнении боковых колонок и практически все новые шаблоны WordPress и других CMS пользуются виджетами.
Время от времени, используя самописный или скачанный шаблон, приходиться что-то видоизменять и добавлять собственные области для вывода виджетов и WordPress позволяет осуществить это быстро и безбоязненно.
В ниже приведенном примере, будет показано как с помощью минимальных знаний php и структуры шаблона WordPress добавить те самые виджеты в теме места, где мы хотим их видеть.
Добавим в right sidebar сайта область для наполнения различными типами виджетов:
- Зарезервируем новую область для наших виджетов в системном файле function.php.
- Наполняем область виджета нужными нами модулями скаченными с интернета в панели управления.
- Выводим нашу область в самом шаблоне сайта.
Резервация области для виджета происходит с помощью специальной функции register_sidebar.
‘name’ => __( ‘Правый блок, » ),
‘id’ => ‘right-bar’,
‘description’ => __( ‘Правый блок’, » ),
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );
Основными параметрами здесь являются:
- name — заголовок виджета;
- description — описание виджета;
- id — идентификатор виджета.
Сохраняем файл. Заходим в панель администратора. Переходим по ссылкам «Внешний вид — Виджеты». В данном разделе появилась новая область. Заголовок и описание данной области соответствует данным введенным в файле function.php.
Перетаскиваем в данную область виджеты которые хотим разместить в данной колонке.
И нам остается только вывести наши виджеты в области в правой колонке сайта. Осуществляется это с помощью стандартной функции dynamic_sidebar, в качестве аргумента для которой указываем наш идентификатор right-bar.
<?php dynamic_sidebar( ‘right-bar’ ); ?>
</div>
И нам остается только применить нужные нам стилевые изменения с помощью CSS.