Процесс создания сайта, аналогичен сборке конструктора. Программист способен расставить интересующие информационные блоки в нужном порядке и нужном месте.
Основные блоки используемые в 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’» (в нашем случае «Виджеты в конце статьи»).
Если с этим разделом все понятно, переходим к самому интересному и разберемся как вставить новую область виджетов в разные места шаблона сайта.
Как вставить виджет WordPress
На этом этапе уже можно добавлять виджеты в созданную только что новую область, но на сайте пока что они отображаться не будут.
Для того, чтобы добавления отображались на сайте, в файлах шаблона следует вставить код:
<?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;
- контент;
- подвал сайта.
Для наглядности, изобразил схематически те места, где будут установлены виджеты.
Как добавить виджеты в WordPress в «шапку» сайта
Начнем с шапки сайта. Чтобы добавить новую область в шапку сайта, следует отредактировать два файла: 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, виджет будет добавлен в шапке сайта.
Как вывести виджет WordPress в «Sitebar» сайта
Выведем виджет в 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; ?>
Какое количество хотите добавить виджетов, столько раз и прописываем код. После всех сохранений, виджеты появятся в шаблоне.
Добавить виджеты на страницу WordPress
В вордпрессе есть возможность создавать статические страницы. На этих страницах, при необходимости, так же можно добавить виджеты.
Чтобы добавить новую область виджетов на статических страницах сайта, отредактируем: 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; ?>
После сохранения внесенных изменений, шаблон сайта будет выглядеть вот так:
На этом все. Весь шаблон размечен, остается добавить интересующие виджеты в нужное место и продолжить работать над сайтом.
Как убрать виджет WordPress
Все со временем изменяется и то что было важно и актуально вчера, может быть уже не актуально сегодня. Поэтому, разработчик должен уметь не только добавлять виджеты, но и удалять не нужные.
Удалить виджет в вордпресс очень легко. Мы не полезем в код, а вновь перейдем «Внешний вид» → «Виджеты». Активируйте интересующую область виджетов и нажмите на виджет, который следует удалить.
Появится небольшое окно настроек с кнопками. Одной из кнопок, будет «Удалить». Нажимаем на нее и виджет удален с сайта.
Остались вопросы? Задавайте их в комментариях, а у меня на этом все.