Новые сайдбары Супер плагин WordPress. Сайдбар и виджеты WordPress Wordpress добавление сайдбара
Сайдбар, он же, боковая панель, играет важную роль в дизайне сайта. Как правило, его главное назначение — улучшение навигации по сайту. Но вместе с тем, не всегда есть необходимость в сайдбаре. Давайте посмотрим, почему это.
В зависимости от вашей темы вы можете сделать боковую панель слева или справа. Во многих темах, вы даже можете добавить сайдбар сразу с обоих сторон. В этом случае, у вас будет три колонки. Две маленькие, и одна большая, основная.
В сайдбар, вы можете добавлять различные виджеты, в том числе, виджеты для продвижения сайта в социальных сетях. Здесь вы можете добавить форму подписки на электронную почту, добавить виджет с последними комментариями. Добавить виджет популярных или последних страниц, архивы и еще много каких виджетов существует. Ну и конечно, здесь же излюбленное место для расположения рекламы.
Но на деле, далеко не все из этих виджетов, так уж необходимы на боковой стороне. Рекламу можно расположить внутри статьи, формы подписки, после статьи. Ну а необходимость виджетов с популярными страницами, и вовсе под вопросом. Обращают ли на них внимание посетители или нет, весьма спорный вопрос. В то же время, можно добавить блоки с рекомендуемыми статьями внутрь статьи. Или после. Как это, тоже часто делается.
Недостатки использования сайдбара.
Как видите, у сайдбара есть преимущества, из-за которых его используют. Но тогда возникает резонный вопрос, а зачем его удалять?
Скорость загрузки страницы сайта , важный параметр. И вот тут мы сталкиваемся с первым недостатком сайдбаров. Если вы расположите в сайбаре виджет, то посмотрев код страницы, вы можете увидеть, что он расположен довольно близко к началу.
То есть, когда посетитель зашел на ваш сайт, ему загружается не только сама страница, но и боковые виджеты. Тем самым, сама страница, загружается медленней. И если помимо этого, у вас есть еще факторы, которые задерживают загрузку (медленный хостинг, тяжелые картинки и так далее), то в результате, посетитель может не дождаться загрузки страницы и уйти с нее. А это очень плохо.
Другой момент – боковушка отвлекает вашего посетителя от основного содержимого . И он, не дочитав статью до конца, просто перейдет на боковушку. Ну, если он уйдет по рекламе, то тоже неплохо. И тут я вас снова разочарую. Да, если человек уйдет по рекламе, то может и не плохо. А вот то, что человек не дочитает вашу статью, вот это плохо. И вот почему.
Вам наверное известно, что поисковики, что Гугл что Яндекс, очень пристально следят за поведением посетителей на сайтах. И если они видят, что большой процент посетителей, не доходят до конца страницы, то для них это будет означать одно, ваша страница – некачественная. А значит, ее и поднимать в поиске не надо.
Помимо того, что у вас может быть пессимизация от поисковиков, есть и другая проблема — меньшее количество лайков, меньше комментариев. Тут все логично, посетитель статью до конце не прочитал, значит, никаких лайков, никаких комментариев.
Если я вас до сих пор не убедил, в том, что боковая панель, не всегда хорошо, то вот вам третий фактор – мобильная версия . Сейчас уже очень большой процент заходов на сайт, идет с телефонов. И вот тут с этим сайдбаром, проблема. Он просто не будет у вас отображаться с боку. А все его содержимое, перейдет в подвал страницы. Если еще учесть, что в подвале страницы и так идут другие виджеты, то с наличием там же сайдбара, вообще будет бардак.
Как удалить сайдбар с сайта.
Установить подходящую тему.
Установите тему с одной колонкой. Есть много тем, которые позволяют добавлять и удалять боковые колонки. В их настройках, вы просто можете указать, использовать ли сайдбар.
Использовать плагин.
Самый простой, и более универсальный способ, это использование плагинов. Вот лучшие 3 плагина для того, чтобы убрать сайдбар на сайте WordPress.
1.Custom Sidebars — Dynamic Widget Area Manager
Двести тысяч установок, оценка четыре с половиной, известный разработчик. Этот плагин позволяет легко управлять и заменять боковые панели и виджеты на вашем веб-сайте WordPress. Custom Sidebars предлагает очень гибкий менеджер для управления областями виджетами и для гибкой настройки боковой панели.
2. Content Aware Sidebars – Unlimited Widget Areas
Content Aware Sidebars утверждает, что является самым быстрым и мощным плагином для управлением сайдбаром и виджетами в WordPress. Вы можете использовать этот плагин для индивидуального оформления виджета боковой панели для любой публикации, страницы или даже настраиваемого типа сообщений без необходимости исправлений программного кода. Этот плагин интегрирован с другими популярными плагинами, такими как WooCommerce, WPML и Transposh.
Что еще хорошо в этом плагине, так это поддержка русского языка. Таким образом, разобраться, как пользоваться этим плагином, проблем не составит.
3.Fullwidth Templates For Any Theme & Page Builder
Fullwidth Templates – самый простой плагин из протестированных. Минимум настроек, вы можете выбрать всего одну из трех опций, и ваша запись, будет иметь соответствующий вид (полный вид без шапки и подвала, во всю ширину, без сайдбара).
Сайдбар - часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (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.
Что такое сайдбар WordPress?
На самом деле термин ‘сайдбар (sidebar)’ может означать два абсолютно не связанных понятия в системе WordPress:
- Динамичный сайдбар (Dynamic sidebar) : контейнер для набора виджетов, которые пользователь установить через админ панел -> раздел Виджеты.
- Шаблон боковой панели (Sidebar template) : это сайдбар, который отображается шаблоном сайта.
В большинстве случаев, простые шаблоны имеют динамичный сайдбар, которые загружают все размещённые виджеты из админ панели. Этот процесс может проходить и по другому алгоритму, но чаще всего именно по этой схеме. Всё же важно понимать, что динамичный сайдбар и шаблон боковой панели – это две разные вещи. Все премиум , в основном работаю с Sidebar template.
Обычно, термин ‘сайдбар’ используют по отношению к динамичной боковой панели, о которой и пойдет речь в данной статье. Однако я буду затрагивать и шаблон боковой панели.
Больше всего во время просмотра многих тем меня разочаровало то, что разработчики не в полной мере используют преимущества наиболее мощных функций системы WordPress. Большинство тем имеют только один сайдбар, в лучшем случае два. Но ведь эти темы создадут огромные страницы с набором опций, которые спокойно можно обработать с помощью виджетов, а их содержание поместить прямо в шаблон. Я предпочитаю использовать много сайдбаров в теме, для создания гибкого многофункционального сайта.
Регистрируем, добавляем и создаём сайдбар WordPress
Многие темы часто не соответствуют стандартам качества, поэтому, если Вы разработчик шаблонов, давайте убедимся, что Вы относитесь к этому вопросу серьёзно. Создание соответствующего динамичного сайдбара WordPress
– наиболее важная часть процесса, потому что то, что Вы в нем установите, будет связано со всеми другими функциями боковой панели.
Чтобы создать один или несколько сайдбаров, Вам придёться регистрировать их через файл functions . php Вашей темы, у каждой темы существует свой файл, который содержит все настройки шаблона. В файл functions . php Вы можете дописывать или удалять настройки темы.
Код, представленный ниже, демонстрирует, как можно создать сайдбар в системе WordPress, воспользовавшись функцией register_sidebar () . В данном случае мы будем создавать боковую панель под названием ‘primary’, которая станет примером для дальнейшей работы.
"primary", "name" => __("Primary"), "description" => __("Описание сайдбара (видно в админ панеле)."), "before_widget" => "
", "before_title" => "", "after_title" => "
")); /* Вы можете повторить функцию register_sidebar() для других виджетов, поле id должно быть уникальным (primary, secondary, moiwidget и так далее. */ } ?>add_action ("widgets_init" , "registriruem_sidebari" ) ; function registriruem_sidebari () { /* Регистрируем "primary" сайдбар. */ register_sidebar ( array ( "id" = > "primary" , "name" = > __ ("Primary" ) , "description" = > __ ("Описание сайдбара (видно в админ панеле)." ) , "before_widget" = > "" , "before_title"
=
>
" "after_title" = > "" /* Вы можете повторить функцию register_sidebar() для других виджетов, поле id должно быть уникальным (primary, secondary, moiwidget и так далее. */ |
Как Вы видите регистрация сайдбара очень простая задача, если есть информация как это делать.
Аргументы для создания динамичной боковой панели dynamic_sidebar ()
Функция register_sidebar () признает только один параметр, он называется $ args и содержит множество аргументов, определяющих, каким образом боковая панель с её виджетами должна быть обработана. Далее рассмотрим примеры как использовать аргументы вручную.
Id
Аргумент id , возможно, один из самых важных аргументов, который необходимо прописать (посмотрите пример некачественно написанного кода ниже и поймете, почему Вы обязательно должны прописать его). WordPress будет использовать id , чтобы назначить виджеты для определенного сайдбара, а Вам понадобится id , чтобы в дальнейшем заполнить боковую панель – сайдбар.
Каждый id должен быть уникальным. WordPress, по умолчанию, пропишет его для sidebar - $ i (где $ i
//наш id виджета, который назначается только один раз "id" => "primary",
Name
Вы можете прописать любое имя, которое, на Ваш взгляд, наилучшим образом представит Ваш сайдбар WordPress . Чаще всего сайдбарам присваивают имена, по которым пользователь сможет определить, какие аспекты темы, он затрагивает (например левый или правый сайдбар). Этот аргумент может быть интернационализирован (т.е. локализован для других языков). Поэтому удостоверьтесь, что Вы прописали правильный текстовый домен во время подготовки темы для перевода. Аргумент, по умолчанию, прописывается как Sidebar $ i (где $ i – это порядковое число созданного сайдбара).
//name виджета, в примере использую Primary, как название id виджета "name" => "Primary",
description
Аргумент description впервые был представлен в версии WordPress 2.9. Этот аргумент позволяет описать Ваш виджет, описание отображается в админ панеле в разделе Виджеты. Этот аргумент, по умолчанию, прописывается в пустой строке. Он также может быть интернационализирован (т.е. писать кирилицой или другими языками).
//description будет видно в разделе виджеты "description" => __("Виджет для левой колонки на сайте"),
before_widget
Аргумент before_widget это открывающий элемент виджета, назначенного для сайдбара. Это также должен быть элемент уровня блока HTML разметки (например, тег < li > , < p > , < div > и т. д.). У этого аргумента есть пара особенностей, которые Вы можете прописывать например в id = "" или class = "" : атрибуты id = "" прописываются так: (% 1 $ s ) и атрибуты class = "" так: (% 2 $ s ) .
По умолчанию, WordPress пропишет их как элемент списка: < li id = "%1$s" > . Я не сторонник создавать элементы списка виджетов сайдбара. Я всегда использую < div > . Я не сторонник создавать элементы списка виджетов сайдбара. Последнее время я использую, так как в случае отсутствия виджета на сайте у Вас не будут отображаться лишние HTML теги, впрочем далее мы рассмотрим как от них избавиться.
after_widget
Аргумент after_widget довольно просто создать. Это закрывающий элемент для виджета, назначенного для сайдбара. Вам просто необходимо закрыть элемент, прописанный для аргумента before_widget . По умолчанию, WordPress пропишет его, как < li > .
"after_widget" => "
[ crayon - 5e1ff7d787fb8042608178 inline = "true" ] "after_widget" = > "" , |
before_title
Большинство виджетов отображают заголовок, если пользователь заносит его. Аргумент before_title это открывающий элемент заголовка виджета. По умолчанию, WordPress прописывает его как < h2 > . Для использовать теги < h2 > не стоит, в данном случае подойдут теги < h3 > и < h4 > . Для интуитивности и читабельности кода не делайте названия классов без дефисов, чтобы Вам самим было удобнее прочитать название, очень актуально, если не работали с сайтом некоторое время.
after_title
Аргумент
after_title
это закрывающий элемент, прописанный в аргументе
before_title
. По умолчанию, WordPress прописывает его как
<
/
h2
>
.
Необходимо удостовериться, что его значение совпадает со значением, прописанным в аргументе before_title .
"after_title" => ""
"after_title" = > "" |
Отображение динамичного сайдбара dynamic_sidebar()
Когда создание сайдбара завершено, можно заняться его отображением внутри темы. В системе WordPress для этого создана функция под названием < a title = "Codex Wordpress функция dynamic_sidebar()" href = "http://codex.wordpress.org/Function_Reference/dynamic_sidebar" target = "_blank" rel = "nofollow" > dynamic_sidebar () < / a > . Данная функция всегда запрашивает параметр $ index , который может одновременно располагаться как в аргументе id , так и в аргументе name (прописанный во время создания сайдбара). Несмотря на то, что технически возможно использование обоих, гораздо безопаснее использовать прописанный Вами id .
Используя в одном из Ваших шаблонов код, представленным ниже, Вы можете расположить сайдбар primary , описанный чуть выше. Обратите внимание, что div с class и id Вы можете поменять на своё усмотрение и прикрутить к ним различные css стили .
< div id = "id-vidgeta-primary" class = "moi-saidbar" > // вызываем функцию отображения сайт бара
< / div > |
Обычно этот код располагается в файле sidebar - primary . php , о котором Вы узнаете чуть позже, когда мы будем говорить о шаблонах боковой панели. Однако dynamic_sidebar () может быть вызван в любом месте Вашей темы.
- Делаем и
Отображение контента по умолчанию (default content)
Некоторые разработчики тем отображают собственный контент, если пользователь не закрепил ни одного виджета в конкретном сайдбаре. Чтобы проверить наличие виджетов в сайдбаре, воспользуемся условным тегом is_active_sidebar () .
Точно так же, как функция dynamic_sidebar () , использующаяся для наполнения сайдбара, функция is_active_sidebar () всегда запрашивает параметр $ index , который должен являться ID сайдбара, который Вы проверяете.
С помощью кода, представленного ниже, можно проверить наш сайдбар primary на наличие виджетов. Если виджеты имеются, мы отобразим их, если нет – отобразим контент, который специально заготовили.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div > |
Не отображаем боковую панель без виджетов
В предыдущем разделе показано, как расположить недостающий контент, когда определенный сайдбар не активен, но у Вас также есть возможность полностью свернуть (ничего не отображать) сайдбар, если боковая панель не активна.
Мы снова будем использовать, функцию is_active_sidebar () , чтобы проверить сайдбар primary на наличие виджетов.
< div id = "id-vidgeta-primary" class = "moi-saidbar" >
< / div >
|
Кстати говоря, здесь можно придумать несколько интересных вещей. Например, Вы можете создать ширину динамичного сайдбара для своего контента, зависящую от того, какие сайдбары активны, а какие нет. Подробнее об этом в в следующей статьях.
Шаблоны боковой панели – сайдбара
Мы затронули все аспекты, касающиеся создания и работы с динамичным сайдбаром, но нужно заметить, что существуют и другие интересные функции. Поэтому давайте обратим внимание на шаблоны сайдбара.
Шаблон сайдбара используется для размещения кода динамичного сайдбара (посмотрите ‘Отображение динамичного сайдбара’ выше). В среднем, все темы WordPress имеют один шаблон под названием sidebar . php . Если Ваша тема имеет одну боковую панель – этого шаблона достаточно.
Шаблоны сайдбара заполняются внутри темы при помощи функции get_sidebar () .Представленный ниже код я обычно использую, чтобы заполнить файл sidebar . php .
[ crayon - 5e1ff7d788042260898923 inline = "true" ] |
get_sidebar () также всегда запрашивает параметр $ name , который позволит заполнить более конкретные шаблоны. Например, код, представленный ниже, запрашивает файл шаблон sidebar - primary . php .
[ crayon - 5e1ff7d788051693571425 inline = "true" ] |
Для наведения полного порядка в Вашей теме и разделения кода необходимо создать конкретный шаблон для каждого динамичного сайдбара. Я предполагаю, чтобы для начала Вы создали два динамичных сайдбара с уникальными id : primary и secondary . Для лучшей организации создайте два файла: sidebar - primary . php и sidebar - secondary . php .
Вам понадобится код, представленный ниже для создания обоих шаблонов.
[ crayon - 5e1ff7d788066428860015 inline = "true" ]
|
Выше представлен традиционный код, который я использую для создания шаблонов. Вы можете немного изменить его для максимального соответствия Вашим личным требованиям. Всё же необходимо убедиться, что Вы используете функцию get_sidebar () , когда заполняете шаблон сайдбара.
Запомните, что шаблоны боковых панелей не всегда отображают динамичные сайдбары. Они могут технически содержать кодированный контент пользователя, способный отражать всё, что угодно. Также помните, что Вы можете разместить динамичный сайдбар практически в любом файле Вашего шаблона, для отображения на разных страницах сайта.
Неудачный код сайдбара
Существует ряд повторяющихся от кода к коду недочетов, которые я не приемлемы на хороших сайтах. Не все они, конечно, технически неправильны, но могут привести к неисправностям или просто являются лишней нагрузкой кода.
Проблема 1: беспорядочный код, сброшенный в functions . php
Если Вы разрабатываете темы, необходимо знать, что WordPress built-in hooks , работает с помощью hooks. Необходимо не просто хорошо знать их, важно их использовать. Самая большая проблема, которую я обнаружил, заключается в том, что код попросту сбрасывается в functions . php . Вам следует создавать функцию регистрации сайдбара, а затем прикреплять её к widgets_init. Вы можете посмотреть пример того, как это сделать выше, в разделе ‘Регистрация и создание динамичного сайдбара’.
В качестве заметки: Вы должны забыть о том, что можно просто сбрасывать код в functions . php . Всегда используйте функцию hooks в WordPress, это обеспечит стопроцентное выполнение Ваших функций.
Проблема 2: отсутствие прописанных ID
Важно понимать, если неясно прописывают id, это обязательно повлечет за собой определенные последствия. Когда Вы используете register_sidebar () или register_sidebars () , не прописывая индивидуальный id , WordPress автоматически создает индикаторы id , подсчитывая количество уже созданных сайдбаров. И, казалось бы, всё замечательно. Но это большая ошибка. Ведь когда плагин или child theme создает новый сайдбар, боковой панели присваивается id 1 (если она первая в потоке), что приводит к изменению id всех других сайдбаров. Когда пользователь обратится к сайдбару, он увидит, что все его виджеты закреплены за другим сайдбаром.
Виджеты закреплены за динамичным сайдбаром, в соответствии с его id . Если id меняется, виджеты также перемещаются. Вот почему так важно надлежащим образом прописывать id во время создания сайдбара. Выше, в разделе ‘Регистрация и создание динамичного сайдбара’, Вы можете посмотреть, как сделать это правильно.
Ещё одним преимуществом четкого прописания id является то, что Вы точно знаете, что id предназначен для использования в других функциях, таких как dynamic_sidebar () и is_active_sidebar function_exists () нет никакой необходимости. Как упоминалось ранее в этой статье, динамичные сайдбары существуют примерно с 2007 года. Использовать такой тип проверки можно только для обеспечения обратной совместимости. Однако большинство тем не имеют обратной совместимости, да и я не рекомендую использовать её со времен появления предыдущей версии.
Один из распространенных типов проверки на существование функции register_sidebar () представлен ниже. Забудьте об этом типе проверки и просто создайте сайдбар.
if (function_exists("register_sidebar"))
dynamic_sidebar
include
(TEMPLATEPATH
.
"/sidebar.php"
)
;
Это не лучший способ отображения сайдбара в теме. В системе WordPress есть функция get_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()).
Это муторная работа, и для не знающих может быть проблемой, но если вам это действительно нужно, тогда разберетесь.
