Создание темы с поддержкой виджетов

Ромчик
1

Создание своей темы для WordPress

Доброго времени суток. Мы с Вами продолжаем создавать собственную тему для 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 нашего виджета добавим в файл sidebar.php следующий код:

<div id="sidebar">
    <b>Sidebar</b>
    <?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('sidebar') ) : ?>

 <?php endif; ?>
</div>

И перейдем на наш сайт:

Виджет в sidebar

А теперь мы хотим, чтобы место для виджетов было в footer и в админке было описание расположения этих мест. Изменим в начале наш файл functions.php следующим образом:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
     'name'=>'sidebar',
     'description'=>'Место в левой колонке сайта'));
 register_sidebar(array(
     'name'=>'footer',
     'description'=>'Место в подвале сайта'));

?>

Давайте зайдем в админку и посмотрим, что у нас получилось:

Добавление места для виджетов в footer

Теперь укажем место для отображения виджетов в нашей теме для WordPress в footer. Для этого в файл footer.php в необходимое место добавим следующий код:

<?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('footer') ) : ?>
 <?php endif; ?>

Добавим какой-нибудь виджет в footer и перейдем на наш сайт:

Виджет в footer и в sidebar

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

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Как создать произвольное меню в WordPress | Все о WEB программировании - 13.07.2012 в 13:59

    […] В областях для размещения виджетов (как добавить поддержку виджетов в теме для WordPress читайте в моей статье “Создание темы с поддержкой виджетов”) […]

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика