@sergeyzotoff +7 (960) 065-01-01 sergeyzotoff@gmail.com Sergey Zotoff
Благодаря большому количеству дополнительных плагинов и хорошей документации 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.
Таким же образом можно вывести абсолютно любой виджет в любом месте сайта, на странице рубрики, отдельного тега, и т.д.
* - обязательные поля
Один комментарий