Прежде всего давайте уточним несколько общих моментов про сайдбары:
- Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
- Сайдбар в 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"
=> ""
,
"before_title"
=> ""
, // по умолчанию заголовки виджетов в
"
)
)
;
/* В подвале - второй сайдбар */
register_sidebar(
array
(
"id"
=> "true_foot"
,
"name"
=> "Футер"
,
"description"
=> "Перетащите сюда виджеты, чтобы добавить их в футер."
,
"before_widget"
=> ""
,
"before_title"
=> "
"after_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 используем специально предназначенную для этого функцию
Для начала нам нужно зайти в 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" => "
", "after_title" => "
",)); }Пояснения:
‘name’ — название сайдбара, которое выводится в разделе «Внешний вид» — «Виджеты»
‘before_title’ — до названия виджета.
‘before_widget’ — что будет стоять до виджета. Можно поставить тег
‘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" => "
", "after_title" => "
",)); register_sidebar(array("name" => "Right Sidebar", "before_widget" => "", "after_title" => "
",)); register_sidebar(array("name" => "Three Sidebar", "before_widget" => "", "after_title" => "
",)); }Как вы уже заметили, для добавления еще одного сайдбара нужно добавить код:
Register_sidebar(array("name" => "Tut Luboe Nazvanie", "before_widget" => "
", "after_title" => "
",));А чтобы вывести сайдбар на странице нужно вставить код
«Three Sidebar» в списке сайдбаров третий, поэтому код для вывода у него будет такой:
Все сайдбары настраиваются через админку на странице «Виджеты». Вроде бы все что хотел вам рассказать — рассказал. Если у вас еще остались вопросы или что-то не получается — пишите в комментарии, обязательно поможем.
Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (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, но это уже совершенно другая история. Я сейчас открыл новую рубрику
Сайдбар - часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (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.
Подвалы и сайдбары WordPress – это элементы дизайна сайта, заложенные установленным шаблоном. Сайдбар – это боковая колонка. Большинство современных шаблонов для WordPress поддерживают наличие сайдбаров. Поэтому туда можно поместить какой-то материал. А что в эти области сайта можно поставить и как это правильно сделать, мы расскажем в этой статье.
Сколько нужно сайдбаров, и что полезного туда добавить
При одним из главных аспектов становится количество сайдбаров. Если раньше было модным и популярным устанавливать только одну боковую колонку, то сейчас тенденции диктуют наличие двух, и даже трёх боковых колонок.
Много сайдбаров показывают очевидное достоинство – больше области для какой-то полезной информации. Однако на лицо и недостаток – становится уже область, в которой будет записан основной текст. Так что, приобретая одно, теряем в другом.
Что помещать в сайдбары? Сайдбары в программном плане представляют собой область для виджетов. Поэтому в любую боковую колонку сайта можно поместить один из стандартных виджетов. О виджетах мы рассказывали . Также можно поместить туда какие-то сторонние виджеты, созданные установленными плагинами.
В первую очередь целесообразно будет поместить в сайдбар виджет с последними опубликованными записями. Это привычно для посетителя, так как на большинстве сайтов так делают. При этом лучше не применять стандартный виджет последних постов, а выбрать какой-то сторонний, который выводит также и миниатюры.
Не обычным приёмом будет показ не последних, а похожих постов в сайдбаре. Традиционно они располагаются под статьёй, но если поместить их в боковую колонку, то можно привлечь дополнительное внимание.
Кроме этого в сайдбара можно полезно поставить одно из навигационных меню. Так, если в верхнем главном меню вы показываете рубрики с подрубриками, то в боковой колонке можно вывести только подрубрики или только основные, самые интересные и читаемые рубрики.
Также ожидаемым у посетителя элементом в сайдбаре является облако меток. Оно будет эффективно, как дополнительный навигационный элемент, но работать это будет, если вы применяете метки в записях. Делать это рекомендуется. Здесь также лучше не использовать встроенный виджет меток от WordPress, а применить сторонний плагин, который отличается большей эстетичностью и обширными настройками.
Кроме этого в сайдбаре WordPress может располагаться реклама. Это одно из лучших мест для неё, так как она не разбавляется с контентом и не мешает читать, но при этом не теряется из виду и привлекает внимание. Расположение рекламы в сайдбаре называется ещё «белым» (честным) маркетингом.
