ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Сайдбары WordPress, создание сайдбара WordPress

.

saydbar

Всем привет!

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (footer). Сайдбары WordPress не исключение. Разница лишь в том, что в WordPress сайдбар это зона, в которой автоматически выводятся виджеты. Сайдбаров в WordPress можно создать неограниченное количество, но для примера я создам два сайдбара, слева и справа от основной зоны контента.

Регистрация сайдбаров WordPress

Для того, что-бы сайдбары для начала отобразились в админке, нам нужно их зарегистрировать. Другими словами добавить в файл functions.php код:

 

Теперь заходим в адмику, в раздел «виджеты» и смотрим результат. Вот картинка того, что получилось у меня:

sayd

Но просто так сайдбары не появятся во Front-End, на лицевой стороне сайта, их нужно будет вызывать. Но об этом немного ниже.

Разбираю вышепреведенный код для создания сайдбаров WordPress

Тут не так все сложно, как на первый взгляд кажется.

  • 'name' => __( 'Правая колонка', 'fwbs' ) — название зоны виджетов, можете писать любое название, только аккуратно между скобками, смотрите на скрине видно, где оно выводится;
  • 'id' => 'sidebar-1' — ID уникальный идентификатор, присваиваемый сайдбару, у всех сайдбаров должен быть свой, отличный от других ID;
  • 'description' => __( 'Правая боковая колонка', 'fwbs' ) — описание, аналогично названию зоны виджетов;
  • 'before_widget' => '<aside id="%1$s" class="widget %2$s">' — HTML тег открывающий сайдбар, обозначающий начало зоны сайдбара, плюс к которому присваивается динамически класс widget;
  • 'after_widget' => '</aside>' — закрывающий зону сайдбара HTML тег. Как мы знаем, что все HTML теги, за некоторым исключением должны быть парными (открывающий и закрывающий);
  • 'before_title' => '<h4 class="widget-title">' — заголовок виджета будет обернут в тег H4 с классом <h4 class="widget-title">, можно менять значимость заголовка H1, H2, H3, H4, H5, H6 и присваивать свои классы;
  • 'after_title' => '</h4>' — закрывающий </h4> парный тег для заголовка виджета.

Данным кодом я зарегистрировал две зоны виджетов WordPress, теперь нужно вывести их на экран.

Вывод сайдбаров WordPress

Чтобы вывести сайдбары в любом месте шаблона, логично в нужном месте прописать следующий код:

Немного пояснений по коду:

  • <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> — PHP код, который дает команду, если в сайдбаре под id=sidebar-1 находятся виджеты, то его нужно выводить на экран, если виджетов нет, сайдбар не выводится;
  • <?php dynamic_sidebar( 'sidebar-1' ); ?> — PHP код вызывающий сайдбар под id=sidebar-1 в месте, где вы его прописали в коде шаблона.

Но как можно заметить, в шаблонах WordPress код вывода сайдбаров размещают в отдельных файлах sidebar.php, а потом уже выводят контент из файла sidebar.php в нужном месте шаблона. Как мы знаем, что WordPress выводит контент динамически и шаблон сайта состоит из нескольких частей, то одной из его частей является файл sidebar.php Давайте я так и сделаю.

Создание файла sidebar.php

Сщздайте файл, например sidebar-right.php, задайте ему заголовок, и вставьте в него вышеприведенный код. Все вместе это будет выглядеть таким образом:

Как видно из примера, я дополнил код дополнительной HTML разметкой.

Теперь, чтобы вывести зону виджетов, в нужном месте остается прописать следующее:

Для левой боковой колонки соответственно создается файл sidebar-left.phpи в нужном месте шаблона выводим так:

Как говорится, найдите в коде одно отличие.

Все, сайдбары созданы, теперь осталось дело за малым, создать для них в шаблоне HTML разметку и прописать стили CSS, но это уже совершенно другая история.

Ну вот и все друзья!

БЕРЕГИТЕ СЕБЯ!

 




лайк

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

1 комментарий Сайдбары WordPress, создание сайдбара WordPress

  • Валерий сказал:

    Здравствуйте, Виктор! Я пришел к вам из Линктолинк, Вы там сделали заявку на обмен со мной ссылками. Но я вам предлагаю обмен статьями! Это более выгодно и эффективно для продвижения! Ели Вы согласны, напишите?! Буду ждать!!!

    Вот ссылка на условия по обмену статьями на моем блоге: pribylwm.ru/raskrutka-i-seo/obmen-statyami.html

    С уважением, Валерий Бородин!!!

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

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