Создание темы с поддержкой виджетов
Доброго времени суток. Мы с Вами продолжаем создавать собственную тему для WordPress. И сегодня мы рассмотрим как сделать тему поддерживающую виджеты. Виджеты необходимы для улучшения функциональности сайта. Управляются виджеты из административной панели сайта, что и делает их привлекательным. Наиболее распространенные виджеты: подписка RSS, последние посты, категории, облако тегов, последние комментарии и др. Но для того, что бы была возможность использовать виджеты необходима тема, которая поддерживает виджеты. В данном посте мы и остановимся на создании темы для WordPress c поддержкой виджетов.
Давайте договоримся, что виджеты мы будем помещать на боковую панель, за которую отвечает файл sidebar.php.
Создадим в корне нашей темы файл functions.php. В данном файле как правило размещаются функции нашей темы. Файл functions.php расширяет функционал нашей темы.
Теперь для того, чтобы добавить поддержку виджетов в нашей теме для WordPress необходимо подключить эту возможность. Это делается в файле functions.php путем добавления следующего кода:
<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>
В функцию register_sidebar в качестве параметра мы можем передать массив данных
$args = array( 'name' => sprintf(__('Sidebar %d'), $i ), 'id' => 'sidebar-$i', 'description' => '', 'before_widget' => '<li id="%1$s">', 'after_widget' => '</li>', 'before_title' => '<h2>', 'after_title' => '</h2>' );
где
- name — имя боковой панели, по умолчанию sidebar и порядковый номер.
- id — id боковой панели, все должно быть в нижнем регистре и без пробелов
- description — описание в панели администрирование, где находиться данное место для виджетов, по умолчанию пустое.
- before_widget — подстановка HTML кода перед виджетом
- after_widget — подстановка HTML кода после виджета
- before_title — подстановка HTML кода перед заголовком виджета
- after_title — подстановка HTML кода после заголовка виджета
Теперь нам необходимо указать место в шаблоне для размещения виджетов. Мы в начале данного поста договорились о том, что размещать наши виджеты будем в sidebar. Откроем файл sidebar.php и добавим в него следующий код в то место, где хотим размещать виджеты:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?> <?php endif; ?>
В моем случае файл sidebar.php выглядит следующим образом:
<div id="sidebar"> <b>Sidebar</b> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('место') ) : ?> <?php endif; ?> </div>
Давайте посмотрим, что у нас получилось. Добавим в файл functions.php следующий код:
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name'=>'sidebar',)); ?>
Теперь в админке должно появиться место для виджетов:
Перетащите туда любой доступный виджет.
Для отображения в sidebar нашего виджета добавим в файл sidebar.php следующий код:
<div id="sidebar"> <b>Sidebar</b> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar') ) : ?> <?php endif; ?> </div>
И перейдем на наш сайт:
А теперь мы хотим, чтобы место для виджетов было в footer и в админке было описание расположения этих мест. Изменим в начале наш файл functions.php следующим образом:
<?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'name'=>'sidebar', 'description'=>'Место в левой колонке сайта')); register_sidebar(array( 'name'=>'footer', 'description'=>'Место в подвале сайта')); ?>
Давайте зайдем в админку и посмотрим, что у нас получилось:
Теперь укажем место для отображения виджетов в нашей теме для WordPress в footer. Для этого в файл footer.php в необходимое место добавим следующий код:
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('footer') ) : ?> <?php endif; ?>
Добавим какой-нибудь виджет в footer и перейдем на наш сайт:
У нас все получилось. На этом я заканчиваю статью, посвященную созданию собственной темы для WordPress с поддержкой виджетов. Если у Вас возникли вопросы пишите в комментариях я обязательно на них отвечу. И не забывайте подписываться на обновления данного блога.
[…] В областях для размещения виджетов (как добавить поддержку виджетов в теме для WordPress читайте в моей статье “Создание темы с поддержкой виджетов”) […]