Что такое сайдбары WordPress, и что туда можно поместить. Меняем местами сайдбар и основное текстовое поле Неудачный код сайдбара

Для начала нам нужно зайти в functions.php нашей темы. Прокручиваем страницу до конца и перед ?> вставляем этот код:

Function register_my_menus() { register_nav_menus (array("header-menu" => "Menu v Shapke", "footer-menu" => "Menu v podvale")); } if (function_exists("register_nav_menus")) { add_action("init", "register_my_menus"); }

Разберемся немножко в коде. На 4 строчке в скобках после array указываем меню:
‘header-menu’ — это название нужно для вывода меню на страницу;
‘Menu v Shapke’ — название, которое будет выводиться в админке в разделе «Внешний вид» — «Меню». Таким же образом я добавил нижнее меню(footer-menu). Через запятую перечисляем столько меню, сколько вам нужно.

Код if (function_exists(‘register_nav_menus’))… проверяет, поддерживает ли текущая версия WordPress функцию регистрации меню register_nav_menus (функция не поддерживается только в очень старых версиях).

При верстке этого шаблона я верхнее меню указал в файле header.php , так как это меню на всем сайте одно и то же. Переходим в header.php нашей темы и в том месте, где должно быть меню вставляем код:

"header-menu")); ?>

Аналогично и для футера:

"footer-menu")); ?>

Теперь нам нужно создать меню через админку. Для этого зайдем в Админку (вашсайт.ру/wp-admin). Далее во вкладке «Внешний вид» выбрать «Меню».

Создаем меню с любым названием. Я создал меню с названием «Верхнее меню».


Теперь выберем в блоке «Области темы» для Menu v Shapke наше «Верхнее меню» и нажмем «Сохранить».

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

Сайдбар нужен, чтобы в него можно было вставлять виджеты. Виджеты используют очень много плагинов и если ваша тема не поддерживает виджеты, нужно это срочно исправить.
Чтобы создать сайдбар для WordPress нужно зайти в functions.php и добавить новую функцию.

If (function_exists("register_sidebar")) { register_sidebar(array("name" => "Left Sidebar", "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); }

Пояснения:
‘name’ — название сайдбара, которое выводится в разделе «Внешний вид» — «Виджеты»
‘before_title’ — до названия виджета.
‘before_widget’ — что будет стоять до виджета. Можно поставить тег

, но я привык работать через

. Через

легче будет настроить css оформление сайдбара.
‘after_widget’ — что будет стоять после виджета. Если вы в ‘before_widget’ использовали

(как я), то указываем закрывающий тег

, если прописывали

, то используем

.
‘after_title’ — после названия виджета.

В то место, где будет находится сайдбар (у меня это sidebar.php ) вставляем:

Переходим в Админку — «Внешний вид» — «Виджеты» и добавляем несколько виджетов. Настраиваем css для красивого оформления сайдбара. Я уже при верстке знал, как будут выводится виджеты и заранее прописал оформление в style.css.

Несколько сайдбаров

Чтобы сделать несколько сайдбаров в functions.php нужно зарегистрировать пару сайдбаров.
Вот как это выглядит у меня:

If (function_exists("register_sidebar")) { register_sidebar(array("name" => "Left Sidebar", "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => "Right Sidebar", "before_widget" => "", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => "Three Sidebar", "before_widget" => "", "before_title" => "

", "after_title" => "

",)); }

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

Register_sidebar(array("name" => "Tut Luboe Nazvanie", "before_widget" => "

", "before_title" => "

", "after_title" => "

",));

А чтобы вывести сайдбар на странице нужно вставить код

«Three Sidebar» в списке сайдбаров третий, поэтому код для вывода у него будет такой:

Все сайдбары настраиваются через админку на странице «Виджеты». Вроде бы все что хотел вам рассказать — рассказал. Если у вас еще остались вопросы или что-то не получается — пишите в комментарии, обязательно поможем.

Для добавления необходимых плагинов и дополнений на страницу в WordPress необходимо просто перетащить в админке интересующий вас виджет на sidebar. Таким образом, даже новички в движке WordPress могут без осложнений видоизменить свою боковую панель (и не только её).

Порой разработчики темы предоставляют на выбор несколько возможных сайдбаров, куда вы можете перетащить widget . Но бывают и темы, где сайдбаров 1-2, и они используются чисто для нужд самой темы (то есть новые виджеты вы туда запихнуть не сможете).

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

Для начала необходимо зарегистрировать ваш сайдбар. Это можно сделать в файле functions.php в папке с шаблоном. Некоторые разработчики шаблонов создают спец. функцию по регистрации сайдбаров. К примеру, function twentyten_widgets_init() {} . Это не принципиально. Просто найди то место в коде, где происходит регистрация. Выглядит это примерно так:

Register_sidebar(array("name"=>"Site description", "before_widget" => "

"));

Как добавить свой сайдбар?

Когда найдётся участок кода, где регятся сайдбары, можете по аналогии зарегистрировать свой. Как пример:

Register_sidebar(array("name" =>"Second sidebar", "id" => "secondary-widget-area", "before_widget" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

Name — название вашего sidebar. оно будет отображаться в админке.

id — уникальный идентификатор. Он вам понадобиться при добавлении на страницу (об этом ниже).

before_widget — код/текст, который будет вставлен перед каждый виджетом.

after_widget — соответственно, код/текст, который будет вставлен после каждого виджеа.

before_title — код/текст, который будет вставлен перед заголовком виджетов.

after_title — код/текст, который будет вставлен после заголовком виджетов.

После добавления выше приведённого кода в файл, сохраните его и зайдите на страницу виджетов в административной панели. Теперь точно так же, как и с остальными сайдбарами, вы можете перетаскивать на новый необходимые виджеты. Чтобы этот сайдбар отобразился на вашем веб-сайте, вам нужно открыть соответствующий файл шаблона, а именно sidebar.php , и найти код:

Вам необходимо в том месте, где вы хотите видеть свой сайдбар, добавить его между открывающим и закрывающими тегами. Будет примерно так:

Для красивого вывода, можете включить этот код в блок:

Как вы уже наверно заметили secondary-widget-area при выводе на странице — это имя сайдбара. Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php . Теперь, редактируя файл style.css придать сайдбару нужный вид.

Иногда попадаются темы, где всего 1 сайдбар и они используются для нужд самой темы, и новые виджеты вы там разместить не сможете. Возможно вам понадобилось изменить существующий шаблон темы и добавить дополнительный сайдбар, допустим в теме он слева, а вам надо добавить еще один справа.

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

Для начала необходимо зарегистрировать новый сайдбар. Это делается в файле functions.php в папке с шаблоном. register_sidebar(array("name" =>"Новый сайдбар", "id" => "secondary-widget-area", "before_widget" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

",));

Готово, в панели управления виджетами появился новый сайдбар. Остается только немного настроить его внешний вид в файле style.css (можно скопировать вид из существующего)

Что есть что в коде

Name – название сайдбара (sidebar), оно будет отображаться в админ панели Виджеты.
id – уникальный идентификатор. Понадобиться при добавлении на страницу.
before_widget – код или текст, который будет вставлен перед каждый виджетом.
after_widget – код или текст, который будет вставлен после каждого виджета.
before_title – код или текст, который будет вставлен перед заголовком виджетов.
after_title – код или текст, который будет вставлен после заголовка виджетов.

Обратите внимание на ID, имя сайдбара, в данном случае это «secondary-widget-area». Оно должно быть точно таким же, как имя указанное при регистрации в файле functions.php.

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

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

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

/** * Регистрация сайдбаров. */ function fwbs_widgets_init() { register_sidebar(array("name" => __("Правая колонка", "fwbs"), "id" => "sidebar-1", "description" => __("Правая боковая колонка", "fwbs"), "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Левая колонка", "fwbs"), "id" => "sidebar-2", "description" => __("Левая колонка в футере сайта", "fwbs"), "before_widget" => "", "before_title" => "

", "after_title" => "

",)); } add_action("widgets_init", "fwbs_widgets_init");

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

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

• "name" => __("Правая колонка", "fwbs") - название зоны виджетов, можете писать любое название, только аккуратно между скобками, смотрите на скрине видно, где оно выводится;
• "id" => "sidebar-1" - ID уникальный идентификатор, присваиваемый сайдбару, у всех сайдбаров должен быть свой, отличный от других ID;
• "description" => __("Правая боковая колонка", "fwbs") - описание, аналогично названию зоны виджетов;
• "before_widget" => "
• "after_widget" => "" - закрывающий зону сайдбара HTML тег. Как мы знаем, что все HTML теги, за некоторым исключением должны быть парными (открывающий и закрывающий);
• "before_title" => "

  " - заголовок виджета будет обернут в тег H4 с классом

  , можно менять значимость заголовка H1, H2, H3, H4, H5, H6 и присваивать свои классы;

• "after_title" => "" - закрывающий парный тег для заголовка виджета.

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

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

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

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

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

• - PHP код, который дает команду, если в сайдбаре под id=sidebar-1 находятся виджеты, то его нужно выводить на экран, если виджетов нет, сайдбар не выводится;
• - PHP код вызывающий сайдбар под id=sidebar-1 в месте, где вы его прописали в коде шаблона.

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

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

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

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

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

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

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

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

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

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

/** * Регистрация сайдбаров. */ function fwbs_widgets_init() { register_sidebar(array("name" => __("Правая колонка", "fwbs"), "id" => "sidebar-1", "description" => __("Правая боковая колонка", "fwbs"), "before_widget" => "

", "before_title" => "

", "after_title" => "

",)); register_sidebar(array("name" => __("Левая колонка", "fwbs"), "id" => "sidebar-2", "description" => __("Левая колонка в футере сайта", "fwbs"), "before_widget" => "", "before_title" => "

", "after_title" => "

",)); } add_action("widgets_init", "fwbs_widgets_init");

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

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

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

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

• "name" => __("Правая колонка", "fwbs") — название зоны виджетов, можете писать любое название, только аккуратно между скобками, смотрите на скрине видно, где оно выводится;
• "id" => "sidebar-1" — ID уникальный идентификатор, присваиваемый сайдбару, у всех сайдбаров должен быть свой, отличный от других ID;
• "description" => __("Правая боковая колонка", "fwbs") — описание, аналогично названию зоны виджетов;
• "before_widget" => "
• "after_widget" => "" — закрывающий зону сайдбара HTML тег. Как мы знаем, что все HTML теги, за некоторым исключением должны быть парными (открывающий и закрывающий);
• "before_title" => "

  " — заголовок виджета будет обернут в тег H4 с классом

  , можно менять значимость заголовка H1, H2, H3, H4, H5, H6 и присваивать свои классы;

• "after_title" => "" — закрывающий парный тег для заголовка виджета.

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

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

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

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

• — PHP код, который дает команду, если в сайдбаре под id=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, но это уже совершенно другая история. Я сейчас открыл новую рубрику