27 примеров сайтов с двумя сайдбарами


Содержание

Сайдбар WordPress. Как добавить или убрать сайдбар. Быстрое создание один, два сайдбара на сайте. Руководство по использованию. опубликовал Радик Алиев категория Уроки WordPress
просмотры 94 079

Привет Друзья! Как и обещал, составил тему о сайдбарах WordPress. Это маленькое руководство по использованию и настройке сайдбаров на сайтах WordPress.

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

Принимая во внимание последние разработки, я собираюсь показать пошаговый процесс создания и использования боковых панелей для тем WordPress.

Что такое сайдбар WordPress?

На самом деле термин ‘сайдбар (sidebar)’ может означать два абсолютно не связанных понятия в системе WordPress:

  1. Динамичный сайдбар (Dynamic sidebar): контейнер для набора виджетов, которые пользователь установить через админ панел -> раздел Виджеты.
  2. Шаблон боковой панели (Sidebar template): это сайдбар, который отображается шаблоном сайта.

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

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

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

Регистрируем, добавляем и создаём сайдбар WordPress

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

Чтобы создать один или несколько сайдбаров, Вам придёться регистрировать их через файл functions . php Вашей темы, у каждой темы существует свой файл, который содержит все настройки шаблона. В файл functions . php Вы можете дописывать или удалять настройки темы.

Код, представленный ниже, демонстрирует, как можно создать сайдбар в системе WordPress, воспользовавшись функцией register_sidebar ( ) . В данном случае мы будем создавать боковую панель под названием ‘primary’, которая станет примером для дальнейшей работы.

Как создать второй сайдбар в шаблоне Default?

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

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

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

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

Если затем, надо будет немного оформить свой сайдбар, советую глянуть сюда: Дизайн сайдбара default шаблона.

Теперь немного нюансов:

  • Сайдбар добавляли на CMS MaxSite, версии 0.631
  • Разбирали на примере шаблона Default, версии 3.1

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

Меня уже давно просили сделать этот урок, да все времени не находил.

И теперь он к твоим услугам!

PS: если найдешь ошибки или будут вопросы – задавай в комментах!

Сайдбар

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

Формат боковой панели

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

На сайте sidebar может быть размещен слева или справа от контента.

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

На сайте может быть использовано от одного до четырех сайдбаров.

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

пример использования 2 сайдбаров на www.facebook.com (слева и справа от ленты)

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

Зачем нужны сайдбары на сайтах

Боковая панель необходима для того, чтобы помогать посетителям передвигаться по сайту, находить определенный контент или воспользоваться каким-либо функционалом. В сайдбаре могут располагаться:

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

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

5 способов создать прибыльный сайт без сайдбара

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

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

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

Помогает ли сайдбар создать прибыльный сайт, дольше удерживать внимание посетителя или получать больше e-mail адресов с помощью блока подписки? Может быть. Но точно то, что сайдбар отвлекает читателей от ценного контента в основной части страницы, куда должно быть направлено все внимание.

Как мы знаем, сайту необходимы призывы к действию (calls to action), чтобы быть прибыльным. Посетители должны переходить на другие места на сайте, чтобы сделать покупку, подписаться на рассылку, получить халяву. Слишком долго все эти вещи размещали в сайдбаре. Пришло время избавиться от боковой панели, оставив при этом призывы к действию.

Что обычно располагают в сайдбаре?

  • Информация об авторе;
  • Кнопки подписки на социальные профили;
  • Поиск по сайту;
  • Популярные статьи;
  • Форму регистрации;
  • Категории;
  • Логотипы и кнопки;
  • Реклама, реклама и еще больше рекламы;

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

1. Информация об авторе – небольшой виджет под заголовком статьи или в нижней части сайта, но большего размера

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

2. Похожие/популярные статьи могут располагаться в нижней части статьи или между параграфами в произвольном порядке

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

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

3. Поиск по сайту и кнопки подписки на социальные сети могут занять место в шапке сайта или под ней

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

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

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

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


5. Рекламные блоки могут быть в футере, под шапкой сайта или в статье, если они вам действительно нужны, чтобы быть там

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

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

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

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

Как вы думаете, какой вариант будет более успешным? Я оставлю возможность решить это вам.

27 примеров сайтов с двумя сайдбарами

Существует ли какая-либо философия расположения сайдбара на веб-сайте?

Как вы думаете с какой стороны должен находится сайдбар на сайте. Вот смотрю некоторые сайты: пикабу, вс, хабр, хакер (Знаю – Димон че ты их смотришь, я тебе 100 с другим расположением напихаю:)), ну уж какие нравятся, и они чутка популярны и думаю посещаемые, так вот у них вроде бы с правой стороны, но с другой стороны есть много сайтов с левым сайдбаром – например не менее популярная википедия и другие. А бывает и с двух сторон как у 3дньюс.

И еще в среднем подозрительная ширина +/-300px.

Так с какой стороны лучше, правильнее или какое расположение вам самим нравиться.

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

Заранее спасибо за ответы, мнения и рекомендации!

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

На одном из сайтов мне пришлось левый сайдбар унести в noindex и позиции выросли в 2 раза! В нем были ссылки и какие то текстушки. Ссылки продублировал в футере.

Dmitriy_2014, Вопрос на тему что лучше, зеленое или квадратное. )))
Вот, может поможет принять решение http://htmlbook.ru/samlayout/tipovye-makety

левый сайдбар унести в noindex и позиции выросли в 2 раза! В нем были ссылки и какие то текстушки
Извиняюсь. А каким боком «тупость» располагавшего контент относится к его «географическому» положению лево-право?

Извиняюсь. А каким боком «тупость» располагавшего контент относится к его «географическому» положению лево-право?

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

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

Это может звучать глупо, но так оно и есть на самом деле, у Яндекса точно :)

Если сайдбар выполняет роль основной навигации по сайту — слева. Если вспомогательной и/или это блок с информерами — справа.

Более-менее стандартная ширина — наследие времён, когда сайдбар учитывал разницу разрешений. Его делали по ширине таким, чтобы на предыдущем неподдерживаемом разрешении (резина на сайтах появилась очень не сразу :)) можно было читать контент, скрыв сайдбар за горизонтальный скрол. И типа было удобно. Чуть пошире сайдбар стал когда экраны стали побольше, но стали активно использоваться версии для печати, контентная область страницы примерно совпадала с печатной версией. Ну и с тех пор вроде привычные пропорции, юзерам сразу понятно что и где.

А так таки если через седалищьное место сверстан сайт — поисковик есесно «увидит» бардельеру перед «основным»(по мнени владельца) контентом.

П.С.
При правильной постановке рук и ТЗ верстальщику — количество сайдбаров хоть 100500 штук.

Есть мнение, что сайдбар вообще не нужен. (Яндекс Дзен — привет!)

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

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

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

По исследованиям типа eye-tracking пользователи рассматривают страницу в большинстве своём одинаково. Выделились 2 паттерна просмотра: F и Z

Так что есть смысл ставить сайдбар слева, особенно если там реклама.

Слева, потому что так удобнее. Обратите внимание, почти наверняка у вас мышка большую часть времени правее середины экрана
Л — логика. :)
Выделились 2 паттерна просмотра: F и Z
На данном скрине фокус на контенте, на пятнах/блоках. А не по сторонам.

Вопрос на засыпку — с какой стороны сколлер у не извращенцев?

На данном скрине фокус на контенте, на пятнах/блоках. А не по сторонам.

На данном, да. Причём на правом сайдбаре внимания мало.
Вот с левым:
http://images.vfl.ru/ii/1538147467/9af4f068/23550051.jpg

Вот ещё, тут есть внимание на правом, но в основном в верхней части:
http://www.citymaxblog.com/wp-content/uploads/2010/09/fshape-300×240.jpg

Вопрос на засыпку — с какой стороны сколлер у не извращенцев?

Судя по моим наблюдениям на скроллер мало кто внимание обращает, крутят колесом мыши. Некоторые вообще пробелом.

Вот с левым:
Опять же — перекос. По этому нельзя оценивать, тк нет инфы с права.

Как-то оценивать можно при абсолютно одинаковых пятнах (включая тексты) с обеих сторон.

, но в сотновном в верхней части:
. В видимой части экрана (. )

Судя по моим наблюдениям на скроллер мало кто внимание обращает, крутят колесом мыши
:) Ты не понял..
Ок. тогда так — почему скроллер справа? (В «подумать» стоит учитывать когда были разработаны основные элементы интерфейсов)

Ок. тогда так — почему скроллер справа? (В «подумать» стоит учитывать когда были разработаны основные элементы интерфейсов)

А действительно ведь, скроллер почти везде справа (В этом что-то есть, word, excel, все браузеры и т.п.), это значит, что правильно слева контент, а справа сайдбар, или это ничего не значит :)

У человека зрение устроено так, что сначала смотрит налево, а потом направо. Поэтому сайдбар — только справа.

P.S. Это заложено в основу теории фотографии, кстати.

Вывод не очевиден. Почему «поэтому»?

Аналогично — вывод не очевиден.
Когда ты бьёшь молотком — гвоздь находится в конце движения. И сила удара тоже концентрируется там же.
Не нравиться молоток? — см выше про скроллер.
Вариант — сайтбар по середине ещё никто не предлагал? )

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

Если у вас в сайдбаре какие-то полезные штуки вроде меню или фильтров — делайте слева.
Если сайдбар — просто чтобы был, как во всяких статейниках — то справа. Все эти последние коментарии, разделы, последние записи — короче то, что вообще никому никогда не нужно.
Посмотрите сотню-другую сайтов и придете к этому выводу.
Человек что-то выбирает, отмечает или просто кликает на нужные пункты — это типа его панель управления на данном сайте. И она должна быть слева. А результат — рядом, в центре и справа.
Подавляющее большинство программ имеет такой интерфейс.
Естественно, есть трехколоночные сайты, но даже в них все управление отдается левой части, а в правой уже какие-то сопутствующие блоки идут, не настолько важные.
Целенаправленно делать главный или единственный сайдбар справа — это такое типа, не очень разумное решение, может быть от дизайнеров-экспериментаторов пошло, ну а не особо умные вебмастера подхватили.

Цукерберг рекомендует:  Принципы эффективной системы web-навигации

зы. Не только программы, конечно. В целом. ну пожалуй вообще всё. Например данный (и миллионы других) форум. Почему-то вся инфа про пользователя рядом с каждым сообщением — слева, а не справа :) И что, разве есть какие-то проблемы с чтением постов? По-моему нет и по-моему было бы куда хуже, если бы аватарки и инфа располагались справа.

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

Еще, зачастую сайтам сайдбар не нужен

Ну наконец-то к 5-ой странице хоть кто-то здравую мысль высказал !

Сайдбары в WordPress

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

  • Сайдбар — это область сайта слева или справа от основного контента (одним словом боковая колонка),
  • Сайдбар в WordPress — это любая область на сайте, в которой выводятся виджеты;

В обоих случаях предназначение у сайдбаров одинаковое — навигация по сайту, ссылки на социальные сети, виджеты соц сетей, виджеты каких-либо сторонних сервисов (например поиск авиабилетов) и т.д.

Единственное отличие определения сайдбара в WordPress это то, что он может находится где угодно на странице сайта (но чаще всего это боковые колонки справа и слева от контента и футер).

В этом шагу мы рассмотрим пошагово как создать два сайдбара — один в боковой колонке и один в подвале (футере) сайта.

Шаг 1. Регистрация сайдбара

Для начала скажу, что в разных темах WordPress сайдбары регистрируются по-разному, в некоторых ещё до сих пор используется способ 2007-го года. Почему? Да просто некоторые липовые разработчики любят неосознанно копировать код из других тем, их даже не волнует, что тема, которую они используют в качестве своего «на все случаи» шаблона, не обновлялась более 5 лет.


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

Как я уже говорил, мы будем создавать два сайдбара — в боковой колонке и в футере, в этом нам поможет функция register_sidebar() (если что-то будет непонятно в коде — смотрите документацию функции). Хук widgets_init обязателен!

Код для файла functions.php :

Вот что получилось у меня на странице Внешний вид > Виджеты:

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

Шаг 2. Как отобразить сайдбары на страницах сайта?

Как и в случае из первого шага, в разных темах вы можете найти разный код, отвечающий за вывод сайдбаров на сайте. Я рассмотрю только один способ, который использую сам, с использованием функций is_active_sidebar() и dynamic_sidebar().

В двух словах о том, для чего нужны эти функции:

Давайте теперь выведем те два сайдбара, которые мы создавали в прошлом шаге. И начнем с боковой колонки:

Куда вставлять код? Ну где хотите вывести сайдбары, туда и вставляйте. Не уверены в какой файл? Ну, вообще это полностью зависит от вашей темы, но вероятнее всего, что код боковой колонки вставлять в sidebar.php , а код футера в footer.php . Возможно вам ещё пригодится документация функций get_sidebar() и get_footer().

Ещё несколько советов относительно сайдбаров

Каждый из нижеперечисленных советов поможет избежать весьма серьёзных багов на сайте, однако, если вы хорошо разбираетесь в PHP и WordPress, ничего нового из этих советов вы не узнаете.

    Если выводимый садбар не имеет виджетов, то при помощи if и else можно задать код, который будет выполняться в этом случае:

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

Как отключить сайдбар в WordPress?

Могу предложить вам пару вариантов решения этой задачи:

  • Вручную — удаляем функции register_sidebar() и dynamic_sidebar() из файлов functions.php и sidebar.php . Этот способ самый действенный. Если же вы не хотите, чтобы после обновления темы все ваши изменения исчезли, используйте дочерние темы.
  • Функция unregister_sidebar() позволяет отключить сайдбар (но нужно знать его ID, да и код из sidebar.php всё равно придется удалять вручную).

Ещё про сайдбары

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp по всему миру — официальной конфе по WordPress, иногда там выступаю, но с 2020 выступаю только на тех, которые сам организовываю. Также периодически школа Epic Skills и LoftSchool приглашают меня вести у них уроки/вебинары.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

Комментарии 151

Спасибо, Миша! Все доступно, понятно и интересно.

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

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

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

Просто найдите в коде сайта те функции, которые описаны в этой статье для регистрации сайдбаров и удалите их �� Искать в functions.php и sidebar.php .

Про нагрузки вы зря — это зависит от того, какие именно плагины.

Добрый день!
в Lubith.com создала тему сайта с двумя (слева и справа) сайтбарами. зашла в админ.панель WP, установила эту тему, а левого сайтбара нет. ((( как мне отобразить его?
Спасибо.

Добрый день!
Обычно такие вещи должны быть либо в настройках темы либо в настройках, которые находятся непосредственно на страницах редактирования постов.

Не могу поменять заголовки виджетов в сайдбаре, а точнее поменять теги h2 на h4.

А что вы для этого делаете?

Я поменял их в коде сайдбара, но изменений не наблюдается

Если вы всё правильно сделали, это должно помочь (по крайней мере для стандартных виджетов WordPress).

Здравствуйте! Сайдбары в футере в админке появляются. На сайте в виде ромбиков текст (как зашифрованный). В чем может быть причина? В style.css нужно что-то прописывать?

Добрый день! ��
Можете скинуть ссылку на сайт?

Первая мысль которая мне приходит в голову — попробуйте поменять кодировку файлов в UTF-8 без BOM (особенно того файла, в котором вы регистрировали сайдбар).

Миша, здравствуйте!
Я разобралась. Просто неправильно немного поставила html код. Спасибо за быстрый ответ. Теперь нужно разбираться с ровным размещением. Ссылку отправила на Вашу почту.

Здравствуйте!
К сожалению никаких писем на почту не пришло.. Папку спама тоже проверял.

Здравствуйте, Михаил!
Нигде не могу найти ответ. Может кто поможет. У меня есть блог на WordPress. Поставила там форум через плагин bbpres. Вроде все нормально отображает, но нужно убрать на страницах форума левый сайдбар. Как — то он там не в тему. А сами страницы форума вытянуть по всей ширине блока с контентом. Как это сделать?

Добрый день!
Честно, с bbpres пока не приходилось работать ��

Могу попробовать помочь в принципе, вышлите мне логин и пароль к админке по email.

Спасибо, Миша!
К сожалению не знаю твоей email. Если ответом отправлять письмо на почему — то возвращает.
Вроде разобралась, но еще не совсем. Вот посмотри, может что подскажешь. http://freekreat.ru/forums/.
Сейчас на форумах он подгружает вместо page.php, который по умолчанию грузит — forum.php. Там все нормально страница формируется без сайдбара. Но, сцуко в опере нормально все показывает, а в Mozilla Firefox вся верстка плывет. Даже ослина IE и тот нормально показывает. Может у меня с компом какой глюк?

У меня норм отображается в Chrome, Opera и Safari �� Может в Firefox просто кэш?

Спасибо, помог вылечить :). Все норм. кажет. То я уже снова думаю сидеть шаблон ковырять

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

Попробуйте использовать свойство display:inline-table; к родительскому элементу, оно «делает» из них таблицу, всё выравнивается по высоте большего.
Не работает в ие7.
Другой метод — вложенность. Много лишних div-ов, но метод работает и в ИЕ6.
Вот на Хабре описаны несколько способов: http://habrahabr.ru/post/183542/
Надеюсь Михаил не удалит ссылку.

Здравствуйте! Как-то так:

Добрый день Михаил.
Ответьте пожалуйста, вот у студии RocketTheams в шаблонах есть страницы sidebar-left.php, sidebar-right.php и sidebar-page.php, мне ну очень интересно, возникнуть необходимость может в любой момент, но именно по этому виду создания страниц-шаблонов ничего не нашёл.
Как я понимаю, не только сайд-бар регистрируется, где-то ещё и страницу. регистрируют что ли, не знаю как это называется, но это разное с назначением шаблона через метки и указатели в странице, тут этим и не пахнет.
Объясните, пожалуйста, как эти страницы могут работать и желательно пример.
Благодарю!

Похоже всё проще. настолько проще, даже не верится.
в get_sidebar() параметром указывается имя или переменная с именем, соответствующем имени шаблона, которое написано после тире, вот и всё.
мда.
В любом случае благодарю ))

Рад, что вы разобрались) Успехов!

А если у темы только правый сайдбар, как сделать чтоб и левый то же был..как его туда поставить, именно слева

Обыкновенно.
Имя сайдбара задаёте соответствующее, и пишете команду вывода в блоке под левый сайдбар, соответственно с именем его.

А что за команда? Я знаю как регистрировать его и добавлять разные садбары, а вот как вывести второй слева не знаю. О все равно выводится справа. У меня тема одноколоначная, а менять ох как нехочется. Ведь там дизайн с таким трудом сделан.

А вообще дело это довольно непростое, если ваша тема сама по себе не подерживает два сайдбара (поищите в настройках), то, для того, чтобы добавить второй сайдбар через код, придется не только регистрировтаь его через php, но и переверстывать html.

наконец-то нашел нормальную, адекватную и понятную статью. В закладки . СПАСИБО !))))

а как сделать чтобы было не вертикальным а горизонтальным размещение информации на сайт баре?

Возможно мой ответ вас не удовлетворит — при помощи CSS, float:left , ну и поменяв расположение элементов. Большу тут и добавить нечего.

А как отключить сайдбар только на одной странице?

Ну например для всех, кроме страницы с >

Здравствуйте, Михаил.
Скачала немного кривую тему, часто кривизны исправила, но sidebar выводится внизу страницы, а не сбоку. Вот, видите, внизу страницы видео — это сайдбар на самом деле: http://sofia-psy.ru/silnaya-zhenshhina-i-muzhchiny/
В чем может быть проблема, как его вывести сбоку?

Здравствуйте! Тема не немного кривая ��


В общем пара вещей:

  1. для блока .container и #primary задайте значение ширины и установите обтекание float:left ,
  2. чтобы всё не начало съезжать непонятно куда, оба этих блока поместите в ещё какой-нибудь div и установите для него overflow:hidden .

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

Миша вопрос снимаю, сам нашел ошибку, в наименовании файла.

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

Здравствуйте! В вашей теме не хватает CSS стилей для обтекания картинок.

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

К картинке пробовали класс

если на bootstrape то так.

Это тоже не сработало, по моему тут стилями надо оперировать. Ладно буду экспериментировать сам, спасибо.

Спасибо, Миша. 5 минут (в первый раз регистрирую) и три сайдбара в подвале сайта. Осталось стили оформить. ��

Доброго времени суток!

В шаблоне Esteem сайдбары регистрируются в файле esteem/inc/widgets.php
Сделал все по инструкции, но новых сайдбаров я не вижу в админке.
При этом изменения в текущих я вижу.

Подскажите, может ли где то еще лежать упоминание?

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

Миша, помогите.На школьном сайте в Вордпресс написано: Присвоенное по умолчанию значение равно «sidebar-1». Чтобы убрать это сообщение и сохранить текущее содержимое боковой колонки, задайте вручную параметр id, равный «sidebar-1». Что делать? КАК ИСПРАВИТЬ? Вот вошла я в консоль, что дальше нажимать, Настройки?

Точнее?
Читайте внимательно «Шаг 1».

Андрей, понимаю, что я «туплю», но. Сайт уже существует не один год, сайдбар, естественно тоже, но, после обновления выскочило сообщение: » . sidebar вызвана неправильно. В массиве аргументов для боковой колонки «Sidebar» не задан параметр id. Присвоенное по умолчанию значение равно «sidebar-1». Чтобы убрать это сообщение и сохранить текущее содержимое боковой колонки, задайте вручную параметр id, равный «sidebar-1». » И теперь невозможно работать в консоли. Что делать-то? Помогите пошагово. Консоль -Внешний вид-Редактор — Да? А потом что? Я меняла на сайдбар1 id, но всё расплылось на главной странице. Помогите.

задайте вручную параметр id, равный «sidebar-1».

Я не понимаю, Вам система написала задайте id равный «sidebar-1», вы задаете «сайдбар1».
Естественно все расплывется, система не видит зарегистрированного сайдбара с таким id.

В первом шаге, написано, открываем functions.php, его и редактируем.
Ищите хук widgets_init, внутри будут регистрации, по-идее первый и есть «sidebar-1»

Здравствуйте Наталья. Файл functions.php в студию. Можно на фриланс его отдать.

Попыталась что-то исправить — «угробила» сайт. Вот будет мне взбучка! Теперь вот что вместо сайта: Ошибка разбора : ошибка синтаксиса, неожиданный » Боковая панель-1 » (T_CONSTANT_ENCAPSED_STRING) в /var/www/vaychka/data/www/vaychka.68edu.ru/wp-content/themes/spacious-vision/functions.php на линии 5 Что же делать-то мне теперь? Егор подскажите!

Можно ли сайт-то вернуть? Спасибо

Напишите мне на почту jegorfilippov@mail.ru Желательно сейчас ��

Здравствуйте, Михаил! Подскажите, если не сложно
Сайт http://dnevniki.ua/ Требуется: поменять внешний вид как здесь http://dnevniki.ua/wp-content/uploads/2015/05/dnevniki.gif, т.е.:
— Убрать вообще насовсем sidebar, который справа, на всех внутренних страницах и записях. Это та правая часть страницы, где сейчас выведены страницы и категории. Соответственно надо будет и изменить горизонтальный размер страниц и записей.
— На всех внутренних страницах и записях сайта хочу добавить то горизонтальное меню, которое расположено вверху на главной странице сайта под блоком логотипа.
Мпасибо заранее!

Здравствуйте!
Чем вам помочь? Напишите мне по email — всё сделаем.

Добрый день. У меня очень похожая проблема с сайдбаром. «sidebar вызвана неправильно. В массиве аргументов для боковой колонки «Боковая колонка 1». и так далее». Дело в том, что в wp-includes/functions.php on line 3563 на этой строке нет sidebar. Там написано следующее: trigger_error( sprintf( __( ‘%1$s was called incorrectly. %2$s %3$s’ ), $function, $message, $version ) );
И во всем вайле ни где не упоминается sidebar. Не понимаю как я могу заменить на sidebar-1 если его там нет. Можете мне помочь?

Вы ищите не в том файле. Вам нужно смотреть в function.php ШАБЛОНА.
В крайнем случае поиск по содержимому

Поиск по содержимому того файла ничего не дал. А в functions.php в шаблоне один единственный короткий код и больше ничего:

Не совсем понимаю где нужно заменить sidebar на sidebar-1

Добавьте id
register_sidebar(
array(
‘id’ => ‘sidebar’,

Спасибо. Проверю. Только еще один ворос. На некоторых страницах выводится следующее:

Ни в одном из файло functions.php нет get_settings. Где же его найти?

Попробуйте провести поиск по содержимому всех файлов сайта. Тоталкомандер это умеет.

Огромное Вам спасибо! То, что вы посоветовали очень помогло. Заработала админка, а вот сайдбар почему-то пропал совсем ((( Что же делать.
В сайдбаре написано следующее:

В в functions.php следующее:

Понял сам. Нужно было указать ‘id’ => ‘sidebar-1’,

Добрый вечер, Михаил! Ваша статья пришлась мне очень кстати! Передо мной как раз стоит задача добавить сайдбар в мой шаблон (изначально есть только правый). Учитывая, что я «не волшебник, а только учусь», я воспользовалась Вашим кодом регистрации сайдбара. Все прошло успешно, он есть на странице виджетов.

Но далее у меня возникают проблемы: я добавила код в single.php и поставила для эксперимента пару виджетов. Виджеты стали отображаться сверху записи, а не справа, как мне нужно. Убрала код и вписала в sidebar.php — виджеты добавляются в правый сайдбар над теми, которые уже есть.

В общем, моя задача: добавить левый сайдбар с корректным отображением на странице. Причем он должен отображаться везде. Можете что-то подсказать? Надеюсь, я ясно изложила свою мысль.

Здравствуйте!
Просто посмотрите, как добавлен правый сайдбар — по тому же принципу добавьте и левый. Скорее всего придется уменьшить ширину основного контента в CSS.

А добавить нужно в файл sidebar.php? И тогда он будет отображаться везде?

Просто нужно новому сайдбару стили присвоить. Если макет резиновый или адаптивный, то размер контента, скорее всего менять не нужно.
Я вообще по статье Михаила сделал три сайдбара перед Footer и внес их в один файл sidebar-footer.
Вот отрывок одного из сайдбаров

Вам, скорее всего, нужно

поставить выше вывода контента и назначить классу, какой там он у вас

Но не факт, шаблоны то разные.

Здравствуйте.
Интересует следующее: возможно ли только для одной конкретной категории и всех ее статей показывать отдельный сайдбар?
Пробовал в archive.php различные варианты через:
«if ( is_category(‘2’) ) < include 'sidebars/sb-recipes.php'; >«. всегда показывает сайдбар только для категории, но не для ее статей. в ручную указывать ID статей не вариант, т.к. статей в этой категории могут быть тысячи. Есть ли универсальный код, скажем типа: если категория 2 + все принадлежащие ей статьи подключаем сайдбар2.php
(плагины не интересуют!)
Заранее спасибо!

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

Вот используемый код:

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

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

Доброй ночи! Подскажите в таком моменте, надо чтобы на сайте был плавающий виджет в боковой колонке, проблема в том, что мы это делаем или плагином или скриптом, но в обоих случаях каждому виджету тогда присваивается id, но если мы посмотрим через tools.pingdom.com то кол-во запросов увеличивается почти в 2 раза, что естественно просто огромное кол-во. Можно как-то присвоить id только одному конкретному виджету или вообще без присвоения сделать виджет плавающим? Пока такого найти нигде не смог((( Заранее благодарю.

Здравствуйте!
А разве присвоение id элементам увеличивает количество http-запросов?

Возможно запросы увеличились из-за того, что установленный вами плагин наподключал своих скриптов?

Я пробовал и без плагина, через скрипт, добавляется вот таких вот около 160 запросов, как только отключаю плагин или убираю скрипт, всё пропадает.
Вот на радикал скрин того что вылазит http://s016.radikal.ru/i334/1508/d4/e3a3b9cd1894.jpg
Да, изначально у меня не прописано %1$s, то есть если через скрипт, то приходится дописывать это.

Цукерберг рекомендует:  Меняем лимит на размер загрузки файла в PHP

А что за картинка такая, весящая 0 байт — id.gif ?
Я бы поискал её и удалил (именно из кода, а не на сервере).

Долго искал, не мог её найти, но всё же методом тыка определил, данная картинка, точнее их там 4 получается, id.gif и те 3 ссылки ниже, также ведут на картинки в виде точки, это выводит так тизерка. Но проблема в том, что в плавающем виджете почему-то это всё выводится в среднем 40 раз. То есть если я убираю этот блок плавающий и остаётся блок этой тизерки под статьёй, то они выводятся 1 раз, в неплавающем виджете тоже 1 раз, итого 2 раза, а если виджет становится плавающим, то получается вот такая история. На данный момент на сайте всего 3 виджета, id у них 42, 43, 45, 44 недавно получается удалил 4-й с номером 44, но в админке нет неактивных виджетов, я думал, может оно их все равно где-то как-то видит, и каким то образом в них вставляет? Но только при задании id это происходит, без этого, такого нет. Поэтому вот и вопрос, как задать id одному виджету или создать блок, чтобы только в нём считались виджеты и там был он всего один? Так как проблема где-то в этом(((

Тут нужно смотреть код и разбираться, сходу уже подсказать нечего.

Можете выслать мне на почту, только дело в том, что сегодня после обеда я уезжаю и получается смогу посмотреть только через недели полторы..

Здравствуйте! Может и мне поможете? Хочу слева сделать узкий сайдбар для размещения рисунков-ссылок на интернет-ресурсы. Что нужно делать? При помощи плагина какого или прописывать как выше указано?
Прилагаю рисунок http://s017.radikal.ru/i410/1508/b1/33e16a89ca30.png
Адрес сайта ananichy.by
Тема Socialize Lite.
Прочитал вашу статью . но боюсь напортачить! Тем более в файле functions.php нет функции register_sidebar() .

Здравствуйте!
Тут нужно уже править код шаблона, одними только функциями регистрации сайдбара дело не ограничится.


А как это осуществить? Очень нужно .

Ответа по видиму не будет.

Блин, в отъезде я был в выходные, елы-палы!

Если не знаете, как добавить колонку в шаблоне сами, обратитесь к разработчику на фрилансе, думаю за 500р вам сделают.

Миша приветствую, есть одна проблема, может ты сможешь помочь а то Гугол выдает не то. В общем я недавно установил на сайт плагин DW Question Answer, он нечто на подобии вопросов/ответов и оказалось что в его текстовом редакторе не работает загрузчик медиафайлов, все бы ничего но этот злосчастный загрузчик не работает и на других плагинах, КонтактФорм 7 и еще на одном который я использую для бесплатных объявлений на сайте, в общем нигде не работает, проверил. Я отключал все плагины и скрипты и по очереди подключал, думал где то конфликт но результат это не дало, ошибку я так и не обнаружил. Миша если ты сталкивался с подобной проблемой помоги пожалуйста или посоветуй к кому обратиться. Заранее благодарю.

Приветствую!
А помимо отключения плагинов тему меняли на стандартную?

Здравствуй Миша, спасибо за ответ. Тему я не менял потому что на тестовом сайте все работает, открывается библиотека с фотографиями и я могу загружать их оттуда или с компа. Не знаю можно ли сюда вставлять адрес сайта но я сейчас скину, может так лучше сможешь понять проблему, правда у тебя значок загрузки медиафайлов наверное пропадет, у меня он находится слева над текстовым полем.
Вот адрес страницы: http://zakarpat-tour.com/dobavit-obyavlenie Посмотри пожалуйста возможно ты как профи быстрее увидишь ошибку.

А может с хостингом что? По моему где-то встречал такую неприятность.

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

О, тупанул, мне показалось, вы про админку.

Если вы говорите, что на тестовом всё ок, тут нужно просто открыть исходный HTML обоих сайтов и сравнить, что не так.

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

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

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

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

�� Всё ясно! Вопрос закрыт! Больше не побеспокою! Удачи! ��

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

Вопрос: у меня на сайте есть страницы, рубрики (со списком постов), и посты — так вот сайдбар можно вывести везде, кроме рубрик — это особенности моей темы или в вордпрессе так продумано, что именно в рубрике со списком постов нельзя выводить сайдбар?

Здравствуйте, что то я не понял вопроса, у вас какой файл выводит рубрики?

content-post.php
На странице рубрики (на которой выводятся Заголовки всех постов), невозможно отобразить сайдбар.

Кажется я разобрался, поправьте меня если не так:
нужно рубрику прикрепить к странице — верно?

Вы наверное не можете его вывести потому что в файле content-post.php не заданы размеры блока с заголовками постов, для сайдбара же нужно место, если оно не задано то он и не выведется

Добрый день! Вы разобрались?

это особенности моей темы или в вордпрессе так продумано

Вам нужно вручную добавить вывод сайдбара в файл category.php , либо, если такого файла нет, то в archive.php , либо даже в index.php (это опять-таки зависит от вашей темы).

Да, разобрался — в настройках прикрепил рубрику к странице и всё заработало =)

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

не помогает. класс, конечно прописал свой.
Буду благодарен за помощь.

Доброй ночи!
Если я правильно понимаю, у вас уже есть сайдбар справа и нужно добавить еще один слева.

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

Какие сайты подходят, а какие нет? В основном это касается адаптивных сайтов с резиновой версткой.

А вообще эта задача состоит из двух частей:

  1. Определить точное место, куда в коде нужно добавить сайдбар и соответственно добавить его туда.
  2. Исправить то, что получилось в CSS.

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

Привет!
Кидай ссылку сюда, гляну. Кэш весь почистил?

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

Здравствуй, Миша. Блин, популярная статья, пока прокрутил вниз. �� У тебя сверху, где мета, под названием статьи, две даты выскочило.

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

Дата публикации и дата последнего обновления ��

Много это ещё мягко сказано,
иногда просят помочь с такими сайтами — помогаю, хоть и не очень охотно.

Просто в Opera криво смотрится. Я бы скрин скинул, некуда

У меня в Opera вроде норм. Да залей куда-нибудь и ссылку сюда вставь.

А я пока в php не могу сам писать сложные функции, тупо взял тему TventyTvelve стили удалил, добавил сетку bootstrap, а с фреймворка выдернул кастомайзер и в зависимости что нужно клиенту в кастомайзере оставляю.

Миша, не подскажешь как к ссылкам в сайдбаре добавить микроразметку itemprop=»url» ?
Я фильтром хотел, но что-то пошло не так.

По-моему для этого лучше свой виджет написать.

Вот скрин, Миша. Или так и задумывалось? https://yadi.sk/i/rR63dF70koM6W

Здравствуйте. У меня боковая колонка отображается не сбоку а сверху. Я сделал всё как написано, но я так понимаю что-то не так в моей теме. Не подскажите что это может быть? Сайт http://ukronews.ru/ на главной странице всё нормально, проблема в том что когда заходишь на какую-нибудь новость то сайдбара нет, а если я его устанавливаю, то он отображается вверху страницы.

Здравствуйте!
У меня везде — порядок. Уже разобрались?

Только что, благодаря вашему комментарию я понял, у меня адаптивный дизайн, а разрешение на мониторе низкое, вот он мне не там и показывал. Зашел с другого — все хорошо. Спастбо)

Извините за беспокойство)

Здравствуй, Миша. Сейчас в WordPress 4.4 новая функция появилась

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

Как в виджетах функция Wp_widget

Привет!
Отличие этих двух функций в том, что is_registered_sidebar() проверяет, зареган ли сайдбар вообще, а is_active_sidebar() — добавлены ли в него виджеты.

Здравствуйте, Михаил. Подскажите, пожалуйста, может ли быть в теме заблокировано отображение сайдбара? Просмотрел кучу статей, опробовал все предложенные варианты и Ваш в том числе. Но сайдбар никак не хочет отображаться на сайте. Что можете посоветовать? Спасибо!

расскажите по порядку, что вы делаете.

1. В functions.php вставил код
function true_register_wp_sidebars() <

/* В боковой колонке — первый сайдбар */
register_sidebar(
array(
‘id’ => ‘true_side’, // уникальный id
‘name’ => ‘Боковая колонка’, // название сайдбара
‘description’ => ‘Перетащите сюда виджеты, чтобы добавить их в сайдбар.’, // описание
‘before_widget’ => », // по умолчанию виджеты выводятся -списком
‘after_widget’ => »,
‘before_title’ => », // по умолчанию заголовки виджетов в
‘after_title’ => »
)
);

/* В подвале — второй сайдбар */
register_sidebar(
array(
‘id’ => ‘true_foot’,
‘name’ => ‘Футер’,
‘description’ => ‘Перетащите сюда виджеты, чтобы добавить их в футер.’,
‘before_widget’ => »,
‘after_widget’ => »,
‘before_title’ => »,
‘after_title’ => »
)
);
>

add_action( ‘widgets_init’, ‘true_register_wp_sidebars’ );

2. В sidebar.php удалил весь код и втавил

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


Здравствуйте.
Я вот уже давно бьюсь над тем как в сайдбаре выводить произвольные поля.
И еще этот сайдбар выводить не в начале статьи а где-нибудь в середине.
Может Вы подскажете?

Здравствуйте!
А в чем заключается проблема с произвольными полями?

Здравствуйте, Миша.
Спасибо, что отзвались.
Проблема в том что произвольные поля В СЕРЕДИНЕ ПОСТА не выводятся.
То есть если насовать коды в header.php то все работает, но нужно выводить именно где-то между абзацами текста.
Ведь не очень красиво когда шапка поста забита фотками, картами, кнопками, а дальше идет большой текст практически голый.

Поэтому в статье в нужных местах мне нужно выводить код Адсенса, кнопки, фотки и другие произвольные поля.
Например один шорткод выводит адсенс, другой — 3-4 кнопки со ссылками разными для каждой страницы + фото или спутниковую карту.
Например в статье про Москву кнопка «карта» выведет карту Москвы, а в посте про Питер такая же на вид кнопка выведет карту Питера.

Почему не вставить код прямо в страницу? Во-первых громоздко.
Во-вторых, код кнопок при редактировании страницы и переходе из текстового режима в визуальный исчезает.
Пример кода —
Кроме того сли вставить где-нибудь между абзацами текста ID, ‘karta’, true); ?> то произвольное поле тоже

не выведется. Кстати если его вставить в виджет — тоже.

Задумал я сделать так — весь код произвольных полей (штук 5)с классами, размерами полей и т.д. забросить в отдельный файл (например

pole.php).
вставляю в статье где нужно шорткоды (2-3 штуки), шорткоды выводят содержимое pole.php т.е. произвольные поля.
А в «значении» каждого произвольного поля в каждом посте вписываю типа a href=»h t t p://sait.ru/avto/» и т.п.

В functions.php вставил код

И в шаблон закинул файл pole.php
Если в этот файл вставить код Адсенса, то он отлично выводится шорткодом [ch-s]

А вот как вывести произвольные поля?
Вставленный в pole.php код ID, ‘pole_1’, true); ?> не канает.

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

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

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

Подробное руководство по юзабилити сайдбара

Время чтения: 24 минуты Нет времени читать? Нет времени?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маркетолог Брайан Харрис протестировал эффективность сайдбара на своем блоге. Конверсия страницы без боковой панели выросла на 26 % по сравнению с базовой страницей. По данным Харриса, CTR элементов в сайдбаре его блога составляет 0,3 %.

Специалисты маркетингового агентства Impact после удаления сайдбара зафиксировали рост конверсии страниц блога на 71 %.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Javascript - Прошу прокомментировать JavaScript код

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

Если основное меню сайта находится в шапке сайта, в боковой колонке можно использовать вспомогательные навигационные элементы. Например, если в шапке есть ссылки на основные страницы и разделы, в сайдбаре будут полезными фильтры, ссылки на рубрики публикаций, блоги конкретных авторов. На сайте 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 не рекомендуют публиковать на боковой панели не только рекламу, но и любые визуальные элементы, которые напоминают баннеры и объявления.

В рунете более 20 % серферов используют блокировщики рекламы. Когда программа блокирует объявление, внешний вид боковой панели портится. Например, это происходит, если код объявления вставлен в стандартный виджет WordPress «Текст». В этом случае пользователи видят в сайдбаре пустой контейнер виджета.

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

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

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

Анонсы контента

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

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

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

Пример абсурдного использования анонса контента можно найти на сайте Autonews. Пользователь видит блок связанных публикаций с заголовком «Читайте также» рядом с хедлайном основной публикации.

На сайте CNN такой ошибки нет. Рекомендуемый контент появляется в боковой колонке как раз напротив последнего раздела главной публикации.

Насколько эффективны анонсы контента в боковой колонке? На тестовой площадке CTR виджета связанных публикаций Relap в сайдбаре составила 2,04 %. Аналогичный показатель для виджета под основным контентом составил 32,49 %.

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

  • Не анонсируйте контент с помощью баннеров. Если анонс похож на рекламу, пользователи будут его избегать.
  • Не размещайте подборки в верхней части боковой колонки. Позвольте посетителю прочитать основную публикацию, а затем предлагайте ему другой контент.
  • Позаботьтесь о релевантности контента. На новостных сайтах уместно опубликовать блок «Свежие публикации», в блоге подойдут связанные статьи, а в интернет-магазине можно анонсировать похожие товары.
  • Эксперты Nielsen рекомендуют аккуратно использовать на боковой панели миниатюры изображений. Они делают анонс похожим на рекламу и уменьшают CTR.
  • Предлагайте пользователям подборки полезного или вечнозеленого контента.

Чего точно не должно быть в сайдбаре

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

Облако тегов

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

Виджет «Последние записи» на главной странице блога

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

Виджет «Календарь»

С точки зрения элемента навигации календарь бесполезен. Зато он занимает много места.

Виджет «Мета» на сайтах под управлением CMS WordPress

Этот визуальный элемент стоит использовать только в одном случае: если вы хотите, чтобы на сайте регистрировались пользователи. В остальных случаях ссылка на админку и WordPress.org на сайте не нужны. А RSS-фид можно анонсировать по-другому.

Счетчики, пузомерки

Если эти элементы и нужны, место им в футере.

Блок «Последние комментарии»

Виджет «Свежие комментарии» загромождает сайдбар и ухудшает юзабилити сайта.

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

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


Что делать, если вы не представляете сайт без боковой панели

Подумайте дважды. Вспомните, что около половины посетителей вашего сайта не видят сайдбар. На экранах мобильных устройств он превращается в боттомбар. Обратите внимание на исследования, выполненные с помощью айтрекинга. Nielsen утверждает, что из-за рекламы у пользователей развилась слепота по отношению ко всем элементам в боковых колонках. По данным VideoFruit, CTR любого виджета в сайдбаре не превышает 0,3 %.

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

Следите, чтобы в боковой колонке сайта было не больше 3 – 5 элементов или виджетов. Убедитесь, что сайдбар не отнимает слишком много пространства у области основного контента. Рекомендуемая ширина боковой панели — от 20 до 40 % от общей ширины страницы. Если вы используете несколько сайдбаров, их совокупная ширина не должна быть больше 40 %.

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

Тема Able New

Посмотреть демонстрационный сайт

Тема Able — универсальная тема для ведения традиционного сайта. Большой трехколоночный шаблон, который отличается четкими линиями и удобочитаемостью.

Краткие спецификации (все размеры приведены в пикселях):

  1. Изображение в заголовке: ширина — 1280, высота — любая.
  2. Ширина основной колонки с отключенными сайдбарами — 1176.
  3. Ширина основной колонки с одним сайдбаром — 869.
  4. Ширина основной колонки с двумя сайдбарами — 562.
  5. Ширина левого и правого сайдбара — 207.

Дополнительная информация по настройке темы:
Меню
Фон
Заголовок

Настройка тем дизайна

В этом видео-ролике описана информация по работе с темами дизайна сайта:
— Общая информация;
— Выбор темы дизайна сайта;
— Как посмотреть демонстрационный сайт-пример темы;
— Особенности и настройки тем: название и описание сайта, цвета темы, изображение заголовка, способ вывода изображений в шапке сайта, фоновое изображение, навигация на сайте, настройка главной страницы сайта, выбор цветовой гаммы темы, выбор количества колонок на сайта;
— Особенности настройки сайта после смены темы.

Левый и правый

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

WordPress тема Customizr

Customizr — отличная бесплатная WordPress тема с довольно широким функционалом, что обычно можно встретить в премиум шаблонах.

Тема Simple Catch

Simple Catch — простая и удобная WordPress тема, без всяких излишеств. Имеет слайдер на главной странице, изменяемый макет шаблона — доступны варианты с левым и правым сайдбаром, а также без них в одну колонку.

MaxiMagazine — трехколоночная вордпресс тема

MaxiMagazine — одна из последних WordPress тем от newwpthemes.com, выглядит довольно «опрятно», имеет два сайдбара — левый и правый, настраиваемое меню в футере сайте, а также большое число дополнительных виджетов.

Функциональный резиновый WordPress шаблон Admired

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

Трехколоночный WordPress шаблон StoryMag

StoryMag — идеальное решение для тех, кто ищет новостной/журнальный шаблон, профессиональный дизайн, имеет бесплатный статус. Как и все темы от newwpthemes.com, имеет гибкие настройки, позволяющие подстроить внешний вид сайта под свои нужды.

WorldSym — трехколоночный WordPress шаблон

WorldSym — трехколоночный шаблон от разработчиков themepix.com, выполнен в светлых тонах, шапка содержит две полосы травяного и цвета маренго, что придает сайту большую живость.

Atimex — трехколоночная тема WordPress

Atimex — трехколоночная WordPress тема от newwpthemes.com, имеет левый и правый сайдбары. Шаблон выполнен в темных тонах, на мой взгляд — тема на любителя.

Bionex — универсальная WordPress тема

Bionex – универсальная WordPress тема, выполнена в темно-серых тонах, моет использоваться для блога самой разной тематики. Полностью совместим с версиями WordPress 3.0 и выше.

BestGames — игровой шаблон для WordPress

После небольшого перерыва, представляю Вам очередной шаблон от newwpthemes.com, BestGames — прекрасно подойдет, в первую очередь, для игрового блога, сайта о онлайн играх и т.п. Как можно видеть, особую индивидуальность теме придают тематические слайды, потому их подбору нужно уделять особое внимание, красивое слайд-шоу непременно оживит Ваш сайт.

Универсальный WordPress шаблон Relax

RelaxWordPress шаблон в светлых тонах, от newwpthemes.com, подойдет для сайта любой тематики. Имеет страницу опций в админпанели, слайдер избранных записей на главной.

WordPress шаблон Studeno

StudenoWordPress шаблон в ярком светло-зеленом и темном цвете, подойдет для сайтов любой тематики. Имеет страницу опций в контрольной панели.

Что такое сайдбар

31 октября 2020 года. Опубликовано в разделах: Азбука терминов. 6867

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

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

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

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

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

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

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

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

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

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

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

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

Размеры

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

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

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

Шрифт

Кегль рекомендуется выбрать на 10-20% больше, чем кегль главного текста, так он будет привлекать, но не отвлекать от основного материала.

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

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих