Сайдбари у WordPress: Що це таке і які вони бувають

Бічні панелі (сайдбари) в ряді випадків сприймаються як блоки сайту, де знаходиться всяка всячина. Як правило, на їхню розробку йде мінімум зусиль дизайнера, і особливо ніхто не ламає голову над правильним розподілом віджетів усередині.

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

Дивіться також:

• Як налаштувати свої сайдбари в Записах та Сторінках
• Поради та плагіни з управління сайдбаром у WordPress
• Як відображати різні сайдбари для окремих записів та сторінок

Чому бічна панель – це важливо?

Для початку визначимося, що ми розуміємо під бічною панеллю (або сайдбаром):

Сайдбар - Це окрема секція сайту, графічно відокремлена, що містить інформаційні та навігаційні елементи.

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

Бічна панель зазвичай вже (має меншу ширину), ніж секція з основним контентом. Основне завдання інформації та елементів у бічній панелі – зробити зрозумілішим та зручнішим використання сайту в контексті поточної відкритої сторінки.

Будучи системою керування контентом, бічна панель у движку WordPress в першу чергу розглядається як місце для віджетів, які можна туди додавати, якщо вони є в темі оформлення та передбачені розробниками цієї теми.

Також є блоки для віджетів у футері (підвалі) теми, які хоч і не є бічними панелями, але технічно можуть розглядатися як такі.

Яка оптимальна кількість сайдбарів?

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

Один сайдбар

Приклад: тема Двадцять дванадцять

Найбільш типовий варіант дизайну. У бічній панелі тут може бути від 5 до 10 елементів (довгі списки постів, коментарів і всякого такого). Але не забувайте, що надто довгий сайдбар виступатиме за межі вашого основного блоку з контентом.

Таку 1-колонову бічну панель можна розміщувати праворуч або ліворуч від основної колонки. Особливої ​​різниці між цими двома варіантами немає. Ще один приклад – піст, який ви зараз читаєте. Праворуч від цього тексту є одна бічна панель з набором віджетів.

Два сайдбари

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

Як додаткова оптимізація можна зробити одну з бічних панелей вужчою, залишивши там лише посилання з 1-2 слів або іконки для навігації по сайту. Тільки уважно стежте за загальним дизайном, щоб не вийшло негарно.

Три або чотири сайдбари

Приклад: сайт SmashingMagazine.com

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

Один з кращих прикладів такого вдалого дизайну — це блог Smashing Magazine, В якому є і 4 колонки, і адаптивна верстка з розумним розподілом елементів та структурних блоків.

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

Приклад: сайт Beyn.org

Іноді найкращий варіант для сайту – це мінімалізм. Варіант без бічних панелей узагалі підійде більшості сучасних сайтів. Це спрацює в тому випадку, якщо елементи навігації та ключові посилання на сторінки ви перенесете у шапку та підвал сайту.

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

Внизу та вгорі можна розмістити кілька віджетів, але головне не переборщити (що актуально і для рекламних блоків також).

Далі буде...

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

Джерело: wp.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/