Добавляем свою область для виджетов в 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 } ?>

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

7 комментариев
  1. Вот вставленный код в файле page.php:

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

    Не могли бы помочь?

    1. Даже не знаю. Это стандартный код и работает он в любой теме. Попробуйте заново переустановить и очистите кэш, перед тем, как смотреть результат.

  2. Здравствуйте! Спасибо за статью. Есть ли возможность изменить размер области виджета?

    1. Добрый день. За это отвечает css. Через стили можете изменить размер, стиль и т.д.

  3. Спасибо за статью. Помогло!

    Брат, ты это поставь кнопку «Спасибо!» 🙂 и люди, как я, будут нажимать 🙂

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *