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

Эта строка отвечает за параметры срединной части страницы, то есть за блок с контентом и за боковые колонки. Не трогайте строку “main” – это основная часть сайта. Вам нужно найти тег “mainnav” – это и есть боковая колонка. Все, что вам потребуется, это в CSS изменить пункт width, отвечающий за ширину – вписать другое значение размера. Можете уменьшить либо увеличить сайдбар, но не забывайте следить за приведенными выше советами по размерности, чтобы сайт отображался корректным образом.

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

Плагин для изменения размера сайдбара

Если вы не желаете пробираться во внутренности каскадных таблиц стилей, и искать элементы, которые необходимо отредактировать, тогда можете воспользоваться плагином Visual Sidebar Editor for WordPress. Это специальный модуль, который как раз предназначен для генерации боковых колонок. Он является частью более глобального инструмента Visual Composer.

Плагин Visual Composer – это натуральный конструктор страниц для Вордпресс. С ним вы сможете с нуля создать готовый шаблон. Работает модуль с шорткодами, и очень прост в установке. Если изменение размера сайдбара – это не единственное, что вам предстоит сделать, лучше скачайте плагин Visual Composer, и в качестве дополнения добавьте Visual Sidebar Editor. Если проблема только в размере боковой части страницы, тогда модуля Visual Sidebar Editor будет достаточно.

Преимущество использования плагина для изменения сайдбара в том, что он все делает автоматически. То есть вы показываете что хотите изменить по системе Drag & Drop, а модуль самостоятельно корректирует код элемента, исходя из ваших запросов. Если же вы хотите испытать свои силы в редактуре html-тегов, то плагин предоставит вам и такую возможность. Кроме того, в нем есть специальные шорткоды для внесения дополнительных функций на сайт – более 40 расширений.

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

Если вам понравилась работа Visual Sidebar Editor, задумайтесь над установкой полного комплекта дополнения – модуля Visual Composer. Тогда вам будет легко редактировать любой элемент на страницах портала.

Сайдбар в 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()).

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

Выводит на экран первую активную панель виджетов (сайдбар - панель в которой есть хотя бы один виджет). Можно указать ID или номер панели, какую именно выводить, если на сайте большее одной панели виджетов.

dynamic_sidebar() возвращает true или false, с возвращаемым результатом, также выводит на экран панель виджетов. Возвращаемое значение можно использовать, например, чтобы определить нужно ли обрабатывать код заменяющий виджеты, когда в панели нет виджетов (см. пример #1).

Возвращает

true, если панель с виджетами была найдена. false, если панели нет, или в ней нет виджетов.

Использование

$index(строка/число) Идентификатор панели, указанный в параметре id функции register_sidebar(), при регистрации панели. Если указано число, то будет искаться панель с ID sidebar-$index .
По умолчанию: 1 (sidebar-1)

Примеры

#1 Выводим сайдбар, если он есть.

Этот пример показывает как вывести первый не пустой сайдбар (при регистрации id сайдара не был указан) или если он не найден обработать указанный код:

#2 Выводим нужный сайдбар.

#3 Проверяем наличие панели и выводим её

В примере 2 мы не проверяли наличие панели и виджетов в ней. В этом примере мы проверим наличие панели, чтобы не выводить лишние HTML теги (

), если сайдбар пустой:

Множественные сайдбары

При регистрации более одной панели виджетов с помощью register_sidebar() удобнее указывать id для каждой панели.

Мы можем не указывать id, тогда панель получит порядковый номер. Но в этом случае, при редактировании темы сложно будет понять какая панель какая, ведь числа 1, 2, 3 ни о чем не говорят. Но если задать название, становится гораздо понятнее:

// --- числа // регистрация register_sidebar(); // вывод dynamic_sidebar(1); // --- Строки // регистрация register_sidebar(array("id" => "top_menu")); // вывод dynamic_sidebar("top_menu");

Из примера, видно, что со строками удобнее: заглянув в тему и увидев dynamic_sidebar("top_menu") сразу понятно, что вызывается панель для главного меню.

Аргумент id не должен содержать пробелов, заглавных букв, кириллических букв. В нем можно использовать тире - и подчеркивание _. Также он должен быть уникальным. Указывая id мы также можем указать название, описание и переводы для них:

Register_sidebar(array("id" => "top-menu", "name" => __("Top Menu", $text_domain), "description" => __("This sidebar is located above the age logo.", $text_domain),));

Заметки

• Global. Массив. $wp_registered_sidebars Registered sidebars.
• Global. Массив. $wp_registered_widgets

Список изменений

С версии 2.2.0

Введена.

Код dynamic sidebar : wp-includes/widgets.php WP 5.3.2

$value) { if (sanitize_title($value["name"]) == $index) { $index = $key; break; } } } $sidebars_widgets = wp_get_sidebars_widgets(); if (empty($wp_registered_sidebars[ $index ]) || empty($sidebars_widgets[ $index ]) || ! is_array($sidebars_widgets[ $index ])) { /** This action is documented in wp-includes/widget.php */ do_action("dynamic_sidebar_before", $index, false); /** This action is documented in wp-includes/widget.php */ do_action("dynamic_sidebar_after", $index, false); /** This filter is documented in wp-includes/widget.php */ return apply_filters("dynamic_sidebar_has_widgets", false, $index); } /** * Fires before widgets are rendered in a dynamic sidebar. * * Note: The action also fires for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param int|string $index Index, name, or ID of the dynamic sidebar. * @param bool $has_widgets Whether the sidebar is populated with widgets. * Default true. */ do_action("dynamic_sidebar_before", $index, true); $sidebar = $wp_registered_sidebars[ $index ]; $did_one = false; foreach ((array) $sidebars_widgets[ $index ] as $id) { if (! isset($wp_registered_widgets[ $id ])) { continue; } $params = array_merge(array(array_merge($sidebar, array("widget_id" => $id, "widget_name" => $wp_registered_widgets[ $id ]["name"],)),), (array) $wp_registered_widgets[ $id ]["params"]); // Substitute HTML id and class attributes into before_widget $classname_ = ""; foreach ((array) $wp_registered_widgets[ $id ]["classname"] as $cn) { if (is_string($cn)) { $classname_ .= "_" . $cn; } elseif (is_object($cn)) { $classname_ .= "_" . get_class($cn); } } $classname_ = ltrim($classname_, "_"); $params["before_widget"] = sprintf($params["before_widget"], $id, $classname_); /** * Filters the parameters passed to a widget"s display callback. * * Note: The filter is evaluated on both the front end and back end, * including for the Inactive Widgets sidebar on the Widgets screen. * * @since 2.5.0 * * @see register_sidebar() * * @param array $params { * @type array $args { * An array of widget display arguments. * * @type string $name Name of the sidebar the widget is assigned to. * @type string $id ID of the sidebar the widget is assigned to. * @type string $description The sidebar description. * @type string $class CSS class applied to the sidebar container. * @type string $before_widget HTML markup to prepend to each widget in the sidebar. * @type string $after_widget HTML markup to append to each widget in the sidebar. * @type string $before_title HTML markup to prepend to the widget title when displayed. * @type string $after_title HTML markup to append to the widget title when displayed. * @type string $widget_id ID of the widget. * @type string $widget_name Name of the widget. * } * @type array $widget_args { * An array of multi-widget arguments. * * @type int $number Number increment used for multiples of the same widget. * } * } */ $params = apply_filters("dynamic_sidebar_params", $params); $callback = $wp_registered_widgets[ $id ]["callback"]; /** * Fires before a widget"s display callback is called. * * Note: The action fires on both the front end and back end, including * for widgets in the Inactive Widgets sidebar on the Widgets screen. * * The action is not fired for empty sidebars. * * @since 3.0.0 * * @param array $widget_id { * An associative array of widget arguments. * * @type string $name Name of the widget. * @type string $id Widget ID. * @type array|callable $callback When the hook is fired on the front end, $callback is an array * containing the widget object. Fired on the back end, $callback * is "wp_widget_control", see $_callback. * @type array $params An associative array of multi-widget arguments. * @type string $classname CSS class applied to the widget container. * @type string $description The widget description. * @type array $_callback When the hook is fired on the back end, $_callback is populated * with an array containing the widget object, see $callback. * } */ do_action("dynamic_sidebar", $wp_registered_widgets[ $id ]); if (is_callable($callback)) { call_user_func_array($callback, $params); $did_one = true; } } /** * Fires after widgets are rendered in a dynamic sidebar. * * Note: The action also fires for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param int|string $index Index, name, or ID of the dynamic sidebar. * @param bool $has_widgets Whether the sidebar is populated with widgets. * Default true. */ do_action("dynamic_sidebar_after", $index, true); /** * Filters whether a sidebar has widgets. * * Note: The filter is also evaluated for empty sidebars, and on both the front end * and back end, including the Inactive Widgets sidebar on the Widgets screen. * * @since 3.9.0 * * @param bool $did_one Whether at least one widget was rendered in the sidebar. * Default false. * @param int|string $index Index, name, or ID of the dynamic sidebar. */ return apply_filters("dynamic_sidebar_has_widgets", $did_one, $index); }

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

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

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

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

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

", "after_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 придать сайдбару нужный вид.

Подвалы и сайдбары WordPress – это элементы дизайна сайта, заложенные установленным шаблоном. Сайдбар – это боковая колонка. Большинство современных шаблонов для WordPress поддерживают наличие сайдбаров. Поэтому туда можно поместить какой-то материал. А что в эти области сайта можно поставить и как это правильно сделать, мы расскажем в этой статье.

Сколько нужно сайдбаров, и что полезного туда добавить

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

Много сайдбаров показывают очевидное достоинство – больше области для какой-то полезной информации. Однако на лицо и недостаток – становится уже область, в которой будет записан основной текст. Так что, приобретая одно, теряем в другом.

Что помещать в сайдбары? Сайдбары в программном плане представляют собой область для виджетов. Поэтому в любую боковую колонку сайта можно поместить один из стандартных виджетов. О виджетах мы рассказывали . Также можно поместить туда какие-то сторонние виджеты, созданные установленными плагинами.

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

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

Кроме этого в сайдбара можно полезно поставить одно из навигационных меню. Так, если в верхнем главном меню вы показываете рубрики с подрубриками, то в боковой колонке можно вывести только подрубрики или только основные, самые интересные и читаемые рубрики.

Также ожидаемым у посетителя элементом в сайдбаре является облако меток. Оно будет эффективно, как дополнительный навигационный элемент, но работать это будет, если вы применяете метки в записях. Делать это рекомендуется. Здесь также лучше не использовать встроенный виджет меток от WordPress, а применить сторонний плагин, который отличается большей эстетичностью и обширными настройками.

Кроме этого в сайдбаре WordPress может располагаться реклама. Это одно из лучших мест для неё, так как она не разбавляется с контентом и не мешает читать, но при этом не теряется из виду и привлекает внимание. Расположение рекламы в сайдбаре называется ещё «белым» (честным) маркетингом.