Создание новой области для виджета

27 февраля 2013

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

Меню Виджеты в Вордпресс

Виджеты — это функциональные блоки, которые размещаются в специальных областях шаблона сайта и отображают результат работы функции или плагина. По умолчанию имеется набор нескольких виджетов: «Календарь», «Облако меток», «Последние записи», и т.д. При установке дополнительных плагинов этот список может пополняться.

Доступные виджеты на сайте
Например, мы установили на сайт плагин для отображения последних записей из twitter-аккаунта, а для того, чтобы отобразить этот список необходимо добавить соответствующий виджет в какую либо из доступных областей:
Области для виджетов Вордпресс
Выбираем виджет и перетаскиваем в нужную область:
Установка виджета в доступную область для отображения
После этого необходимо нажать кнопку «Сохранить» и произвести настройку виджета. После этого результат работы плагина будет отображен на страницах сайта в области, куда мы поместили виджет.
Таких областей может быть несколько, а может быть всего лишь одна.
Мы рассмотрим на примере, как создать новую область для виджета и поместить её в необходимое место шаблона.

Что необходимо реализовать?

Для одного клиентского сайта мне понадобилось разместить на главной странице большой современный слайдер, транслирующий несколько изображений с произвольным текстом проводимых акций и т.п. Слайдер должен быть виден на всех ключевых страницах сайта.
Расположение слайдера на сайте
После тестирования 30-ти различных слайдеров был выбран один, который устраивал клиента. После установки плагина в его настройках было необходимо создать новый слайдер, загрузить в него необходимые изображения, дать им описания и сопутствующий текст, проставить ссылки на целевые страницы и отрегулировать скорость и эффекты смены изображений. Конечный результат отображал на сайте виджет этого плагина.
Поскольку в используемом шаблоне были всего 2 области для виджетов — правый сайдбар и футер сайта, необходимо было создать новую область для виджета, в которую можно было бы поместить созданный слайдер.

Создание новой области для виджета

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

register_sidebar( array(
'name' => 'Sidebar-Left',
'id' => 'Sidebar-Left',
'before_widget' => '<div id="widget" class="widget">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>'
) );

Разберем этот фрагмент.
Все области для виджетов в Вордпресс, независимо от своего расположения в шаблоне, регистрируются как sidebar (сайдбар).
Функция register_sidebar с набором атрибутов сообщает ядру системы о том, сколько таких сайдбаров использовать в активном шаблоне.
Обязательные атрибуты: name и id, которые задают имя и уникальный идентификатор для области виджетов соответственно.

before_widget, after_widget — позволяют задать оформление блоку, в котором будет отображен виджет, средствами CSS,
before_title, after_title — CSS оформление для заголовка виджета.

Для того, чтобы зарегистрировать новую область для виджета, скопируем этот фрагмент кода и вставим ниже, изменив значения name и id.
Назовем новую область Slider.
Поскольку нам нужно вывести только слайдер, мы не будем никак оформлять этот блок, поэтому оставим значения before_widget, after_widget, before_title, after_title пустыми.
Фрагмент кода новой области виджета будет таким:

register_sidebar( array(
'name' => 'Slider',
'id' => 'Slider',
'before_widget' => '<div id="" class="">',
'after_widget' => '</div>',
'before_title' => '<h3 class="">',
'after_title' => '</h3>'
) );

Сохраняем файл functions.php
Заходим снова в меню «Виджеты», справа появилась новая область «Slider»:
Новая область для виджета в Вордпресс

Выводим область для виджетов в шаблоне

Когда новая область для виджетов создана, необходимо включить её отображение в нужном месте шаблона. Это зависит от задачи. В нашем случае для показа слайдера на всех ключевых страницах сайта эту область необходимо включить в файл header.php.
Открываем файл для редактирования и в нужном месте вставляем фрагмент:

<?php dynamic_sidebar( 'Slider' ); ?>

Все готово. Теперь помещаем в область виджет слайдера и смотрим, как он отображается на сайте.
Если необходимо задать отступы или выровнять слайдер, то можем поместить фрагмент в контейнер div

<div id="slider">
<?php dynamic_sidebar( 'Slider' ); ?>
</div>

и позиционировать при помощи CSS.

Таким же образом можно вывести абсолютно любой виджет в любом месте сайта, на странице рубрики, отдельного тега, и т.д.



Комментариев нет

Обязательные поля отмечены *

Добавить комментарий