Индивидуальный шаблон страницы – убираем сайдбар. Сайдбар блога. Элементы и расположение. Прописные истины

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и меняем ее на:

То есть мы поменяли для блока div стиль оформления с content на contentshirokii (можете использовать и другое имя).

Теперь нам нужно создать данный стиль (contentshirokii) на нашем сайте.

Шаг 4. Создание стиля contentshirokii.

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

После выбрать в правом меню из списка шаблонов файл style.css (в самом внизу списка) и открыть его.

Теперь у вас есть два пути:

1. либо создать стиль contentshirokii с “нуля”;

Для этого просто перейдите в конец кода файла style.css и вставьте следующий код:

#contentshirokii { padding: 10px 0px 30px 20px; float: left; width: 850px; }

Разберем здесь, что за что отвечает.

Строка padding – задает отступ: слева, сверху, справа, снизу.

Строка float – задает выравнивание: left – слева.

Строка width – ширина содержимого страницы (текста): 850px – 850 пикселей, здесь опытным путем находите нужную ширину.

2. или же найти и скопировать существующий стиль оформления content , переименовать его в contentshirokii и внести в него изменения – увеличив ширину отображения текста.

У меня он выглядел так:

#content { padding: 10px 0px 30px 20px; float: left; width: 585px; overflow: hidden; }

Копируем его и вставляем в конце файла style.css, далее меняем его название на contentshirokii, а также изменяем в нем параметр width:585 px на нужный вам (данный параметр ограничивает ширину вашего текста, благодаря которому текст статьи и не заходит на область бывшего нашего сайдбара). Параметр width можно установить опытным путем, я поменял его значение до 850 px.

В общем у меня получился следующий код:

#contentshirokii { padding: 10px 0px 30px 20px; float: left; width: 850px; overflow: hidden; }

После изменений нажимаем на кнопку “Обновить файл”.

Шаг 5. Сохраняем редактируемый файл page.php под другим именем и закачиваем его на сайт.

Все теперь сохраняем наш редактируемый файл, но не как page.php, а как shirokiishablon.php

Далее закачиваем его с помощью программы FileZilla на FTP-cервер вашего сайта в папку вашей текущей темы , то есть в нашем примере: /public_html/wp-content/themes/iGames (так как текущая тема в данном примере называется iGames).

Шаг 6. Подключаем созданный нами индивидуальный шаблон shirokii.

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

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

Далее находим справа поле “Атрибуты страницы” (если его у вас нет, то нажмите в правом верхнем углу на кнопку “Настройки экрана” и поставьте галочку напротив “Атрибуты страницы”) и в пункте Шаблон выбираем shirokii.

Все готово!

  • анастасия

    создала копию файла page, назвала pager и изменила по инструкции

    Blog - where we write stuff


    comments for post: "" class="post_link">"

    "main")); ?>

    в style.css в свою очередь:

    #contentpager { padding: 10px 0px 30px 20px; float: left; width: 968px;

    при изменении сообщения, в шаблонах не появляется pager . помогите, пожалуйста

  • Юлия Граф

    ПОтрясающая статья! Слов нет. Сама не ожидала, что всё с первого раза получиться. ЗДОРОВО! СПАСИБО!

  • Григорий

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

  • Григорий
  • Григорий

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

  • Константин

    Григорий, вот у меня на тестовом сайте все получилось.
    Код индивидуального шаблона:

    "" . __("Pages:", "target"), "after" => "")); ?>
  • Оксана

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

  • Константин

    Оксана, чтобы убрать сайдбар вам нужно поменять 3 стиля оформления в вашей теме F2:
    – content
    – wrapper
    – container

    При этом два из них (wrapper и container) находятся в файле header.php, а другой в page.php, поэтому чтобы убрать сайдбар вышеуказанным методом придется создать два индивидуальных шаблона для header.php и page.php, в них поменяйте 3 вышеуказанных контейнера (content, wrapper, container) например на следующие: content2, wrapper2, container2, а после пропишите стили оформления для них:

    #content2{
    padding:20px 4%;
    overflow:hidden;
    background:#fff;
    }

    #wrapper2{
    float:left;
    width:100%;
    background-color:#fff;
    display:inline;
    }

    #container2{
    margin:0;
    }

    Демо пример можете посмотреть тут – “mnogoblog4.p.ht/sample-page”

  • Оксана

    Поверить не могу! Все, как в тумане, но ведь получилось!!! Мне оставалось поменять только wrapper и container, все остальное уже ведь было сделано ранее. Я предполагала, что эти параметры и нужно менять, но не знала, где именно, в каком файле? Теперь надо быстренько законспектировать пока еще хоть что-то помню, а то в голове полная каша.
    Все таки счастье есть:)
    Кудесник Константин, огромное Вам спасибо!

  • Константин

    Оксана, спасибо за комментарий!

  • Елена

    Здравствуйте Константин! Действительно первое и единственное место, где написано все четко и понятно! Спасибо большое, правда у меня возникли проблемы ((Шаблон у меня простенький, менять не хочется, потому что готова уже новая шапка на смену, красивая). Так вот в моем шаблоне нет файла page… есть single и index и там и там есть get sidebar… не знаю что править, боюсь что-то не то сделать.

  • Константин

    Елена, если хотите создать индивидуальный шаблон для страницы берите за основу index.php, а если для записей – то single.php.

  • Роман

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

  • Константин Плащевский

    Константин, большое спасибо! Всё получилось, описано толково!

  • Илья

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

  • Василий

    Здравствуйте,у меня, что то не получается.Страницу создал, а ка удалить сайдбар?У меня нет таких файлов. У меня вот такие:

  • Василий

    Голова уже кругом,забыл закрывающий тег.

  • Альбина

    Здравствуйте!Очень нужна ваша помощь. Я новичок в этой сфере и для меня все это темный лес). Так что заранее прошу прощения если задала глупый вопрос) Я застряла на пункте “Сохраняем редактируемый файл page.php под другим именем и закачиваем его на сайт” . У меня блог пока на Денвере.Подскажите как осуществить этот шаг? Заранее благодарю.

  • Альбина

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

  • Артём

    У меня находится не в page.php а в header.php
    Что в данном случае делать? Если я произвожу действия, описанные в 3 пункте в хэйдере, шаблон кривится сразу для всех страниц.

  • Артём

    У меня находится код див айди = “контент” не в page.php а в header.php

  • Артём

    У меня сайтбар находится слева от текста, а не справа. Тем самым, у меня контент на 100% проходит вправо, но текст не сдвигается влево (на место, где был сайтбар). Что делать в данном случае? Тег float не помогает(

  • Nikolay

    Как сделать резиновые по ширине (или расширить)статьи в http://wordpress.org/themes/marla ?

  • Валерий

    Здравствуйте Константин! У меня в шаблоне, в правом сайдбаре две колонки. Что нужно сделать, чтобы одну колонку убрать в правом сайдбаре, при этом сделать левый сайдбар и там одну колонку? Спасибо!

  • Константин

    Валерий, действия следующие:
    1. в файле index.php убираете следующий код:

    2. в файле style.css меняете следующие параметры:
    находим строчку
    .art-contentLayout .art-content
    {
    и в данном классе меняете:
    float: left;
    на
    float: right;
    Здесь же параметр width: 529px; – можете увеличить до нужных размеров.

  • Владимир

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

  • Есть решение

    Сайдбар с виджетами из соцсетей в приложении "Сайт" тема Default 3.0 есть или нет? Задался данным вопросом так как: id у одного элемента content with-sidebar, у него же отступ в 280px справа, в шаблонах нашел сайдбар только в main.html с...

    Убрал проверку на if !empty($action) && $action == "page", вынес сайдбар перед article в отдельный div с id sidebar, получилось то что хотел, если есть другой способ активировать сайдбар в приложении сайт (тема дефолт 3.0) сообщите (код main.html для людей с той же проблемой прикладываю){if $wa->currentUrl() == $wa_app_url && (empty($page.id) && empty($page.content))}

    [`Welcome to your new site!`]

    ...

    При установки плагина "заказ на одной странице" отображается боковое меню - сайдбар, тема "удобная покупка" Подскажите пожалуйста как отключить боковое меню - сайдбар?

    Здравствуйте! Подскажите где в теме Default 3.0 (которая версии 3.3.0) в приложении "Сайт" находится шаблон отвечающий за размещение сайдбара на сайте? Шаблона sidebar.html в Дизайн > Шаблоны, я не нашел... Где нужно смотреть? Да и вообще...

    Добрый день!Хотел бы реализовать разные сайдбары для разных страниц. Тема Дефолт 2.0. Пробовал Smarty, как сказано тут (http://old.webasyst.ru/support/help/smarty-conditions.html), но ничего не получается

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

    Как вывести категории блога в сайдбаре любой темы отдельно от облака тегов? Тоже самое облако тегов без категорий?У меня почему, то выводятся вместе. Облако тегов и под ним категории.Вот код: {foreach $frontend_action as $plugin...

    Товары из распродажи в сайдбаре

    Добрый день! Нужно сделать блок в левой части сайдбара, который будет показывать товары из распродажи слайдами, с указанием % скидки.

    Правки шаблона: добавить поле с адресом, иконки для категорий в сайдбаре и др.

    Шаблон который нужно править onthebus.com.ua/webasyst (yourshop) 1. В шапке сайта, в меню где находится корзина добавить блок с выравниванием по левому краю для контактных данных. 2. В сайдбаре добавить возможность загружать иконки к пунктам меню...

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

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

    Подскажите, пожалуйста, как разбить сайдбар на блоки с выбранными категориями и присвоить каждому свой заголовок в теме "Выгодная покупка"?

    Подскажите пожалуйста, как в сайдбар карточки товара добавить дополнительный блок с текстомТема оформления default 3Спасибо

    Возможно ли на сайте в теме дизайна«Дефолт 2.0» 2.2.2 сделать сайдбар? Сайт http://www.nik-m.com

    +9 Предложение по улучшению новых настроек тем дизайна

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

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

    +1 Принято

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

    Есть решение

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

    "Команда" - это пользователи, у которых есть доступ к приложению. Но. В списке в сайдбаре показываются только те люди, с которыми текущий авторизованный пользователь производил какие-то действия за последний месяц. Например, назначал новые задания или перенаправлял существующие. Это чтобы простыню из 20 человек не показывать, если они заняты в других проектах, с которыми вы сейчас не работаете.Я только что добавил нового пользователя и дал ему ограниченные права в Задачах. В сайдбаре он...

    Правка шаблона

    Добрый день. Нужно внести изменения в шаблонРаздел "Жидкости" https://fathervape.ru/category/zhidkosti/1. Сделать отображение брендов по клику. Изначально они все должны быть скрыты, и есть надпись-ссылкой "Показать жидкости по...

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

    Итак, поговорим, за что отвечает sidebar.exe в Windows 7 и других версиях ОС, в которых этот процесс выполняется.
    Наверняка вы не раз замечали в правой области экрана вертикальную полосу, с расположенными на ней иконками. Например, в Vista это могли быть погода, календарь, визуальные часы, а в более поздних версиях – это уже часто используемые приложения на компьютере и элементы веб-интерфейса. Это, так называемые, виджеты.

    Или, как многие привыкли их именовать, гаджеты. Как было сказано выше, все это безобразие располагается в правой вертикальной области, которую в среде программистов принято называть «сайдбар» (по названию процесса, отвечающего за это, – sidebar.exe). Что это такое теперь более или менее понятно. Рассмотрим, как он влияет на работу машины в целом.

    Место в системе

    Вообще, данная утилита одна из самых бесполезных, которые когда-либо были внедрены в Windows. Пользователь, который привык к свой машине, уже практически с закрытыми глазами знает, что и где расположено, и сайдбар лишь мешает. Кроме того, этот системный процесс может занимать довольно большое количество оперативной памяти и системного времени, которые могли бы быть израсходованы на более полезные вещи. Чтобы оценить, насколько сильно «сжирает» sidebar.exe ресурсы системы, достаточно перейти в «Диспетчер задач» и найти во вкладке «Процессы» его среди остальных. В зависимости от того, какими виджетами снабжен наш сайдбар, цифры могут варьироваться от нескольких килобайт до пары-тройки мегабайт. Если эти значения составляют гигабайты – то тут уже другая проблема, но об этом ниже.

    Процесс расходует слишком много памяти

    Как известно, болеют не только люди, но и компьютеры. Подхватить вирус в Интернете довольно легко. Чаще всего вредоносные программы маскируются под файлы и процессы с расширением .exe . И sidebar.exe – не исключение. Это один из самых излюбленных «доноров» вредоносного программного обеспечения. Чтобы проверить свой компьютер, запустите поиск по системе файла sidebar.exe. Настоящий файл от Microsoft лежит в папке C:\Program Files, а вредоносный в C:\Windows или C:\Windows\system32. Срочно обновите ваш Антивирус, и он без особого труда справится с этой компьютерной заразой.

    Удаляем сайдбар

    Если вам надоело постоянное подвисание системы из-за этого процесса, то вы, скорее всего, задались вопросом: как удалить sidebar.exe? Мы подготовили два самых популярных пути решения.

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

    1. Нажимаем сочетание клавиш Ctrl+Alt+Del – это вызовет «Диспетчер задач»;
    2. Ищем среди других процессов sidebar.exe;
    3. Нажимаем на нем правой кнопкой мыши и выбираем «Отключить».

    Все! Теперь система должна начать работать быстрее. Подумайте: если вы решили насовсем отключить sidebar.exe, что это влечет за собой? Насколько выгодно будет избавляться от этих гаджетов? Решились? Тогда приступаем:

    1. Открываем меню «Пуск» и выбираем «Выполнить…»;
    2. В открывшемся окне прописываем «msconfig» и нажимаем «Ок»;
    3. Перед нами открывается окно, в котором переходим на вкладку «Автозагрузка»;
    4. Находим наш сайдбар и снимаем с него пометку.


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

    Проблемы с sidebar.exe

    Бывает так, что процесс работает, но сами виджеты не отображаются. С чем связана ошибка sidebar.exe? Наиболее распространенной проблемой является неправильно функционирующий Adobe Flash Player и работа браузера Internet Explorer, так как именно он отвечает за подгрузку данных из Интернета в гаджеты. Переустановите эти компоненты и перезапустите сам сайдбар. Он находится в С:\Program Files\Windows Sidebar\ sidebar.exe.
    В случае, если и это не помогает, то загрузите и установите компонент с официального сайта Microsoft.
    Теперь должно быть все понятно с sidebar.exe: что это за процесс и какие функции он осуществляет.
    Есть вопросы? Задавайте их в комментариях!

    С трудом выкраиваю время для того, чтобы написать очередную статью в свой блог. Но, но… Делать это буду. Куча дела, откуда они только взялись?

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

    Всем привет, друзья.

    Сайдбар блога — что это такое и что должно быть в нем?

    Давайте поговорим вот о чем:

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

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

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

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

    Короче, насмотрелся я ужастиков)))

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

    Итак, что такое сайдбар? Не надо обладать глубокими познаниями в области иностранных языков, чтобы понять, что это слово состоит из двух слов — «сайд» — сторона, а «бар» — это … питейное заведение))) «Бар» — это полоса.

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

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

    Почему справа и почему один?

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

    Правильно — ярмарку выходного дня в колхозе «Красное дышло». И честно говоря, я ни разу не встречал ни одного гармоничного, красиво и правильно оформленного блога с количеством сайдбаров больше 1 — го. Если не так — ссылку в студию, обсудим.

    Итак, подводя некий итог, я хочу обозначить вот что (по крайней мерея лично я уверен в этом):

    • сайдбар должен быть справа и один. Повторю: ни два, и не три!
    • сайдбар слева — признак «ущемленности» у хозяина блога.

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

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

    Ширина. Тут все опять же индивидуально, и можно городить «огород» в любую сторону, но минимальная ширина этого поля должна быть равна 250 px, а то и немного больше.

    Огромное количество баннеров для сайдбара имеют размер 250х250 px, 125х125 px, 240х400 px и так далее. Смысл, думаю, понятен. Думая на перспективу, Вы должны уже сейчас обеспечить себе будущее рекламное место, если Вы собираетесь зарабатывать с помощью банерной рекламы.

    И хорошо, если Вам достанется «резиновая» тема, где Вы можете в любой момент поменять ширину, а если нет? То то же и оно.

    Высота. Динамичная величина для любого шаблона. Чем больше Вы разместите на первой странице анонсов постов, тем «длинее» будет Ваш блог, соответственно и будет меняться длина сайдбара.

    Расположение элементов. Тут действует одно правило — чем ближе элемент расположен к шапке блога (header), тем он должен быть «ценнее». Поэтому здесь, как правило расположены самые вкусности любого блога (сайта) — подписка на рассылку, форма поиска или просто одно из самых дорогих рекламных мест.

    Давайте я расскажу еще и о том, что там вообще должно быть. Список каждый может добавить сам (причем очень часто «до безобразия»):

    • Форма поиска (стандартная причем не катит), лучше работает от Google или Яндекса.
    • Красочный свой баннер на бесплатный, либо же платный продукт, который обязательно бы работал как «генератор подписки», т.е. приводил бы людей в Ваш подписной лист.
    • Окно комментаторов. Очень часто я вижу данное окошко внизу. А еще говорят, что комментарии — это кровь блога. Или я что то спутал? А раз так — почему тогда располагают дорогих комментаторов в самый низ. Не понимаю.
    • Популярные статьи блога. Здесь достаточно расположить 4-6 самых популярных (комментируемых) статей, чтобы обеспечить дополнительный трафик на них.
    • Окно социальных сетей. У меня данная функция реализована с помощью «Социальной карусели» http://makedreamprofits.ru/ Это окно необходимо для присоединения Ваших посетителей к Вашим аккаунтам в разных социальных сетях.
    • Два окна, которые я разместил у себя в сайдбаре: это архивные записи и рубрики. По идеи, это функцию необходимо реализовать с помощью вкладок. К тому моменту, как я переработаю свой дизайн, я обязательно это сделаю таким образом. Это смотрится опрятно и здорово экономит место.

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

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

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

    В этой статье, мы поговорим об «анатомии идеального сайдбара ».

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

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

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

    Это не полностью мое определение – я воспользовался материалом из Википедии.

    Сайдбар – то есть боковая панель – содержит контекстные элементы, соответствующие текущему контенту, или общие для всего сайта, такие как: навигационные меню, формы поиска или виджеты подписки. Они могут также содержать не-контекстные элементы, такие как реклама или «цитата дня ».

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

    Как система управления контентом (content management system – CMS ), платформа WordPress определяет сайдбар, как «область виджетов » (Widget Area ). В этих областях, разработчикам тем для WordPress следует размещать виджеты (widgets).

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

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

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

    Один сайдбар

    Вот пример дизайна с одной боковой панелью: Twenty Twelve WordPress Theme

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

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

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

    Два сайдбара


    Взгляните на пример сайта с двумя сайдбарами: Seventeen WordPress Theme

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

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

    Три или четыре сайдбара


    Вот пример дизайна с четырьмя сайдбарами: SmashingMagazine.com

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

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

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

    Без сайдбаров


    Пример дизайна без применения сайдбаров: Beyn.org

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

    Оставшиеся кнопки вы можете расположить в нижней части страницы. Также, можете попытаться отобразить их в верхней части, но есть риск, что при этом основной контент «съедет » вниз, за пределы видимой части экрана.

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

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

    Тонкости хорошего дизайна

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

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

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

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

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


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

    Ширина от 20% до 40% обычно является оптимальной величиной для одиночного сайдбара. Если же вы собираетесь использовать более одной боковой панели, то рекомендуется, чтобы суммарная их ширина не превышала 50% (20% + 20% или 15% + 35%, к примеру).

    Для одного сайдбара вы также можете использовать подход, основанный на «золотом сечении », при котором ширина сайдбара составляет около 38% от ширины основной области.

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

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

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

    Использование цветов и изображений


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

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

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

    Размеры шрифтов и расположение элементов


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

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

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

    Расположение элементов на сайдбаре

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

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

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



    
    Top