Как добавить в шаблон WordPress собственную область для вывода виджетов

Реклама

Виджеты — достаточно удобная технология при работе с шаблонными сайтами. С помощью виджетов вы можете из панели администратора без знания каких-либо языков программирования наполнять нужную области на сайте различными эффектами, текстом, изображениями и т.д.




Чаще всего данную технологию используются при заполнении боковых колонок и практически все новые шаблоны WordPress и других CMS пользуются виджетами.

Время от времени, используя самописный или скачанный шаблон, приходиться что-то видоизменять и добавлять собственные области для вывода виджетов и WordPress позволяет осуществить это быстро и безбоязненно.

В ниже приведенном примере, будет показано как с помощью минимальных знаний php и структуры шаблона WordPress добавить те самые виджеты в теме места, где мы хотим их видеть.

Добавим в right sidebar сайта область для наполнения различными типами виджетов:

  1. Зарезервируем новую область для наших виджетов в системном файле function.php.
  2. Наполняем область виджета нужными нами модулями скаченными с интернета в панели управления.
  3. Выводим нашу область в самом шаблоне сайта.

Резервация области для виджета происходит с помощью специальной функции register_sidebar.

register_sidebar( array(
‘name’ => __( ‘Правый блок, » ),
‘id’ => ‘right-bar’,
‘description’ => __( ‘Правый блок’, » ),
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
) );

Основными параметрами здесь являются:

  • name — заголовок виджета;
  • description — описание виджета;
  • id — идентификатор виджета.

Сохраняем файл. Заходим в панель администратора. Переходим по ссылкам «Внешний вид — Виджеты». В данном разделе появилась новая область. Заголовок и описание данной области соответствует данным введенным в файле function.php.




Перетаскиваем в данную область виджеты которые хотим разместить в данной колонке.

И нам остается только вывести наши виджеты в области в правой колонке сайта. Осуществляется это с помощью стандартной функции dynamic_sidebar, в качестве аргумента для которой указываем наш идентификатор right-bar.

<div class=»right-sidebar»>
<?php dynamic_sidebar( ‘right-bar’ ); ?>
</div>

И нам остается только применить нужные нам стилевые изменения с помощью CSS.