Создание сайдбаров WordPress. Сайдбары WordPress, создание сайдбара WordPress Пользовательский сайдбар в настройках темы вордпресс

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

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

Давайте выберем в редакторе темы файл function.php . Для подключения сайдбара к ядру WordPress используется хук widgets_init .

Add_action("widgets_init", "theme_slug_widgets_init");

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

Сайдбар подключает функция register_sidebar() . Мы можем зарегистрировать свой собственный сайдбар, который будет показываться на другой тематической странице. Для этого скопируйте код регистрации в function.php дефолтного сайдбара, прямо из редактора кода в админке и вставьте внизу файла.

Register_sidebar(array(
"name" => esc_html__("Мой Sidebar", "my_theme"),
"id" => "sidebar-my",
"description" => esc_html__("Добавьте свои виджеты.", "my_theme"),
"before_widget" => "",
"after_widget" => "",
"before_title" => "

",
"after_title" => "

",
));

Функция register_sidebar() принимает несколько настроек, в кодексе WordPress перечислены все настройки, практически все они уже используются в шаблоне. Точно такой же код, вы можете скопировать прямо из примера в кодексе, он ничем не отличается от стартовой темы.

Надо изменить некоторые параметры у нового сайдбара:

Дать ему новое название "Мой Sidebar"

"name" => esc_html__("Мой Sidebar", "my_theme"),

Параметр id должен быть уникальным, назовем его - sidebar-my

"id" => "sidebar-my"

Описание сайдбара придумаем то же своё - "Добавьте свои виджеты"

"description" => esc_html__("Добавьте свои виджеты.", "my_theme"),

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

На скриншоте вы видите созданный новый сайдбар с нашим уникальным заголовком, id и описанием. Теперь в новый сайдбар вы можете перетащить нужные вам виджеты.

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

После регистрации, нам надо вывести новый сайдбар на странице contact.php , созданной на основе пользовательского шаблона на этом уроке . У страницы с контактами пока нет сайдбара.

Сделаем копию файла sidebar.php и переименуем в - sidebar-contact.php . В коде нашего сайдбара произведем замену, в передаваемых параметрах заменим id дефолтного сайдбара - "sidebar-1" , на id нового сайдбара - "sidebar-my" .

Теперь подключим на странице контактов наш новый сайдбар. В параметрах, пропишем какой сайдбар надо подключить, указываем свой "my" , если содержимое скобок оставить пустым, то на странице выведется дефолтный сайдбар.

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

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

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

register_sidebar() регистрирует панель (место, контейнер) для виждетов и формат вывода для каждого виджета: html тег заголовка, html тег до и после виджета. Зарегистрировав панель, в админ-панели появится место, куда можно помещать виджеты. Разместив виджеты в панели, мы сможем вывести панель с виджетами в шаблоне с помощью функции dynamic_sidebar() , (см. пример 2).

Функцию нужно подключать к событию widgets_init .

Функция поддержки виджетов: add_theme_support("widgets") должна быть активирована для темы, в functions.php. Если этого нет, то register_sidebar() активирует её автоматически.

#2 Зарегистрируем панель виджетов для главной страницы сайта

Добавим код в functions.php:

Function register_my_widgets(){ register_sidebar(array("name" => "Боковая панель на главной странице", "id" => "homepage-sidebar", "description" => "Выводиться как боковая панель только на главной странице сайта.", "before_widget" => "

", "after_widget" => "

", "before_title" => "

", "after_title" => "

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

В файл home.php вставим вывод панели:

Вы можете купить недорогие репины в Пинтерест с помощью сервиса Doctor SMM . На сайте Вам будет предложен выбор любого необходимого количества материала. К тому же, Вы сможете развивать не только посты, но и всю страницу целиком, сделав заказ еще и на подписчиков.

Заметки

• Global. Массив. $wp_registered_sidebars Stores the new sidebar in this array by sidebar ID.

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

С версии 2.2.0

Введена.

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

sprintf(__("Sidebar %d"), $i), "id" => "sidebar-$i", "description" => "", "class" => "", "before_widget" => "

", "after_widget" => "

\n", "before_title" => "

", "after_title" => "

\n",); /** * Filters the sidebar default arguments. * * @since 5.3.0 * * @see register_sidebar() * * @param array $defaults The default sidebar arguments. */ $sidebar = wp_parse_args($args, apply_filters("register_sidebar_defaults", $defaults)); if ($id_is_empty) { _doing_it_wrong(__FUNCTION__, sprintf(/* translators: 1: The "id" argument, 2: Sidebar name, 3: Recommended "id" value. */ __("No %1$s was set in the arguments array for the "%2$s" sidebar. Defaulting to "%3$s". Manually set the %1$s to "%3$s" to silence this notice and keep existing sidebar content."), "id", $sidebar["name"], $sidebar["id"]), "4.2.0"); } $wp_registered_sidebars[ $sidebar["id"] ] = $sidebar; add_theme_support("widgets"); /** * Fires once a sidebar has been registered. * * @since 3.0.0 * * @param array $sidebar Parsed arguments for the registered sidebar. */ do_action("register_sidebar", $sidebar); return $sidebar["id"]; }

На чтение 3 мин. Опубликовано 29.11.2016

Привет! Мы продолжаем разбирать самые интересные и самые полезные плагины для сайта WordPress! Сегодня вы узнаете о Супер полезном плагине, который позволит вам создавать новые сайдбары для своего сайта, в неограниченном количестве! Вы сможете выводить сайдбары в любом месте вашего сайта. Добавлять сайдбары на сайт можно с помощью простого шорткода или php кода. Сайдбары можно будет очень просто добавлять в записи, страницы, виджеты, боковые панели, подвал сайта (footer), заголовок сайта (header) и т.д.

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

Добавить сайдбар виджет плагин WordPress

Установить плагин вы сможете прямо из админ-панели WordPress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, после установки и активации плагина, перейдите на страницу: Боковые панели – Добавить новую . Укажите название для нового сайдбара. Нажав по полю “Select content type” вы можете выбрать где конкретно будет отображаться новый сайдбар. Если вы выберите тип – страницы или записи, то вы сможете выбрать на каких конкретно страницах будет отображаться сайдбар.

Далее, внизу страницы справа, в поле “Action” вы можете выбрать значение – Shortcode / Template Tag . У вас появится шорткод и php код, которые нужно вставить в то место сайта, где и будет отображаться созданный вами сайдбар. В поле “Visibillity” можно выбрать пользователей, для которых будет отображаться данный сайдбар.

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

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

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

Вы должны уметь изменять размер шаблона, если хотите создать хороший сайт. По умолчанию многие темы предлагают неудобные размеры каркаса шаблона. Узкие темы – это точно так же плохо, как слишком широкие. У вас должна быть “золотая середина”, которая как раз подходит для выполнения функций на сайте. Только так содержимое вашего ресурса будет корректно отображаться, и все виджеты влезут в сайдбар. В данной статье вы узнаете какие есть способы коррекции размеров боковых колонок.

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

Каким должен быть размер сайдбара

Возможно вам и не понадобится ничего менять. Изменить боковую колонку следует только в том случае, если она выглядит “криво” и неестественно. Во-первых, смотрите, чтобы сайдбар имел меньшую ширину, чем основная часть страницы, содержащая контент. Боковая колонка не является ключевой частью сайта, потому на нее не должно быть обращено много внимания – максимум она может занимать 40 % от видимой части страницы. Учтите, что если у вас два сайдрбара (или несколько), их ширина не должна превышать 50 % от ширины всей страницы. Лучше использовать только одну боковую колонку – так она эффективнее.

Существует “золотое правило” дизайнеров для сайтов, где используется только один сайдбар. Это правило гласит, что если на странице только одна боковая колонка, она не должна занимать большее 38 % ширины сайта. О такой загадочной цифре говорят многие именитые веб-дизайнеры (например: Джарел Ремик).

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

Как изменить размер сайдбара вручную

Теперь поговорим о том, как самостоятельно изменить размер боковых колонок и самого каркаса шаблона без использования каких-либо дополнений. Такой метод подразумевает изменение исходного кода страницы. Именно в html-тегах и заключен параметр размера шаблона. Учтите, что изменение размеров может повлечь за собой негативные последствия, если в качестве фона вы загрузили картинку специального размера. Потому лучше изменить параметры каркаса еще на стадии верстки сайта.

Параметры сайдбара в коде находятся в виде блока. Чтобы изменить размер всего каркаса, и боковых колонок в том числе, вам понадобится влезть в код, и попеременно скорректировать цифровые параметры ширины и высоты каждого элемента. А именно:

• header – отвечает за размер шапки сайта;
• bg – это основной контент, то есть та часть страницы, на которой будут размещаться статьи (именно в этой части и находится сайдбар);
• footer – это подвал сайта, то есть его нижняя часть.

Чтобы узнать размеры определенного блока, вам необходимо нажать на пункт wrapper в “Просмотре кода страницы”. Сбоку в разделе CSS браузера вы увидите цифровые значения ширины элемента в пикселях. Чтобы изменить размер всего каркаса, вам необходимо отредактировать элемент main, а после него внести изменения и в другие элементы. Рекомендуется это делать на локальном сервере, чтобы ваш сайт не “прыгал” на глазах пользователей. И, вообще, лучше таким заниматься еще до запуска интернет-проекта.

Для изменения размера сайдбара найдите примерно такую строчку