Пользовательский сайдбар в настройках темы вордпресс. Как добавить дополнительный sidebar для виджетов в WordPress? Установить подходящую тему

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

Что такое сайдбар WordPress

Правильно, по существующим правилам перевода WordPress, слова «сайдбар» в официальном переводе нет. «Родное» sidebar нужно переводить, как «область виджетов» или «боковая панель».

На практике, сайдбаром WordPress называют «область виджетов» или «боковая панель» или «боковые колонки» блога, справа и/или слева, сверху и/или снизу от основного содержания (статей или архивов) сайта. В зависимости от шаблона () на блоге может быть от 0 до 3 боковых колонок.

В боковых колонках размещаются дополнительные информационные блоки, которые назывались и называются виджеты блога (widget).

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

Именно поэтому, сайдбаром WordPress называют любое место в теме , где можно разместить виджет.

Обычно разработчики тем не создают произвольных мест для вывода виджетов, но их можно создать самостоятельно. Теперь о виджетах.

Виджеты WordPress

Многие называют виджеты основным содержанием блога. Я так далеко не захожу и придерживаюсь классического определения виджета.

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

Виджеты WordPress по умолчанию

По умолчанию, WordPress предоставляет несколько виджетов. Их 12.

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

Установленные виджеты шаблона WordPress по-умолчанию.

Виджет может иметь заголовок, и у каждого виджета есть свои настройки отражения.

Порядок виджетов в сайдбаре меняется простым перетаскиванием.

Сайдбар и виджеты WordPress – взаимозависимость

Сайдбар и виджеты WordPress взаимозависимы. Без сайдбара не будет виджетов, а без виджетов сайдбар, может быть только скучным статическим информатором.

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

©www.wordpress-abc

Еще статьи

• Первые настройки WordPress

Сайдбаром (sidebar) называется специальное поле на сайте, куда встраиваются виджеты. Иными словами — это колонка с динамическим содержимым. Практически все шаблоны имеют такие колонки и их количество может быть различным. Зачастую используется от 1 до 4 колонки.

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

Смена расположения сайдбара и основного текста

Итак, допустим, что в шаблоне, который мы используем, есть одна колонка под виджеты, то есть один сайдбар, и одна основная колонка, где размещается текст наших статей и страниц:

Пусть колонка с виджетами располагается справа, а нам нужно переместить её влево до самого края. Соответственно колонка с основным текстовым содержимым переместиться вправо до самого края.

Чтобы всё это сделать, нужно немного изменить стили. Текстовое содержимое зачастую имеет стиль #content, а содержимое с виджетами — #sidebar. Всё что нужно — это сменить свойства у первого с float: left; на float: right; и в другой последовательности для второго.

Смена расположения сайдбара в теме Twenty Twelwe

Рассмотрим всё вышесказанное на примере стандартной адаптивной темы для Вордпресс.

Для начала нам нужно зайти в 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 он представляет из себя контейнер для виджетов, который можно разместить в любом месте сайта.

Не забывайте перед внесением изменений в файлы вашего сайта делать его резервную копию для восстановления в случае неудачи. Настоятельно рекомендую на WordPress использовать .

Регистрация пользовательского сайдбара

Код регистрации сайдбара

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

Function new_widgets_init() { register_sidebar(array("name" => "Название сайдбара", "id" => "my-sidebar-1", "description" => "Краткое описание сайдбара", "before_widget" => "", "after_widget" => "", "before_title" => "

", "after_title" => "

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

Код добавьте в конец файла.

Если в вашей дочерней теме нет файла functions.php, создайте новый текстовый файл, переименуйте его в functions.php и откройте в любом текстовом редакторе (рекомендую Notepad++). Перед копированием во вновь созданный файл приведенного выше кода добавьте в первую строку открытый тег:

Закрывать тег после вставки кода регистрации сайдбара не нужно. Сохраните изменения и загрузите созданный файл functions.php в каталог дочерней темы.

Расшифровка некоторых элементов

• name - название сайдбара, которое будет отображаться в разделе «Виджеты» админ-панели WordPress. Замените текст в одинарных кавычках «Название сайдбара» на свой.
• id - уникальное имя сайдбара латиницей, идентифицирующее его при обращении к нему из кода. Замените текст в одинарных кавычках «my-sidebar-1» на свой или оставьте этот, в следующих сайдбарах можно будет увеличивать номер на единицу.
• description - краткое описание сайдбара, которое будет отображаться под его названием в разделе «Виджеты» админ-панели WordPress. Замените текст в одинарных кавычках «Краткое описание сайдбара» на свой.

После размещения представленного кода в файле functions.php в разделе «Виджеты» админ-панели WordPress появится новый сайдбар с названием, указанном для элемента name .

Добавление нового сайдбара на сайт

Код добавления сайдбара

Добавляется сайдбар на сайт с помощью следующего кода:

В одинарных кавычках (в двух местах) указывается уникальное имя сайдбара, измените его, если в коде регистрации вы использовали другое имя.

Где можно разместить код

Разместить код добавления сайдбара можно в header.php, footer.php, шаблонах страниц (page.php) и записей (single.php). Перед тем как вставлять код, скопируйте файл, который вы хотите модифицировать, и поместите его в каталог дочерней темы. Если изменяемый файл в родительской теме расположен в подкаталоге, в дочерней теме тоже необходимо создать подкаталог с таким же именем и разместить файл в нем.

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

Эту статью я специально публикую перед написанием очередной статьи по посвященной выводу сайдбара и его внедрением в шаблон. Хочу при написании урока уже иметь необходимую базу материала о сайдбарах WordPress, что бы не останавливаться и не рассказывать все до мелочей.

После небольшого отступления перейдем к нашим «баранам» и окунемся в суть работы с темами, а именно рассмотрим боковое меню WordPress.

Перед тем, как приступить к рассказу и вникнуть в код и настройки, очерчу несколько нюансов, которые вы скорее всего знаете, связанных с боковыми панелями:

Сайдбар сайта - правая или левая части сайта, отвечающая за донесение дополнительной информации и участвующая в навигации по сайту. Возможно использование и правой и левой боковой колонки одновременно.

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

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

Вывод сайдбара WordPress происходит по определенному принципу, при помощи вызова в файлах шаблона и регистрации в файле functions.php функцией register_sidebar().

Будьте внимательны, перед регистрацией сайдбара убедитесь что он ранее не был зарегистрирован. При наличии нескольких регистраций с одним и тем же id, возможно возникновение ошибок. Перед редактированием сторонних шаблонов, стоит убедиться что сайдбар не «завязан» к каким-то функционалом шаблона.

Первым делом откроем файл functions.php и напишем функцию регистрации сайдбара:

Function my_register_sidebars() { /* регистрация правого сайдбара */ register_sidebar(array("id" => "right-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Правая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "

", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

"after_title" => "

")); /* регистрация левого сайдбара */ register_sidebar(array("id" => "left-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Левая колонка", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

", // если оставить пустым, будет выводиться в

"after_title" => "

")); /* регистрация сайдбара для футера */ register_sidebar(array("id" => "footer-side", // уникальный id для сайта, назначается правому сайдбару "name" => "Нижний сайдбар", // название сайдбара, которое будет отображаться в админке "description" => "Перетяните виджеты, чтобы добавить их в сайдбар.", // описание выводимое в админке для сайдбара "before_widget" => "", // в этой и предыдущей строке мы задали контейнер в котором будет размещен сайдбар "before_title" => "

", // если оставить пустым, будет выводиться в

"after_title" => "

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

Вставив этот код в файл functions.php мы зарегистрировали сразу два сайдбара боковых - правый, левый и отдельно сайдбар для футера. Также вы можете регистрировать только один сайдбар или добавить еще по необходимости, к примеру в средину страницы.

Сайдбар зарегистрирован, теперь нужно его вывести в нужном месте. Именно этим мы и займемся далее.

Как добавить sidebar в wordpress тему

Принцип добавления сайдбаров

Если вы пишите тему для своего сайта, и регистрировали сайдбар для виджетов WordPress что бы в нем что-то находилось, тогда смело можете выводить его в нужном месте используя следующий код:

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

Мы проверили существуют ли виджеты в правом сайдбаре и вывели их на странице. По аналогии, заменяя лишь значение ID сайдбара (right-side) на нужный нам, мы сможем вывести все блоки на страницу в необходимом месте.

Куда добавить код для вывода сайдбара в WordPress

Для сайдбаров в вордпресс зарезервирован файл шаблона sidebar.php. Именно в нем в большинстве случаев описывается все необходимое (обертки панелек, условия для вывода на определенных страницах и т.д.)

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

При использовании нескольких сайд баров вам нужно будет создавать дополнительные файлы к примеру sidebar-right.php, sidebar-left.php и sidebar-footer.php.

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

Месторасположение подключения вы выбираете самостоятельно. Значение в скобках должно соответствовать названию файла (sidebar-right .php), выделено жирным.

Как убрать сайдбар в WordPress?

Я детально рассказал как добавить сайдбар в WordPress, теперь пойдем от обратного и начнем удалять. Составлю небольшой план как убрать сайдбар в WordPress (перед редактированием файлов обязательно сделайте их копии и пользуйтесь , не редактируйте с админки):

• Заходим в папку с темой и открываем следующие файлы functions.php, sidebar.php и index.php;
• ищем и удаляем регистрацию сайдбара в файле функций, как он выглядит описано выше в статье.
• переходим к файлу sidebar.php и удаляем вызов боковой колонки (нужно удалить все что связано с dynamic_sidebar(), пример так же есть выше).
• идем в индексный файл и удаляем подключение файлов сайдбара (get_sidebar()).

Это муторная работа, и для не знающих может быть проблемой, но если вам это действительно нужно, тогда разберетесь.