Как добавить виджеты на Wordpress в Header, Sidebar, Content и Footer

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

Основные блоки используемые в WordPress, виджеты. В них можно поместить все что угодно. Давайте разберемся, как назначить область для вывода виджета в нужном нам месте и посмотрим как добавить виджеты.

Как создать новую область для вывода виджетов WordPress;
Как вставить виджет WordPress:
Как убрать виджет WordPress.

Как уже сказано выше, создание сайта, увлекательное занятие сродни собиранию конструктора. Дизайнеры предлагают все новые и новые идеи по расположению блоков, а программисты обязаны реализовать задуманное.

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

Чтобы создать новую область для виджета в вордпресс, предусмотрено всего два варианта:

прибегнуть к помощи плагинов;
внедрить код самостоятельно.

К плагинам у меня не однозначное отношение, поэтому там где это получается, стараюсь внедрять кодом. Реализовать задуманное, поможет редактирование файла functions.php, поэтому открываем его через админку или через ftp и добавляем первый код:

function widgets_end_content() {

register_sidebar( array(
'name' => 'Виджеты в конце статьи',
'id' => 'widget-after-post',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_end_content' );

Рассмотрим важные строчки:

function widgets_end_content() — название функции «widgets_end_content». Если планируете добавлять несколько областей виджетов, название должно быть уникальным.
‘name’ => ‘Виджеты в конце статьи’ — название виджета, которое будет отображаться в «Внешний вид» → «Виджеты», админки ворд.
‘id’ => ‘widget-after-post’ — для каждого виджета, следует задать уникальный id.

Сохраняем отредактированный файл functions.php и переходим в «Внешний вид» → «Виджеты». Появилась новая область для виджетов с названием указанным в пункте «’name’» (в нашем случае «Виджеты в конце статьи»).

Если с этим разделом все понятно, переходим к самому интересному и разберемся как вставить новую область виджетов в разные места шаблона сайта.

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

Для того, чтобы добавления отображались на сайте, в файлах шаблона следует вставить код:

<?php if ( is_active_sidebar( 'widget-after-post' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-after-post' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

, где «widget-after-post», присвоенный ранее id для данного виджета.

Ниже, разберемся подробнее, как добавить новую область виджета в разные места шаблона, а пока перечислю те блоки, которые можно добавить в виджеты по умолчанию. К ним относятся:

RSS — записи из любой ленты RSS или Atom;
Аудио — показывает аудио проигрыватель;
Галерея — показывает галерею изображений;
Изображение — показывает одиночное изображение;
Календарь — календарь записей вашего сайта;
Мета — ссылки на вход/выход, RSS-ленту и WordPress.org;
Поиск — форма поиска для вашего сайта;
Свежие записи — самые свежие записи вашего сайта;
Страницы — список страниц вашего сайта;
HTML — код — произвольный HTML-код;
Архивы — архив записей вашего сайта по месяцам;
Видео — показывает видео из медиабиблиотеки или с YouTube, Vimeo или иного провайдера;
Меню навигации — добавить меню навигации на боковую панель;
Облако меток — облако часто используемых меток;
Рубрики — список или выпадающее меню рубрик;
Свежие комментарии — самые свежие комментарии вашего сайта;
Текст — произвольный текст.

Давайте вставим любой из имеющихся виджетов в область виджетов. Для этого нужно сделать всего два действия:

Нажмите на интересующую область (та область виджетов, в которую планируете добавить виджет).
Выберите из доступных виджетов интересующий и перетяните его мышкой в область виджетов.

Вот и все! Виджет добавлен.

Здесь все просто, но мне хотелось сделать статью более информационный и преподнести ее вроде как инструкцию к действию, поэтому реализуем небольшую задумку. Добавим новую область виджета в следующие позиции шаблона:

шапка сайта;
sidebar;
контент;
подвал сайта.

Для наглядности, изобразил схематически те места, где будут установлены виджеты.

Начнем с шапки сайта. Чтобы добавить новую область в шапку сайта, следует отредактировать два файла: functions.php и header.php. Поэтому, переходим в «Внешний вид» → «Редактор тем» и в правой части выбираем файл functions.php.

Добавляем уже рассмотренный ранее код:

function widgets_header() {

register_sidebar( array(
'name' => 'Виджеты в шапке сайта',
'id' => 'widget-header',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_header' );

Сохраняем добавления, после чего открываем файл header.php.

В файле header.php добавляем код вывода виджета:

<?php if ( is_active_sidebar( 'widget-header' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-header' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

Исходя из того, что каждый шаблон сайта индивидуален, да и место, где должен быть выведен виджет так же является уникальным, с местом добавления кода, придется поиграться самостоятельно.

По завершению работы с файлом header.php, виджет будет добавлен в шапке сайта.

Выведем виджет в sitebar`е сайта, для чего отредактируем два файла: functions.php и sidebar.php.

Переходим в «Внешний вид» → «Редактор тем» и в правой части выбираем файл functions.php. Добавим код, для создания новой области виджета:

function widgets_sidebar() {

register_sidebar( array(
'name' => 'Виджеты в шапке сайта',
'id' => 'widget-sidebar',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_sidebar' );

Сохраняем изменения и переходим к sidebar.php. Добавим код вывода виджета на фронтальную сторону сайта:

<?php if ( is_active_sidebar( 'widget-sidebar' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-sidebar' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

После сохранения изменений, в шаблоне сайта появится новая область виджетов в sidebar`е.

Контент сайта самый главный элемент. В зависимости от правильного оформления, разработчик получит соответствующую реакцию пользователей.

Чтобы добавить новую область виджетов в контенте сайта, будем редактировать: functions.php и content.php.

Переходим в «Внешний вид» → «Редактор тем» и в правой части выбираем файл functions.php. Создадим новую область виджетов путем добавления кода:

function widgets_content() {

register_sidebar( array(
'name' => 'Виджеты в шапке сайта',
'id' => 'widget-content',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_content' );

Сохраняем изменения и добавляем код вывода виджета в файл content.php:

<?php if ( is_active_sidebar( 'widget-content' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-content' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

Какое количество хотите добавить виджетов, столько раз и прописываем код. После всех сохранений, виджеты появятся в шаблоне.

В вордпрессе есть возможность создавать статические страницы. На этих страницах, при необходимости, так же можно добавить виджеты.

Чтобы добавить новую область виджетов на статических страницах сайта, отредактируем: functions.php и page.php.

Открываем «Внешний вид» → «Редактор тем», в правой части выбираем файл functions.php. Внесем изменение в код:

function widgets_page() {

register_sidebar( array(
'name' => 'Виджеты в шапке сайта',
'id' => 'widget-page',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_page' );

Сохраните изменения и перейдите к файлу page.php. Здесь добавим код вывода виджета в новой области:

<?php if ( is_active_sidebar( 'widget-page' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-page' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

Осталось добавить новую область виджетов в Footer`е шаблона, поэтому отредактируем файлы: functions.php и footer.php.

Открываем «Внешний вид» → «Редактор тем», в правой части выбираем файл functions.php. Добавим новую область при помощи кода:

function widgets_footer() {

register_sidebar( array(
'name' => 'Виджеты в шапке сайта',
'id' => 'widget-footer',
'before_widget' => '<div class="chw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="chw-title">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'widgets_footer' );

Сохраните изменения и перейдите к файлу footer.php. Добавим код вывода виджета:

<?php if ( is_active_sidebar( 'widget-footer' ) ) : ?>
<div id="widget-area" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'widget-footer' ); ?>
</div><!-- .widget-area -->
<?php endif; ?>

После сохранения внесенных изменений, шаблон сайта будет выглядеть вот так:

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

Все со временем изменяется и то что было важно и актуально вчера, может быть уже не актуально сегодня. Поэтому, разработчик должен уметь не только добавлять виджеты, но и удалять не нужные.

Удалить виджет в вордпресс очень легко. Мы не полезем в код, а вновь перейдем «Внешний вид» → «Виджеты». Активируйте интересующую область виджетов и нажмите на виджет, который следует удалить.

Появится небольшое окно настроек с кнопками. Одной из кнопок, будет «Удалить». Нажимаем на нее и виджет удален с сайта.

Остались вопросы? Задавайте их в комментариях, а у меня на этом все.

Изучаете HTML и CSS? Пройдите курс от профессионального программиста!

Интересненько!
Нужно срочно изучить!

Как добавить виджеты на WordPress

Как создать новую область для вывода виджетов WordPress

Как вставить виджет WordPress

Как добавить виджеты в WordPress в «шапку» сайта

Как вывести виджет WordPress в «Sitebar» сайта

Создаем новую область виджетов в контенте сайта

Добавить виджеты на страницу WordPress

Добавление области для вывода виджета в «подвале» сайта

Как убрать виджет WordPress