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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Коротко о Webix Прежде чем перейти непосредственно к коду, давайте обмолвимся коротко, что это за библиотека такая. Итак, Webix представляет из себя библиотеку UI компонентов разной сложности, от простой кнопки до Spreadsheet Widget , с помощью которого можно создавать онлайн таблицы в стиле Excel. Помимо собственно компонентов, в наличии механизм обработки событий , поддержка оффлайн-режима , интеграция с jQuery, AngularJS, Vue.js, Backbone.js, online инструменты: Skin builder , Form builder . Заявлена совместимость с Angular 2.

Nuget install Webix
Или если вы предпочитаете Bower :

Bower install webix
Все вышеперечисленное относится непосредственно к Webix. Для того, чтобы получить возможность создавать сайдбары, нам понадобится еще парочка файлов . Доступ к ним же через CDN:

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

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

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

View: "button"
Для инициализации Webix-приложения нам понадобится следующий код:

// опционально. код выполнится после загрузки страницы webix.ready(function(){ // конструктор webix.ui({ // описание приложения view: "button", }); });
Код выше создаст страницу, состоящую из одной кнопки. Поскольку наше приложение состоит из нескольких компонентов, нам нужно задуматься о создании лэйаута. Для этого используются свойства rows и cols , которые служат для создания рядов и колонок.

Например:

Webix.ui({ cols: [ { view: "button"}, { view: "button"} ] });
Создаст уже две колонки, по одной кнопке в каждой. Комбинируя эти свойства, добавляя вложенные колонки и ряды, меняя их размеры, например, с помощью свойства gravity можно создать лэйаут необходимой сложности.

Теперь мы можем перейти к сайдбару. Он основан на компоненте Tree и также использует формат JSON для описания своей структуры. Для удобства лучше хранить такое описание в отдельной переменной.

Наш сайдбар будет состоять из следующих пунктов меню:

Var menu_data = [ {id: "inbox", icon: "envelope", value: "Inbox"}, { /* прочие пункты */ }, {id: "tags", icon: "tags", value:"Tags", data:[ { id: "friends", value: "Friends"}, { id: "work", value: "Work"}, { id: "news", value: "News"} ]} ],
Каждый элемент должен иметь уникальный ID. value определяет, каким будет текст пункта меню, а icon – иконку. Webix использует набор иконок Font Awesome . Обратите внимание на пункт Tags. Он содержит вложенные подменю, которые будут открываться по клику.

Итак, суммируя все вышесказанное, мы можем перейти к нашему приложению:

Webix.ui({ cols:[ /* первая колонка, сайдбар */ { view: "sidebar", data: menu_data, }, /* вторая колонка */ { /* dataview component */ } ] });
В принципе, это все, что требуется для создания базового сайдбара: указать, что именно этот компонент мы хотим создать, а также выбрать источник данных о его структуре.

В результате мы получили вот такой сайдбар:

Пример кода и демку можно посмотреть .

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

Webix.ui({ rows:[ { /* здесь будет тулбар */}, {cols:[ { /* сайдбар */ }, { /* наши имейлы */ } ]} ] });
Давайте разберемся с кодом, который нам понадобится для создания заголовка. Как и было сказано, тип создаваемого компонента определяется значением свойства view . В данном случае этим значением будет toolbar. Его содержимое определяется значением свойства elements . В нашем случае мы поместим на тулбар следующие элементы: кнопку-гамбургер, заголовок и несколько иконок-уведомлений:

{view: "toolbar", elements: [ /* кнопка-гамбургер */ { view: "button", type: "icon", icon: "bars", width: 37, align: "left", css: "app_button", click: function(){ $$("$sidebar1").toggle() } }, /* заголовок */ { view: "label", label: "Webix E-Mail CLient"}, { /* добавляем пустое пространство */ }, /* уведомление 1 */ { view: "button", type: "icon", icon: "envelope-o", width: 45, css: "app_button", badge:4}, /* уведомление 2 */ { view: "button", type: "icon", icon: "bell-o", width: 45, css: "app_button", badge:10} ] },
Свойства type: "icon " и icon: «icon-name» создают кнопки-иконки. Свойство click позволяет определить функцию, которая будет вызываться по клику. В данном случае, она переключает состояния сайдбара. К двум последним кнопкам мы добавили свойство badge , которое позволяет использовать оранжевые бейджи с номерами, соответствующими значению свойства.

Вот что получилось в итоге:

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

Раскрытый сайдбар имеет уже привычный нам вид:

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

Попробовать этот пример и поиграть с кодом можно по этой

В 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:

Нажимаем сочетание клавиш Ctrl+Alt+Del – это вызовет «Диспетчер задач»;

Ищем среди других процессов sidebar.exe;

Нажимаем на нем правой кнопкой мыши и выбираем «Отключить».

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

Открываем меню «Пуск» и выбираем «Выполнить…»;

В открывшемся окне прописываем «msconfig» и нажимаем «Ок»;

Перед нами открывается окно, в котором переходим на вкладку «Автозагрузка»;

Находим наш сайдбар и снимаем с него пометку.

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

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

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

На вашем сайте есть боковая колонка (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 и изменила по инструкции