Создание своей темы WordPress – Sidebar.php

Автор: | 28.03.2019

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

Как работает сайдбар в WordPress

Откройте следующие файлы вашей темы:

  1. sidebar.php,
  2. style.css,
  3. functions.php.

В файле sidebar.php функция dynamic_sidebar( ‘sidebar-1’ ); отвечает за отображение сайдбара.

Создание своей темы WordPress – Sidebar.php
Теперь откройте functions.php и найдите функцию your_theme_name_widgets_init(), где your_theme – это название вашей темы.

Создание своей темы WordPress – Sidebar.php
В этой функции WordPress определяет всю область виджетов.

Функция register_sidebar()

Функция register_sidebar(), включает массив параметров, как вы можете видеть в приведенном выше скришоте.
name => задает имя боковой панели.
id => задает идентификатор боковой панели.
description => описание виджета.
before_widget и after_widget=> используется для обертывания каждого виджета в тег «section».

«before_title и after_title => используется для обертывания заголовка виджета внутри тега «h2».

Зайдем на наш сайт, в админ-панель Внешний вид-виджеты.

Создание своей темы WordPress – Sidebar.php
На скриншоте видно, что выделенная область это и есть наш зарегистрированный сайдбар, в который можно помещать сколько угодно виджетов.

Создание пользовательской боковой панели wordpress

Так же, как мы можем зарегистрировать сколько угодно виджетов в сайдбаре, мы можем регистрировать сколько угодно областей виджетов в functions.php, для этого нужно просто скопировать функцию register_sidebar(), задать в массиве уникальное имя, id, если нужно поменяем тэги и зададим им классы согласно нашей верстке.

Создание своей темы WordPress – Sidebar.php
Давайте создадим сайдбар под названием «Подвал» с Id “footer-first”. Сохраним изменения и зайдем в Виджеты на нашем сайте. Должен появиться новый сайдбар под названием «подвал». Можно переместить в него любой виджет из набора слева.
Создание своей темы WordPress – Sidebar.php

Как вывести сайдбар

Чтобы вывести сайдбар на странице используют функцию get_sidebar().
Если открыть, например index.php, мы увидим эту функцию в конце файла перед вызовом footer (об этом немного позже).
Чтобы вызвать наш сайдбар под названием «Подвал» на этой или любой другой странице или в подвале(footer) или в шапке (header) нужно открыть нужный файл и вставить в него следующий код:

 

   <?php

if ( is_active_sidebar( 'footer-first' ) ) :

dynamic_sidebar( 'footer-first');

endif;

?>

Где ‘footer-first‘ – id вашего сайдбара.
Зайдем в админ-панель и добавим в наш сайдбар виджеты, например календарь и произвольный текст.

Создание своей темы WordPress – Sidebar.php
В index.php вызовем сайдбар с id “footer-first” и проверим нашу главную страницу.

Создание своей темы WordPress – Sidebar.php

Создание своей темы WordPress – Sidebar.php
Как видим все получилось и виджеты появились на странице там, где мы их вставили. При желании их можно стилизовать с помощью css.

Иерархия шаблонов WordPress
Иерархия шаблонов WordPress

Для большинства пользователей WordPress — это черный ящик. Вы помещаете Read more

Правильное подключение скриптов и стилей в WordPress
подключение скриптов и стилей

Если вы веб-разработчик и создаете веб-сайты с помощью HTML и Read more

Как использовать функцию WP_Query
Как использовать функцию WP_Query

Понимание того, как использовать функцию wp_query может поднять ваши навыки Read more

Пользовательские Таксономии В WordPress
Пользовательские Таксономии В WordPress

В моей последней статье я писала о создании пользовательских типов Read more

Пользовательские типы записей WordPress (Custom Post Types)

Эта статья научит вас, как реализовать пользовательские типы записей WordPress. Read more

Создание темы WordPress — functions.php
Создание темы WordPress - functions.php

functions.php файл шаблона функций в WordPress действительно является двигателем вашей Read more

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

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

двадцать − пятнадцать =