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

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

сайдбар wordpress

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

<!-- SHORT NEWS FROM TWITTER -->
<div class="rightAbout">
<h3>Short news</h3>
<ul id="twitter_update_list">
<li></li>
</ul>
<!-- START EMBED TWITTER -->
<script src="js/twitter.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/YIW.json?callback=twitterCallback&amp;count=5" type="text/javascript"></script>
<!-- END EMBED TWITTER -->
</div>
<!-- END SHORT NEWS FROM TWITTER -->

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

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

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

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

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

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

register_sidebars(3, array(

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

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

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

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

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
здесь код, который будет отображаться, если ни один из виджетов не активирован <?php endif; ?>

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

dynamic_sidebar

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

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

<!-- SHORT NEWS FROM TWITTER -->
<div class="rightAbout">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<?php endif; ?>
</div>
<!-- END SHORT NEWS FROM TWITTER -->

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

работа с виджетами wordpress

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

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

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

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

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

<!-- SHORT NEWS FROM TWITTER -->
<div class="rightAbout">
 <?php if ( is_active_sidebar( 'home' ) ) { ?>
    <?php if ( !dynamic_sidebar('home') ) : ?>
    <?php endif; ?>
       <?php } else { ?>
          <?php get_sidebar(); ?>
       <?php } ?>
</div>
<!-- END SHORT NEWS FROM TWITTER -->

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

<?php include (TEMPLATEPATH . '/sidebar-inner.php'); ?>

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

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

HTML в шаблон WordPress своими руками
Все подробности о курсе

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

  • Александр, когда же будут следующие уроки?
    Очень понравился окончательный сайт оркестра, который Вы делаете в видеоуроках. Надеюсь, Вы нас доведете до полного результата, с установкой фона и создания собственного дизайна, как на musicatempora.ru.

  • Александр приветствую!
    У меня такой вопрос. у меня тема с одним(правым) сайт-баром.
    Я хочу еще левый сайт бар.можно ли это сделать?
    Менять тему нихочу.Как это сделать? *HELP*

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

  • Вот сейчас экспериментирую над блогом. У меня проблемка есть два сайдбара сверху и снизу, а хочется ещё справа и слева сделать сайдбары для размещения рекламы. Не подскажите подробно что нужно сделать для этого. Сам блог можете посмотреть ссылка указана. Заранее благодарю. Всё перепробовала, а толку ноль. Создаются только в тех местах где уже есть виджеты.
    Можете расписать и скинуть на почту. =)

    • Для этого нужно:

      1. Зарегистрировать новые сайдбары в functions.php
      2. Создать файл php сайдбара с вызовом функции его отображения по его id
      3. Вставить код вызова данного файла через include в шаблон, например в index.php

  • Спасибо попробую. Хороший у вас сайтик. Вы сами программист? Или как это говорится «свободный художник»

  • 1. Зарегистрировать новые сайдбары в functions.php 2. Создать файл php сайдбара с вызовом функции его отображения по его id 3. Вставить код вызова данного файла через include в шаблон, например в index.php
    Тут надо ещё что-то. Всё сделано как написано, а виджеты всё равно только сверху или снизу.

    • Значит что-то неправильно сделали — больше ничего не нужно )

  • Я использую плагин wp-e-commerce , он отображается справа в сайдбаре. Но название товаров слишком длинные и получается не красиво. Как можно сделать сайд бар шире, чтобы название помещалось в одну строку?

    • 1. Откройте html код страницы в браузере (В Хром клик правой кнопкой — Просмотр кода страницы)
      2. Найдите текст заголовка любого из виджетов
      3. Посмотрите, какой стиль задан для div, внутри которого находится весь виджет
      4. Найдите этот класс в style.css и отредактируйте его ширину

  • В моем случае в файле стилей вообще отсутствует обозначенный класс «span-7», который в коде стоит перед заголовком виджета.
    Как прописать файл style.css — подскажете?

    Похож только вот этот фрагмент кода

    .wp-pagenavi span.pages {
    font-size: 15px !important;
    padding: 4px 8px !important;
    color: #232323 !important;
    background: none !important;
    border: 1px solid #fff !important;
    }
    .wp-pagenavi span.current {
    font-size: 15px !important;
    padding: 4px 8px !important;
    font-weight: bold;
    color: #fff !important;
    background:#C12B03 url(images/wp-pagenavi-bg.png) left top repeat-x !important;
    border: 1px solid #AE2703 !important;
    }
    .wp-pagenavi span.extend {
    font-size: 15px !important;
    padding: 4px 8px !important;
    background:transparent !important;
    color: #232323 !important;
    background: none !important;
    border: 1px solid #fff !important;
    }

    • В каждой теме оформления используются свои классы для оформления. Можете вообще свой в шаблоне задать и в style.css его оформить

  • Да, Вам как спецу, легко переделывать шаблоны, а мне, как не спецу, приходиться долго копаться, чтобы использовать Ваши советы. Но Вам всё же большое спасибо, не Вы виноваты в нашей непонятливости.

  • у меня есть два файла шаблона сайдбара — sidebar.php и sidebar1.php

    я хочу, чтобы во все записи категории id=20 выводился sidebar1.php, а во все остальные sidebar.php

    можно ли это сделать?

    • Можно. Используйте код:

      < ?php if ( in_category(20) ) { include 'sidebar1.php'; } else { include 'sidebar.php'; } ?>

      • Большое спасибо =)) я в принципе понимал, как это сделать на уровне логики, но не знал синтаксиса. видимо пора учить основы php ))

        • Александр, добрый вечер. Не подскажите, у меня вопрос про сайдбар. Блог на ВП. У меня проблема в том, что сайдбар слез вниз при открытие статьи и находиться между статьей и подвалом. На главной странице и рубриках стоит где надо — справо. Не подскажите где ковырять шаблон? И плагины могли на это дело повлиять?

          Заранее большое спасибо.

          • Здравствуйте! Ищите в single.php, где-то возможно при редактировании этого файла шаблона лишний раз закрыли блок /div. Плагины тоже могли повлиять

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