Сайдбар, или боковая панель, — это пространство страницы рядом с вашим контентом. На большинстве сайтов и блогов эту панель располагают справа — так она заметна, но при этом не мешает изучать основную информацию страницы.

Обычно в сайдбаре вы можете увидеть формы подписки, ссылки на популярные статьи или улыбчивое лицо Нила Пателя, которое снится мне ночами в кошмарах.

Нужен ли сайдбар в WordPress вашему блогу?

Для начала проясню, почему я говорю именно про WordPress. Это самая популярная платформа для ведения блогов. В ней легко писать, оптимизировать и публиковать статьи. Любые изменения (в том числе и для сайдбаров) можно сделать просто с помощью плагинов - их уже более 52 000, представляете?

Нужен ли вам сайдбар? Единого мнения на этот счет нет. Самый главный довод в пользу сайдбара — он всегда на виду. Это пространство можно использовать, чтобы предлагать читателям свои продукты, подписку на блог или полезные материалы. А можно засунуть туда свое улыбчивое лицо - как Нил Патель!

Конечно, всю эту информацию можно расположить и в конце поста. Но большинство читателей могут туда просто не добраться. А сайдбар они точно увидят. Кстати, я уже писала о том, что можно сделать, чтобы ваш пост точно .

В Учебке мы решились на эксперимент. Без сайдбара дизайн блога получился чище, без шума. А все формы и предложения мы просто упрятали вниз страницы. Да, мы отважные.

Но если вы выбрали вариант с сайдбаром, эта статья для вас. Я расскажу об элементах, которые пригодятся вашему блогу, и посоветую классные плагины.

Что нужно включить в сайдбар в WordPress

Итак, давайте пройдемся по обязательным пунктам хорошего сайдбара.

1.Поиск по блогу

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

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

У WordPress есть свой поиск, но его можно улучшить плагинами. Например, Better Search или Relevanssi .

2. Форма подписки

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

Полезный совет: добавьте в форму лид-магнит. По нашему опыту такие формы лучше всего увеличивают базу подписчиков. Моя коллега Настя написала классную статью о том, как работают (в статье целая куча полезных раздаток и отсылки к Гарри Поттеру).

Для лид-форм мы обычно используем MailMunch , также можно попробовать Ninja Forms .

3. Призыв к действию

Если на целевых страницах призыв в сайдбаре только мешает пользователю и отвлекает внимание, то в блоге это самый быстрый способ нагреть лида. Естественно здесь не обязательно размещать именно призыв к покупке вашего продукта. Мы же все-таки инбаунд-маркетингом занимаемся, а не прямыми продажами.

Поставьте в сайдбар предложение попробовать продукт в демо-режиме за подписку. Так вы получите еще одного заинтересованного читателя, а у него будет возможность познакомиться с продуктом поближе. Даже если он сразу ничего не купит, вы уже можете общаться с ним рассылками и постепенно довести его до покупки.

Лучше всего призывает к действию мое лицо.

Удобно настраивать эти виджеты через плагин SiteOrigin Сборник Виджетов . Кстати, в нем еще много полезных функций для сайдбаров.

4. Подборки статей

Сайдбар — отличное место, чтобы показать читателю самые популярные статьи в блоге. Это полезно и для вас: так понятнее, какие темы больше всего интересны людям. Ведь эти материалы потом можно переупаковать и использовать как лид-магниты.

Кроме подборки популярных статей вы можете показывать и последние записи блога. Эта опция удобна для тех, кто пришел по прямой ссылке, и не видел главную страницу блога. Сразу из сайдбара читатель сможет перейти к свежим записям. Вы сэкономите человеку время, а он увеличит вам просмотры страниц.

Настроить ленту для Facebook вы можете через плагин Easy Facebook Feed .

6. Рубрики и метки

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

Плагинов для этих целей много, попробуйте, к примеру, NS Category Widget или Multicolumn Category Widget .

Итак, среди всего разнообразия виджетов для сайдбара блога я советую вам разместить:

• поиск;
• форму подписки;
• призыв к какому-нибудь действию;
• подборку популярных или свежих статей;
• ссылки на соцсети;
• рубрики и метки блога.

Какие виджеты в сайдбаре блога используете вы? Может, я что-то упустила? Напишите комментарий, давайте обсуждать!

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

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

Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA

Чтобы лучше понять, что такое сайдбар на сайте, разберем простой пример. Когда вы покупаете бытовую технику, например, холодильник, вам обязательно предложат сопутствующие товары: стабилизаторы, переходники, контейнеры и прочее. Также консультант обязательно расскажет о действующих скидках и акциях, подскажет, где найти пылесос, а в каком разделе находятся утюги.

Ту же функцию выполняет и sidebar: рассказывает о похожих товарах, акциях, проводит по ресурсу.

Многие разработчики задаются вопросом, что разместить в сайдбаре сайта. Его можно использовать для размещения информационных и навигационных материалов.

Для чего нужен сайдбар

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

Сайдбар можно использовать по-разному:

• В качестве навигации.
• В качестве рекламного блока.
• Расположить здесь виджеты для быстрого доступа к разделам.
• Расположить информационные блоки.
• Предлагать дополнительные услуги и товары.
• Расположить полезные инструменты: строку поиска, корзину и так далее.

Количество сайдбаров

• 1 сайдбар. Когда интерент-сайты только набирали обороты, наибольшей популярностью пользовались варианты с одним сайдбаром. Сегодня они не утратили актуальности.

• 2 сайдбара. Чаще их применяют для интернет-магазинов или корпоративных ресурсов. Как правило, это быстро развивающиеся сервисы, которые хотят предоставить своим клиентам как можно больше полезной информации.
• 3-4. Вспомогательные панели располагаются по бокам, а также внизу и вверху. Важно не перестараться и не сделать элементы маленькими, иначе пользователям будет неудобно просматривать сайт со смартфона и прочих гаджетов.
• 0. Можно и полностью отказаться от сайдбара, однако по функциональности такой ресурс будет несколько уступать. Лучше «на запас» оставить для него место при разработке.

Как сделать сайдбар привлекательным

Чтобы sidebar был действительно полезным, в первую очередь, он должен быть заметным. Чтобы добиться желаемого результата нужно следовать следующим рекомендациям:

Размеры

Первостепенное значение имеет ширина. Боковая панель не должна затмевать основной контент. 20-30% от ширины области контента - оптимальный показатель. Суммы всех сайдбаров не должна быть более 50% от ширины области контента. По высоте боковая панель должна целиком помещаться на экран, без прокручивания.

Графические изображения и цветовая палитра

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

Шрифт

Из этой статьи вы узнаете все о сайдбарах: нужны ли они, сколько боковых панелей должно быть на сайте, с какой стороны их делать, какие элементы должны в них быть.

Зачем говорить о боковых панелях сайтов

Сайдбар или боковая панель - часть структуры веб-страницы, которая находится с правой или левой стороны и содержит функциональные, информационные и конверсионные элементы.

В боковых колонках вебмастера публикуют стандартные элементы. Вот примеры:

• Навигационное меню.
• Кнопки фолловинга.
• Виджеты социальных сетей.
• Рекламные блоки.
• Виджеты последних публикаций.
• Виджеты популярных публикаций.
• Формы подписки.
• Биография автора или информация о компании.
• Ссылки на архивы.

Смотрите, что получается: владельцы сайтов помещают в сайдбары стандартные элементы, но найти две одинаковые боковые колонки на разных ресурсах сложно. Речь не идет о различиях во внешнем виде и размерах.

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

В блогах «Текстерры», HubSpot и MOZ нет сайдбара. У «Безумных Котиков», Cossa и Webpromoexperts боковая панель справа. У «Ленты.ру» и Nielsen полноценный сайдбар слева. Есть примеры сайтов и блогов с двумя и более боковыми панелями.

А нужны ли вообще боковые панели? Какие функции они выполняют, как эффективно их использовать, каким должен быть идеальный сайдбар? Давайте разбираться.

Нужна ли боковая панель на сайте

У «Безумных Котиков» боковая панель находится справа. На внутренних страницах в ней есть форма подписки, информация о «Котиках» и меню навигации по категориям.

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

Даже если на вашем сайте есть сайдбар, почти половина пользователей его не видит. На сайтах с адаптивным дизайном при просмотре с мобильных устройств боковая панель перемещается в нижнюю часть экрана.

Если пользователи смартфонов и планшетов не видят сайдбар, нужен ли он пользователям десктопов? Чтобы ответить на этот вопрос, нужно определить функциональность этого элемента.

Боковая панель структурирует страницу при просмотре на экране стационарного ПК. Благодаря этому выделяются зона основного контента и вспомогательная область. Структура помогает пользователям мгновенно сканировать страницу и находить нужные данные. Например, сразу после приземления на страницу блога в ЖЖ пользователь знает, где находится основная информация, а где можно найти меню, ссылки на другие публикации и архивы.

Благодаря боковой панели владелец сайта получает возможность опубликовать на странице вспомогательные элементы без ущерба для основного контента. Меню, конверсионные формы, списки последних публикаций и даже реклама меньше отвлекают пользователя от чтения, оформления заказов или других действий в главной области страницы.

У структурирования страницы есть побочные эффекты. Пользователи активнее взаимодействуют с зоной основного контента, чем со вспомогательным блоком. Например, на тестовой площадке с боковой колонкой справа кликабельность рекламы AdSense под основным контентом составляет 0,87 %.

CTR рекламных блоков в сайдбаре не превышает 0,1 %. В боковой колонке реклама находится на первом экране. То есть пользователь видит ее сразу после приземления на страницу. В области основного контента блок AdSense находится под публикацией. Чтобы увидеть его, серферу нужно скроллить почти до конца страницы.

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

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

Например, сайдбар в блоге известного маркетолога Хайди Коэн по способности привлекать внимание успешно соревнуется с зоной главного контента. В боковой панели этого ресурса работают целых 14 элементов.

Стоит ли использовать сайдбар? Да, если вы хотите улучшить юзабилити для пользователей десктопов. В боковой колонке можно поместить основное или дополнительное навигационное меню. Благодаря сайдбару вы получаете пространство для публикации вспомогательных виджетов, например, плагинов социальных сетей, форм подписки, архивов и ссылок на популярные публикации.

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

Сколько сайдбаров должно быть на сайте

Ни одного или один. Использовать больше одной боковой колонки в эпоху мобильного веба и перегруженности пользователей информацией не нужно. Даже один сайдбар занимает десятки процентов площади страницы. Если использовать две боковые панели, они занимают до половины полезного пространства страницы. Это ухудшает условия для взаимодействия с основным контентом.

Обратите внимание на внутренние страницы сайта «Ведомостей». Полноценная боковая колонка находится справа. В левой части страницы находятся врезки и анонсы связанных публикаций. Эти элементы похожи на второй сайдбар.

В результате главный контент оказывается буквально втиснутым между вспомогательными объектами. Очевидно, что это негативно влияет на пользовательский опыт. Читателю приходится буквально искать глазами следующий абзац, так как он теряется на фоне анонсов и врезок слева. Кроме того, анимированная реклама, анонсы и даже яркие кнопки шеринга справа отвлекают от чтения.

Сравните внутренние страницы сайта «Ведомостей» со страницами публикаций «Лайфхакера». На этом сайте одна боковая колонка справа. В ней есть реклама и блок лучших публикаций. Анонсы статей выносятся под публикацию в блок рекомендаций.

Интересным способом решил проблему сайдбара Александр Алаев . На главной странице его блога есть боковая колонка со стандартными виджетами. На страницах публикаций сайдбара нет. Это позволяет пользователям сфокусироваться на основном контенте.

Но Александр допустил распространенную ошибку. Он использовал шаблон страницы без боковой колонки, а не специальную тему без сайдбара. В результате строка получилась слишком длинной, а это негативно сказывается на читабельности контента.

Не используйте больше одного сайдбара. Это ухудшает пользовательский опыт: отвлекает посетителей, снижает читабельность контента.

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

Где должен быть сайдбар: справа или слева

Возможны оба варианта. Выбирайте предпочтительный в соответствии с типом сайта, потребностями пользователей, задачами, которые должна решать боковая колонка.

Используйте боковую колонку справа, чтобы пользователи фокусировались на основном содержимом страницы. Эта рекомендация справедлива для контент-проектов: личных и корпоративных блогов, отраслевых ресурсов. Сайдбар справа используют vc.ru, Cossa, «Лайфхакер» и другие популярные проекты.

Тезисное обоснование использования правой боковой колонки:

• Пользователь должен фокусировать внимание на основном контенте.
• В сайдбаре находится второстепенная или вспомогательная информация.
• При необходимости пользователь осознанно найдет меню навигации или архив на правой панели.
• Конверсионные элементы эффективнее работают, если находятся в главном контенте.

Применяйте левый сайдбар, если хотите привлекать больше внимания пользователей к опубликованной в нем информации. Это актуально для интернет-магазинов. Они публикуют в левой колонке навигационные элементы: меню категорий товаров и фильтры.

Боковая колонка слева - отличное решение для веб-сервисов. Пользователям удобнее, когда меню управления и навигации находятся в левой части экрана. Обратите внимание на сервисы Google и «Яндекса», например, Gmail, Tag Manager, «Метрику». В веб-интерфейсе этих служб навигационные элементы находятся в левом сайдбаре.

Левый сайдбар часто используют большие контент-проекты. Сайты СМИ помещают на левой боковой панели меню навигации. Яркий пример - «Лента.ру». Также издания публикуют боковой колонке ссылки на актуальные или популярные публикации и рекламные блоки.

Следующие тезисы объясняют преимущества боковой панели слева:

• Пользователь должен обращать внимание на информацию в боковой колонке даже в ущерб основному контенту.
• Меню навигации и управления должно быть на самом видном месте. Пользователь сможет перемещаться по сайту, не отвлекаясь от главной информации.
• Рекламный блок или конверсионная форма в сайдбаре слева заметнее. Ради монетизации можно пожертвовать интересами пользователя.

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

Хотите аргумент в пользу сайдбара слева? В блоге Nielsen Norman Group боковая колонка расположена с левой стороны. Эта компания собаку съела на юзабилити сайтов.

Какую информацию стоит публиковать в сайдбаре

Боковая панель отнимает площадь у основного контента веб-страницы. Чтобы жертва не была напрасной, публикуйте в сайдбаре полезные для пользователей функциональные элементы и информацию. Что именно может понадобится пользователю в боковой колонке сайта?

Элементы навигации и управления

Это едва ли не единственный элемент, который сам по себе оправдывает использование боковой колонки. Навигационное меню улучшает юзабилити любого сайта: от СМИ или блога до интернет-магазина и веб-сервиса.

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

У «Ленты.ру» в боковой колонке находится главное и единственное меню навигации. На страницах категорий сайта «Связного» в сайдбаре находятся несколько навигационных элементов. В боковой колонке сайта «Евросети» опубликованы навигационные ссылки на основные категории товаров.

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

Социальные виджеты

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

Насколько эффективны кнопки подписки на новости в соцсетях? Выше упоминался эксперимент в блоге VideoFruit, в ходе которого кликабельность виджетов в сайдбаре составила 0,3 %. На тестовой площадке за 30 дней я получил 10 переходов с блока «Следи за мной» в социальные паблики.

CTR блока кнопок в боковой колонке тестовой площадки за 30 дней составил 0,097 %. Низкая кликабельность говорит о неэффективности социального виджета в качестве инструмента привлечения посетителей в паблики только в конкретном случае.

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

В боковой колонке сайтов часто можно увидеть виджеты социальных сообществ, например, плагин «Страница» или виджет страницы «Вконтакте» . Социальные плагины этого типа обычно содержат конверсионный элемент, например, кнопку «Подписаться» или «Нравится».

Благодаря визуальной привлекательности и относительно большому размеру социальные плагины должны быть более эффективными по сравнению с блоком «Следуй за мной». Так ли это на самом деле?

Для эксперимента виджет страницы «Вконтакте» был установлен в боковую колонку тестового ресурса. За период с 8 апреля по 7 мая сайт посетили 10 234 человека. За этот период с помощью виджета на страницу подписался один пользователь. CTR кнопки «Подписаться на новости» составил 0,009 %.

Еще три человека перешли с сайта в сообщество «Вконтакте» по ссылкам виджета. Общую картину это не меняет - для тестовой площадки социальный плагин оказался неэффективным инструментом.

На иллюстрации выше отображаются графики просмотров пользователей «Вконтакте» и участников группы. По всей видимости, счетчик считает просмотром каждое посещение страницы с виджетом залогиненными «Вконтакте» пользователями.

Например, 9 мая статистика зафиксировала 101 просмотр виджета пользователями «Вконтакте». Тестовую площадку в этот день посетили 350 человек. Если бы речь шла об активных просмотрах, с социальным плагином должны целенаправленно взаимодействовать почти 30 % посетителей сайта. Это нереально.

Получается, социальные плагины в сайдбаре бесполезны? Нет, так как нельзя экстраполировать результаты тестового ресурса с посещаемостью 300 – 400 человек в сутки на все сайты. Кроме того, социальный виджет служит не только для конверсии посетителей в подписчики страницы.

Во-первых, плагин в сайдбаре может повысить визуальную привлекательность страницы и сделать ее более информативной. Обратите внимание на трансляции ленты в «Твиттере» на сайтах СМИ. Во-вторых, социальный виджет можно считать пузомеркой. Владелец сайта демонстрирует посетителю популярность ресурса в соцсетях.

Информация об авторе или о компании

Рассказ об авторе и идейном вдохновители можно увидеть на боковых панелях ресурсов, связанных с Нилом Пателем: neilpatel.com и quicksprout.com. Из русскоязычных коллег информацию о компании в колонке справа предлагают многократно упомянутые «Котики».

Господин Патель утверждает, что его биография в сайдбаре помогает строить сообщество и повышает лояльность пользователей. Нил допускает публикацию информации об авторе под статьей, но считает этот способ неэффективным. Он объясняет это тем, что не все пользователи читают материал или листают страницу до конца.

Информация о Пателе на его сайтах - это социальные доказательства и продающий элемент одновременно. Другие блогеры и компании могут брать на вооружение этот инструмент. Обязательно протестируйте разные варианты изображений. Например, портрет трех котов на сайте «Котиков» выглядит гораздо лучше фото Пателя на сайте Quicksprout. Фото Нила сильно отвлекает от чтения, а рисунок котов вызывает положительные эмоции и не раздражает.

Конверсионные элементы

В качестве конверсионных элементов в сайдбаре чаще всего используют формы подписки. Примеры можно увидеть на сайтах и в блогах Webpromoexperts, Cossa, Searchengines.ru, Shopolog и других.

Эффективны ли формы подписки в боковой колонке? По данным сервиса рассылок Aweber , коэффициент конверсии формы подписки на конкретном сайте составила 0,4 %. Всплывающее окно с формой подписки на этом же сайте обеспечило конверсию 5,5 %. Брайан Харрис из VideoFuit заметил, что статичная форма подписки в сайдбаре обеспечивает коэффициент конверсии 0,3 %. Плавающая форма подписки в боковой колонке обеспечила рост конверсии до 0,8 % .

То есть коэффициент конверсии формы подписки в представленных случаях составил менее 1 %. Стоит ли публиковать конверсионный элемент в боковой колонке с учетом низкой эффективности этого инструмента? Решайте сами. Только не забудьте об упомянутых выше экспериментах VideoFruit и Impact, в ходе которых отказ от сайдбара повысил коэффициент конверсии страниц на десятки процентов.

Реклама

Сайты СМИ и блогеры очень часто публикуют в сайдбарах рекламу. Более того, системы контекстной рекламы считают размещение блоков в сайдбаре эффективным. AdSense рекомендует публиковать объявления на боковой панели сразу под меню навигации.

По моим наблюдениям, рекламные блоки AdSense в сайдбаре неэффективны. За несколько месяцев тестирования прямоугольник 300 на 250 обеспечил CTR 0,06 %, а небоскреб 300 на 600 обеспечил кликабельность 0,11 %. Реклама в блоке рекомендуемого контента, который находится под публикацией, обеспечила CTR 0,87 %.

Nielsen утверждает, что привычка вебмастеров размещать рекламу в правой боковой колонке заставляет пользователей избегать всех элементов в сайдбаре . Поэтому эксперты Nielsen не рекомендуют публиковать на боковой панели не только рекламу, но и любые визуальные элементы, которые напоминают баннеры и объявления.

На вашем сайте есть боковая колонка (sidebar), а вы хотели бы, на некоторых своих страничках ее отключить, тогда вам просто необходимо прочитать данную статью.

Скачать исходники для статьи можно ниже

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

Данная инструкция состоит из 6 шагов .

Шаг 1. Создаем отдельный файл для шаблона страницы.

За отображение внешнего вида страниц отвечают следующие файлы шаблона вашей темы: page.php, index.php.

Поэтому чтобы не писать код индивидуального шаблона с нуля, просто скопируем файл page.php и будем исправлять в нем код, после переименуем его например в файл shirokiishablon.php (можно придумать и другое название данного файла).

Для этого заходим через программу FileZilla на FTP-cервер вашего сайта, далее входим в вашу текущую тему:

/public_html (или WWW)/wp-content/themes – в этой папке находится все установленные на вашем сайте темы.

В данном примере моя текущая тема будет называться iGames, поэтому я вхожу в папку /iGames.

Здесь строка “Template Name:” нужна, чтобы wordpress распознал файл как индивидуальный шаблон, “shirokii” – это название вашего будущего индивидуального шаблона.

Шаг 2. Убираем сайдбар (sidebar, боковая колонка).

Sidebars подключаются в шаблоне вашей страницы с помощью следующего кода:

Находим данную строчку в коде и удаляем ее. В большинстве тем она должна быть в конце кода.

В принципе можно пропустить шаг 3 и шаг 4 данной статьи, и вы получите страницу без сайдбара, но текст не будет заходить на область бывшей боковой колонки (sidebar), то есть это будет выглядеть как то так:

Шаг 3. Изменение стиля страницы.

Чтобы текст отображался на всю ширину страницы, необходимо изменить его стиль оформления.

Для этого находим следующую строчку в коде:

",

[ crayon - 5c768d7d09e3f248512164 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 - 5c768d7d09eb8483399175 inline = "true" ]

get_sidebar () также всегда запрашивает параметр $ name , который позволит заполнить более конкретные шаблоны. Например, код, представленный ниже, запрашивает файл шаблон sidebar - primary . php .

[ crayon - 5c768d7d09ec6478168119 inline = "true" ]

Для наведения полного порядка в Вашей теме и разделения кода необходимо создать конкретный шаблон для каждого динамичного сайдбара. Я предполагаю, чтобы для начала Вы создали два динамичных сайдбара с уникальными id : primary и secondary . Для лучшей организации создайте два файла: sidebar - primary . php и sidebar - secondary . php .

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

[ crayon - 5c768d7d09edb040475198 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 () , с помощью которой можно легко это сделать. Всегда пользуйтесь ей, как это показано в образце выше, в разделе ‘Шаблоны боковой панели – сайдбара’. Вам стоит использовать эту функцию, потому что хук