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

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

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

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

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

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

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

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

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

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

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

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

Возвращает

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

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

Примеры

#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); }

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

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


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

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



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

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

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

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

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

• Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
• Сайдбар в WordPress — это любая область на сайте, в которой выводятся виджеты;

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

Единственное отличие определения сайдбара в WordPress это то, что он может находится где угодно на странице сайта (но чаще всего это боковые колонки справа и слева от контента и футер).

В этом шагу мы рассмотрим пошагово как создать два сайдбара — один в боковой колонке и один в подвале (футере) сайта.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.

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

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php:

function true_register_wp_sidebars() { /* В боковой колонке - первый сайдбар */ register_sidebar( array ( "id" => "true_side" , // уникальный id "name" => "Боковая колонка" , // название сайдбара "description" => "Перетащите сюда виджеты, чтобы добавить их в сайдбар." , // описание "before_widget" => "

" , // по умолчанию виджеты выводятся
-списком "after_widget" => "
" , "before_title" => "

" , // по умолчанию заголовки виджетов в

"after_title" => "

" ) ) ; /* В подвале - второй сайдбар */ register_sidebar( array ( "id" => "true_foot" , "name" => "Футер" , "description" => "Перетащите сюда виджеты, чтобы добавить их в футер." , "before_widget" => "

" , "after_widget" => "

" , "before_title" => "

" , "after_title" => "

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

Вот что получилось у меня на странице Внешний вид > Виджеты:

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

Шаг 2. Как отобразить сайдбары на страницах сайта?

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

В двух словах о том, для чего нужны эти функции:

• — проверяет, есть ли в сайдбаре виджеты,
• — выводит сайдбар;

Давайте теперь выведем те два сайдбара, которые мы создавали в прошлом шаге. И начнем с боковой колонки:

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

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

• Если выводимый садбар не имеет виджетов, то при помощи if и else можно задать код, который будет выполняться в этом случае:

  if ( is_active_sidebar( "true_foot" ) ) : dynamic_sidebar( "true_foot" ) ; else : // код по умолчанию на случай, если сайдбар пустой endif ;

• Не нужно использовать PHP-функцию function_exists() для функции и других функций WordPress. Просто иногда используют. Это ни к чему.
• Некоторые подключают файл sidebar.php через include() или require() . Чего вы хотите этим добиться? Увеличения производительности? Сомневаюсь, что причина медленной загрузки вашего сайта кроется именно в этом. А для подключения sidebar.php используем специально предназначенную для этого функцию

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

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

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

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

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

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

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

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

Виджеты WordPress

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

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

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

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



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





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



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



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

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

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

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

©www.wordpress-abc

Еще статьи

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