Сайдбар WordPress. Шаблон с нуля — Урок №3

Понятием сайдбар WordPress обозначают то место в шаблоне, куда добавляются виджеты. Чаще всего это панель сбоку от основной части страницы с контентом, отсюда и название sidebar, то есть дословно в переводе — «боковая колонка». Однако в структуре шаблона WordPress сайдбар может быть и в другом месте, чаще всего несколько штук в ряд под основным контентом. Давайте разберемся, как он подключается и используется в WP.

Сайдбар WordPress. Шаблон с нуля — Урок №3

За вывод бокового сайдбара в WordPress обычно отвечает файл sidebar.php. После того, как мы разбили html шаблон на составные части шаблона, содержание нашего сайдбара следующее:


Short news

    
    
    
    
    
    

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

    Для начала добавим новую функцию в functions.php. Здесь сразу нужно будет указать, сколько сайдбаров будет использоваться в теме оформления. Если только один, допустим боковая колонка справа, как в рассматриваемом варианте, то вставляем следующий код:

    if ( function_exists('register_sidebar') )
    register_sidebar(array(
                    'before_widget' => '',
                    'before_title' => '',
                    'after_title' => '',
                    'after_widget' => ''
            ));
    

    Если несколько, то такой:

    if (function_exists('register_sidebars')) 
            register_sidebars(3, array(
                    'before_widget' => '',
                    'before_title' => '',
                    'after_title' => '',
                    'after_widget' => ''
            ));
    

    Разбираем подробно: цифра в строке

    register_sidebars(3, array(

    отвечает как раз за количество подключаемых сайдбаров, в данном примере мы включили поддержку трех. Далее:

    before_widget — оформление верхней части сайдбара перед кодом вставки виджета
    before_title и after_title — оформление заголовка виджета (до и после него)
    after_widget — оформление нижней части сайдбара после кода вставки виджета

    В редактируемую нами тему достаточно добавить только первый верхний код.

    Теперь в шаблон, в sidebar.php, надо добавить код вывода сайдбара и виджетов.

    
    здесь код, который будет отображаться, если ни один из виджетов не активирован
    
    
    

    Данное условие говорит, что если есть функция

    dynamic_sidebar

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

    Применяем эту вставку к нашему шаблону и получаем:

    
    
    
    
    
    

    Сохраняем изменения и проверяем работу — для этого зайдем в админку в меню «Внешний вид > Виджеты» и у нас должна появиться колонка для добавления виджетов (на скрине она зеленая).

    Сайдбар WordPress. Шаблон с нуля — Урок №3

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

    Разные сайдбары на страницах WordPress

    Теперь немного усложним задачу. Допустим, что мы хотим показывать разные сайдбары на разных страницах. Допустим, на главной c одними виджетами, а на внутренних с другим. В таком случае нам надо добавить еще один сайдбар и задать ему отдельно имя и идентификатор. Добавим в код php для файла функций два параметра name и id, и получится вот что:

    register_sidebar(array(
            'name' => 'Сайдбар для домашней страницы',
            'id' => 'home',
            'before_widget' => '',
            'after_widget' => '',
            'before_title' => '',
            'after_title' => '',
        ));

    Теперь создадим новый файл sidebar-inner.php для внутренних страниц. И добавим в него код.

    
     
        
        
           
              
           
    
    

    В этом условии говорится, что если есть виджеты в нашем новом сайдбаре «home», то показывать их, если нет, то показывать стандартный сайдбар, тот же, что и на главной. При этом уже на внутренней странице single.php нужно будет подсоединять не файл sidebar.php, а sidebar-inner.php при помощи кода:

    Если пофантазировать, то можно создавать какие угодно конструкции из сайдбаров WordPress — разную конструкцию макета для каждого типа страниц и придавать им разное оформление.

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

    Сайдбар WordPress. Шаблон с нуля — Урок №3
    Все подробности о курсе

    Оцените статью