Добавляем свою область для виджетов в WordPress

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

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

Регистрируем свою область виджета

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

Область виджета в сайдбаре

Первую часть кода добавляем в файл functions.php. Это функция регистрации.

// область в сайдбаре
if (function_exists('register_sidebar')){
   register_sidebar( array(
        'name'          => 'Область в сайдбаре', //название виджета в админ-панели
        'id'            => 'wsidebar-1', //идентификатор виджета
        'description'   => 'виден во всех разделах сайта', //описание виджета в админ-панели
        'before_widget' => '<aside id="%1$s" class="widget %2$s">', //открывающий тег виджета с динамичным идентификатором
        'after_widget'  => '<div class="clear"></div></aside>', //закрывающий тег виджета с очищающим блоком
        'before_title'  => '<span class="widget-title">', //открывающий тег заголовка виджета
        'after_title'   => '</span>',//закрывающий тег заголовка виджета
        ) );
}

Вторая часть кода отвечает за место вывода того или иного контента, который в данном случае помещаем в сайдбар. Открываем файл sidebar.php, находим главный блок (он обычно идет с классом или идентификатором sidebar). И сразу после него вставляем нашу функцию.

<?php dynamic_sidebar( 'wsidebar-1' ); ?>

Обращаем внимание на надпись в одинарных кавычках – это и есть идентификатор виджета. При дублировании кода не забываем менять ID в функции вывода (та, что выше). Дальше на очереди должны следовать стили оформления. Но здесь, учитывая место вывода, должны подойти стили из темы оформления.

Область виджета на страницах

Теперь все повторяем, только меняем ID и место вывода. В файл functions.php добавляем следующий код.

// область виджета на страницах
if (function_exists('register_sidebar')){
   register_sidebar( array(
        'name'          => 'Область на страницах', //название виджета в админ-панели
        'id'            => 'wsidebar-2', //идентификатор виджета
        'description'   => 'контент для страниц', //описание виджета в админ-панели
        'before_widget' => '<div id="%1$s" class="widget %2$s">', //открывающий тег виджета с динамичным идентификатором
        'after_widget'  => '<div class="clear"></div></div>', //закрывающий тег виджета с очищающим блоком
        'before_title'  => '<span class="widget-title">', //открывающий тег заголовка виджета
        'after_title'   => '</span>',//закрывающий тег заголовка виджета
        ) );
}

Открываем файл page.php и находим в нем функцию <?php the_content(); ?>. Сразу после нее можно вставить нашу функцию вызова. Код обернут в условие, в котором указан определенный ID страницы. Это значит, что только на этой странице будет выводиться контент виджета (при желании удалите условие).

<?php if( is_page('9') ) { ?>
<?php dynamic_sidebar( 'wsidebar-2' ); ?>
<?php } ?>

Область виджета в постах

Открываем файл functions.php и добавляем в него код.

// область в постах
if (function_exists('register_sidebar')){
   register_sidebar( array(
        'name'          => 'область в постах', //название виджета в админ-панели
        'id'            => 'wsidebar-3', //идентификатор виджета
        'description'   => 'контент для постов', //описание виджета в админ-панели
        'before_widget' => '<div id="%1$s" class="widget %2$s">', //открывающий тег виджета с динамичным идентификатором
        'after_widget'  => '<div class="clear"></div></div>', //закрывающий тег виджета с очищающим блоком
        'before_title'  => '<span class="widget-title">', //открывающий тег заголовка виджета
        'after_title'   => '</span>',//закрывающий тег заголовка виджета
        ) );
}

Открываем файл single.php и после функции <?php the_content(); ?> или в любое другое место вставляем код.

<?php dynamic_sidebar( 'wsidebar-3' ); ?>

Область виджета в «шапке»

В последнем случае такая же схема. Открываем файл functions.php и добавляем код.

// область в шапке
if (function_exists('register_sidebar')){
   register_sidebar( array(
        'name'          => 'область в шапке', //название виджета в админ-панели
        'id'            => 'wsidebar-4', //идентификатор виджета
        'description'   => 'контент для шапки', //описание виджета в админ-панели
        'before_widget' => '<div id="%1$s" class="widget %2$s">', //открывающий тег виджета с динамичным идентификатором
        'after_widget'  => '<div class="clear"></div></div>', //закрывающий тег виджета с очищающим блоком
        'before_title'  => '<span class="widget-title">', //открывающий тег заголовка виджета
        'after_title'   => '</span>',//закрывающий тег заголовка виджета
        ) );
}

Открываем файл header.php и после главного блока, к примеру, </header> вставляем функцию вызова. Она также имеет условие показывать содержимое только на главной странице (по желанию это условие можно удалить).

<?php if ((is_front_page()) and (!is_paged())) { ?>
<?php dynamic_sidebar( 'wsidebar-4' ); ?>
<?php } ?>

После всего этого останется сделать мелкие правки стилей, в зависимости от содержимого виджета.