Как добавить сайдбар в шаблон темы. Новые сайдбары Супер плагин WordPress Что такое сайдбар wordpress

02.07.2020

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

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

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

Возможно вам и не понадобится ничего менять. Изменить боковую колонку следует только в том случае, если она выглядит “криво” и неестественно. Во-первых, смотрите, чтобы сайдбар имел меньшую ширину, чем основная часть страницы, содержащая контент. Боковая колонка не является ключевой частью сайта, потому на нее не должно быть обращено много внимания – максимум она может занимать 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. Тогда вам будет легко редактировать любой элемент на страницах портала.

Сайдбар — часть практически любого сайта, размещается обычно слева, справа от зоны контента, либо перед подвалом, (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" => "",)); register_sidebar(array("name" => __("Левая колонка", "fwbs"), "id" => "sidebar-2", "description" => __("Левая колонка в футере сайта", "fwbs"), "before_widget" => "", "before_title" => "",)); } add_action("widgets_init", "fwbs_widgets_init");

Теперь заходим в адмику, в раздел «виджеты» и смотрим результат. Вот картинка того, что получилось у меня:

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

Разбираю вышепреведенный код для создания сайдбаров WordPress

Тут не так все сложно, как на первый взгляд кажется.

"name" => __("Правая колонка", "fwbs") — название зоны виджетов, можете писать любое название, только аккуратно между скобками, смотрите на скрине видно, где оно выводится;
"id" => "sidebar-1" — ID уникальный идентификатор, присваиваемый сайдбару, у всех сайдбаров должен быть свой, отличный от других ID;
"description" => __("Правая боковая колонка", "fwbs") — описание, аналогично названию зоны виджетов;
"before_widget" => "
" — HTML тег открывающий сайдбар, обозначающий начало зоны сайдбара, плюс к которому присваивается динамически класс 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, но это уже совершенно другая история. Я сейчас открыл новую рубрику

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

Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
Сайдбар в 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" => "