В этой статье, я расскажу, что такое сайдбар, какие виджеты стоят по-умолчанию и как размещать виджеты в сайдбаре блога.
Что такое сайдбар WordPress
Правильно, по существующим правилам перевода WordPress, слова «сайдбар» в официальном переводе нет. «Родное» sidebar нужно переводить, как «область виджетов» или «боковая панель».
На практике, сайдбаром WordPress называют «область виджетов» или «боковая панель» или «боковые колонки» блога, справа и/или слева, сверху и/или снизу от основного содержания (статей или архивов) сайта. В зависимости от шаблона () на блоге может быть от 0 до 3 боковых колонок.
В боковых колонках размещаются дополнительные информационные блоки, которые назывались и называются виджеты блога (widget).
Со временем код WordPress дополнялся новыми функциями, и стало возможным выводить виджеты не только в боковых колонках, но и в других местах темы.
Именно поэтому, сайдбаром WordPress называют любое место в теме , где можно разместить виджет.
Обычно разработчики тем не создают произвольных мест для вывода виджетов, но их можно создать самостоятельно. Теперь о виджетах.
Виджеты WordPress
Многие называют виджеты основным содержанием блога. Я так далеко не захожу и придерживаюсь классического определения виджета.
Виджет WordPress это независимые, дополнительные блоки с разнообразным содержимом, улучшающим навигацию по сайту и его информационную привлекательность.
Виджеты WordPress по умолчанию
По умолчанию, WordPress предоставляет несколько виджетов. Их 12.
Достаточно просто. Выбираете виджет, и перетаскиваете его в нужный сайдбар или выбираете сайдбар из выезжающего слайдера при нажатии на кнопку виджета.
Установленные виджеты шаблона WordPress по-умолчанию.
Виджет может иметь заголовок, и у каждого виджета есть свои настройки отражения.
Порядок виджетов в сайдбаре меняется простым перетаскиванием.
Сайдбар и виджеты WordPress – взаимозависимость
Сайдбар и виджеты WordPress взаимозависимы. Без сайдбара не будет виджетов, а без виджетов сайдбар, может быть только скучным статическим информатором.
Все сайдбары темы регистрируются в файле fungtion.php . Виджеты выводятся на сайт хуком . Для создания и вывода виджетов, в системе есть специальный класс .
©www.wordpress-abc
Еще статьи
- Первые настройки WordPress
Сайдбар - часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (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.
Для начала нам нужно зайти в 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» в списке сайдбаров третий, поэтому код для вывода у него будет такой:
Все сайдбары настраиваются через админку на странице «Виджеты». Вроде бы все что хотел вам рассказать — рассказал. Если у вас еще остались вопросы или что-то не получается — пишите в комментарии, обязательно поможем.
Не все темы 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). Перед тем как вставлять код, скопируйте файл, который вы хотите модифицировать, и поместите его в каталог дочерней темы. Если изменяемый файл в родительской теме расположен в подкаталоге, в дочерней теме тоже необходимо создать подкаталог с таким же именем и разместить файл в нем.
Вы должны уметь изменять размер шаблона, если хотите создать хороший сайт. По умолчанию многие темы предлагают неудобные размеры каркаса шаблона. Узкие темы – это точно так же плохо, как слишком широкие. У вас должна быть “золотая середина”, которая как раз подходит для выполнения функций на сайте. Только так содержимое вашего ресурса будет корректно отображаться, и все виджеты влезут в сайдбар. В данной статье вы узнаете какие есть способы коррекции размеров боковых колонок.
Без сайдбара сайт выглядит никудышно. Если вы хотите как-то визуально разбавить содержимое страницы, вам стоит изменить шаблон Вордпресс, добавив сайдбар определенного размера. Обычно боковые колонки в нем уже установлены по умолчанию. Но не всегда ширина сайдбара является оптимальной для того или иного проекта. Разберем методы, как изменить ширину и высоту боковой части сайта Вордпресс.
Каким должен быть размер сайдбара
Возможно вам и не понадобится ничего менять. Изменить боковую колонку следует только в том случае, если она выглядит “криво” и неестественно. Во-первых, смотрите, чтобы сайдбар имел меньшую ширину, чем основная часть страницы, содержащая контент. Боковая колонка не является ключевой частью сайта, потому на нее не должно быть обращено много внимания – максимум она может занимать 40 % от видимой части страницы. Учтите, что если у вас два сайдрбара (или несколько), их ширина не должна превышать 50 % от ширины всей страницы. Лучше использовать только одну боковую колонку – так она эффективнее.
Существует “золотое правило” дизайнеров для сайтов, где используется только один сайдбар. Это правило гласит, что если на странице только одна боковая колонка, она не должна занимать большее 38 % ширины сайта. О такой загадочной цифре говорят многие именитые веб-дизайнеры (например: Джарел Ремик).
А по поводу высоты – важно, чтобы сайдбар не торчал сверху сайта. Его размер по высоте в верхнем пределе должен быть аналогичен основной части страницы. А вот нижний предел можно изменить, чтобы базовая часть сайта была длиннее. Не нужно стараться впихнуть в сайдбар все, что есть на сайте – только основное. А если информации реально много, тогда сделайте две боковых колонки, но не нужно растягивать sidebar до подвала сайта.
Как изменить размер сайдбара вручную
Теперь поговорим о том, как самостоятельно изменить размер боковых колонок и самого каркаса шаблона без использования каких-либо дополнений. Такой метод подразумевает изменение исходного кода страницы. Именно в html-тегах и заключен параметр размера шаблона. Учтите, что изменение размеров может повлечь за собой негативные последствия, если в качестве фона вы загрузили картинку специального размера. Потому лучше изменить параметры каркаса еще на стадии верстки сайта.
Параметры сайдбара в коде находятся в виде блока. Чтобы изменить размер всего каркаса, и боковых колонок в том числе, вам понадобится влезть в код, и попеременно скорректировать цифровые параметры ширины и высоты каждого элемента. А именно:
- header – отвечает за размер шапки сайта;
- bg – это основной контент, то есть та часть страницы, на которой будут размещаться статьи (именно в этой части и находится сайдбар);
- footer – это подвал сайта, то есть его нижняя часть.
Чтобы узнать размеры определенного блока, вам необходимо нажать на пункт wrapper в “Просмотре кода страницы”. Сбоку в разделе CSS браузера вы увидите цифровые значения ширины элемента в пикселях. Чтобы изменить размер всего каркаса, вам необходимо отредактировать элемент main, а после него внести изменения и в другие элементы. Рекомендуется это делать на локальном сервере, чтобы ваш сайт не “прыгал” на глазах пользователей. И, вообще, лучше таким заниматься еще до запуска интернет-проекта.
Для изменения размера сайдбара найдите примерно такую строчку
Эта строка отвечает за параметры срединной части страницы, то есть за блок с контентом и за боковые колонки. Не трогайте строку “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. Тогда вам будет легко редактировать любой элемент на страницах портала.
