Идеальная боковая колонка (сайдбар) сайта на WordPress

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

Большинство владельцев сайтов, и не только на WordPress, видят в боковой колонке какую-то ненужную вещь и относятся к ней именно как к чему-то лишнему, которое мешает ему вывести основной контент на своем сайте.

Давайте попробуем вместе определиться: зачем нужна боковая колонка на страницах сайта и как ее сделать эффективной. Можно сказать — идеальной.

Сначала давайте определимся с терминами, а то довольно часто встречаешь на просторах Инета такие названия: сайтбар, садбар, колонка с вид(т)жетами и прочее…

Так как все таки правильно?

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

К навигационным мы относим:

    • Дополнительные меню
    • Ссылки на статьи и категории (рубрики)
    • Окно поиска на сайте
    • Ссылки на внешние ресурсы (сайты френдов и т.д.)
    • Облако меток

    К информационным:

    К рекламным:

    Боковая колонка (или Сайдбар) всегда Уже, чем основной раздел страницы, тем самым подчеркивая, что важней основное содержание, а не информационные блоки.

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

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

    Кроме боковой колонки, Сайдбаром можно назвать и колонки в нижней части сайта, которую «часто и густо» называют Подвалом сайта (раздел Footer). Давайте эту часть тоже называть боковой колонкой, пусть и расположенной в нижней части сайта. Ради справедливости, технически правильно он должен называться так: нижний колонтитул вывода виджетов. Но так как я решил говорить о колонках. в которых выводятся информационные виджеты, давайте и Подвал отнесем к боковой колонке.

    Сколько нужно Сайдбаров?

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

    2010

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

    Одна боковая колонка — наиболее распространенный вариант компоновки, и не только для стандартного блога на WordPress.

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

    Два важных правила в дизайне страниц сайта гласят:

    • Страница сайта не должна превышать 1,5 экрана монитора.
    • На страницах сайта не должно быть пустых мест.

    Посмотрите на свой сайт — у вас эти правила работают?

    С какой стороны лучше: справа или слева?

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

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

    Два Сайдбара

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

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

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

    Не дай бог увидеть сайт шириной 920 точек на мониторе с разрешением более 24 дюймов! Впечатляющее зрелище скажу я вам…

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

    Что касается сайтов с четырьмя и более боковыми колонками, хороший пример такого сайта — Smashing Magazine. Одно но — слишком длинная страница, при спуске вниз — пустые боковые колонки смотрятся удручающе. Адаптивный дизайн этого сайта помогает тем, кто заходит с мобильных и носимых устройств: все встает на свои места и сайт смотрится гораздо приятнее.

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

    Еще один отличный пример поддержки большого числа боковых колонок + адаптивный дизайн — сайт wpmu.org.

    smashing

    Без Сайдбара

    Хороший пример — дефолтная тема 2013. Вам нужен минимализм? Эта тема как раз для вас! В этом случае — наличие виджетов в подвале поможет справиться с вопросом: а куда поставить динамичные виджеты?

    2013

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

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

    Ширина и высота боковой колонки

    Например: у вас высота всей страницы, к примеру — 2,5 экрана, а высота заполненной части боковой колонки — 1 экран. Что делать с 1,5 экранами пустого места? Вариант: сделать боковую колонку Уже и распределить информацию по всей боковой колонке. Еще вариант: заставить все виджеты «передвигаться» вслед за тем, как читатель опускается вниз страницы сайта. Вы скажите — такого на WordPress не бывает! А вот и бывает, я видел и знаю, как сделать.

    Иделаьным соотношением ширины Сайдбара и основного раздела считается 80% и 20%. Если у вас две боковые колонки — соотношение ширины между ними в идеале должно быть 20% и 40%, или 20% и 20%, или 30% и 15%.

    В теории есть понятие «золотого сечения»: означает, что самым идеальным соотношением между боковой колонкой (или всеми боковыми в сумме) и основным разделом должно быть такое: 38% на все боковые колонки и остальное — на основной раздел (содержимое).

    О «золотом сечение» в веб-дизайне очень здорово написано на сайте net.tutsplus (для разработчиков сайтов: от новичков до продвинутых).

    Если не боитесь английского — почитайте, очень интересно.

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

    Размеры шрифта и выравнивание элементов (align)

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

    • В основном разделе шрифт Arial, в боковой колонке — Trebuchet
    • Размер шрифта в боковой колонке больше на 10-15% чем в основном разделе

    Хотя не забывайте: иногда мелкий шрифт больше привлекает глаза, чем более крупный.

    Выравнивание текста, как и заголовков, должно быть одинаковым и написанным правильно, а не через CAPSLOCK. Очень советую: не испрользуйте нигде в тексте CAPSLOCK!!

    Упорядочивание элементов в боковой колонке

    Одна у вас боковая колонка или десять — не важно. Важно другое: как правильно вы расставили в этой колонке информационные блоки (виджеты).

    Есть форма подписки, которую поставили в подвале, и она не работает. Другую поставили слева вверху — и она тоже не работает! Третью — справа посередине. И она — тоже не работает! Так где же ее поставить правильно?

    Что важнее по вашему мнению, а что важнее по мнению читателя?

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

    Не важно — нравится вам ваш сайт или нет. Важно — нравится ли он вашим читателям?

    И если читатель вам пишет, что неудобно стоит форма подписки внизу, значит, вам надо ее переместить наверх, и не важно — нравится ВАМ, что она стоит внизу или нет.

    Что важнее для ваших читателей: секция Популярные записи или Последние комментарии? Форма подписки или список рубрик?

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

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

    Общайтесь с вашими читателями, проводите опросы и узнавайте их мнение о вашем сайте, только не так, типа: нравится вам мой сайт или нет?

    Спрашивайте конкретно, или закажите аудит сайта у профессионалов.

    Заключение

    Кто-то из вас, прочитав, подумает — «а у автора ведь тоже не все идеально!».

    Соглашусь, но только частично. А знаете, почему? Просто потому, что я об этом постоянно думаю и стараюсь что-то делать.

    А вы?

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

    4 Comments

    • Автор · Edit

      Можно.
      Только для этого надо выполнить длинный список манипуляций с файлами.
      Описание примера вы можете посмотреть в одном из бесплатных видеоуроков в моей видео-школе WordPress:
      wpfreethemes.ru/product/kak-sdelat-dlya-kazhdoy-stranitsyi-svoy-saydbar/

      Ответить
    • Здравствуйте, я новичок в wordpress и надеюсь на вашу помощь. Можно сделать так, чтобы, например, в сайдбаре на главной странице располагались одни виджет, а на других страницах- другие?
      Спасибо.

      Ответить
    • Полностью согласен с вами, Олег, по поводу боковой колонки! Ваш аудит моего сайта помог во многом, я и сейчас экспериментирую с боковой колонкой, правда не часто.
      Олег, посоветуйте пожалуйста. У меня есть страница «Первоисточники». На этой странице размещены ссылки, например на Гражданский кодекс, а файл размещён на Яндекс -Диске. Это большой файл и его размещать на сайте нет смысла, а вот интересный справочный материал, хотелось бы разместить на сервере, и дать ссылку. Пробовал. Но знаний не хватает, как сделать правильно. Через FZ закачивал файл в папку «Контент». А как правильно дать ссылку на этот файл не могу сообразить.

      Ответить
      • Автор · Edit

        Создать отдельную папку, например: public_html/wp-content/files/
        Как написать тег HTML ссылки: все примеры ссылок можно найти в онлайн-самучителе по этой ссылке.

        Ответить

    Добавить комментарий

    Ваш email нигде не будет показан. Обязательные поля помечены *