Добавление виджетов в тему WordPress – часть 7
В прошлой статье мы рассмотрели формирование произвольного меню в темах WordPress, а в этой расскажем, как создать виджеты. Вывод виджетов будем изучать на основе нашей экспериментальной темы Lightweight.
Итак, для добавления виджетов в тему нужно сделать два шага:
1) Добавляем в файл functions.php следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <?php function register_my_widgets(){ register_sidebar( array( 'name' => 'right sidebar', 'id' => 'sidebar', 'before_widget' => '<li class="sidebar">', 'after_widget' => '</li>', 'before_title' => '<h4>', 'after_title' => '</h4>', ) ); } add_action( 'widgets_init', 'register_my_widgets' ); ?> |
2) Добавляем в файл sidebar.php такой код:
1 2 3 4 5 | <div id="sidebar"> <ul> <?php dynamic_sidebar('sidebar'); ?> </ul> </div> |
Напомним, файл sidebar.php подключается в файле index.php с помощью функции:
1 | <?php get_sidebar(); ?> |
Подробнее о файле index.php мы писали в части №2.
Теперь детальнее рассмотрим функции, присутствующие в шаге №1 и 2.
Функция register_sidebar регистрирует панель виджетов, которые отобразятся в админ-панели WordPress и на самом сайте. Параметрами функции в нашем примере являются:
1 2 3 4 5 6 | - 'name' => 'right sidebar' – название панели виджетов, которое будет отображаться в админке WordPress. В данном случае - right sidebar; - 'id' => 'sidebar' – идентификатор виджета (id); - 'before_widget' => '<li class="sidebar">' – HTML-код, который будет расположен перед каждым виджетом. В нашем случае – элемент ненумерованного списка <li class="sidebar"> - 'after_widget' => '</li>' - HTML код, который будет расположен после каждого виджета в панели: </li>; - 'before_title' => '<h4>' – HTML-код перед заголовком виджета. В нашей теме – это <h4>; - 'after_title' => '</h4>' - HTML-код после заголовка виджета |
Следует заметить, что параметры ‘before_widget’ и ‘after_widget’ по умолчанию имеют значения
1 | <li id="%1$s" class="widget %2$s"> и </li> |
, т.е., сами формируют элемент списка, поэтому их можно и не указывать. Мы же их обозначили, чтобы сразу присвоить нужные классы для последующего описания в файле стилей CSS.
В свою очередь параметры ‘before_title’ и ‘after_title’ по умолчанию формируют теги
1 | '<h2 class="widgettitle">' и </h2> |
Перейдём к шагу №2. ВНИМАТЕЛЬНО! Функция dynamic_sidebar выводит виджет под названием ‘sidebar’, которое должно совпадать с идентификатором (‘id’ => ‘sidebar’) в функции register_sidebar. Т.е., связка двух функций (dynamic_sidebar и register_sidebar) выполняется с помощью параметра ‘id’, которое заодно выступает и названием виджета (должно совпадать)!
Важно отметить, что данные функции формируют элементы списка:
1 | <li></li> |
, но не сам обрамляющий тег<ul></ul>, именно поэтому мы добавили его в шаге №2.
В результате выполнения приведённых выше функций WordPress сформирует ненумерованный список:
1 | <ul><li></li></ul> |
где каждый элемент списка <li></li> будет содержать тот блок, который мы добавим в панели виджетов админки WordPress, например, блок тегов, календарь, поиск и т.д.
Создание произвольного меню, рассмотренное в части №6, и виджетов является очень интересным, поскольку открывает перед разработчиками тем WordPress шикарные возможности: нам нужно лишь забронировать место под меню и виджет, а заказчик темы уже сам наполнит их через админку WordPress и сможет в любой момент отредактировать.
Обращайтесь к нам – мы создадим оригинальную тему WordPress на заказ!