Як полюбити свій сайдбар приклади, поради та рекомендації щодо його покращення, все про WordPress

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

Ось лише деякі цікаві способи удосконалення вашого сайдбару.

Сайдбар має переслідувати певну мету

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

Загальні цілі:

Що не варто робити із сайдбаром:

Сайдбар не повинен відволікати від контенту. Як казав сам Білл Гейтс, «контент – це король», і саме контент хоче отримати користувач, що прийшов до вас. На сайдбар йому начхати. Якщо в сайдбарі занадто багато анімації, і це займає великий простір сторінки або просто не дає отримати доступ до основного контенту, люди покинуть ваш сайт. Їм уже не важливим буде ваш контент.

Виявляємо креатив

Тепер, коли ви зрозуміли, які цілі має переслідувати сайдбар, перейдемо до деякої творчості з ним.

Сайдбари, що виїжджають

полюбити

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

Реалізація сайдбарів, що виїжджають

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

1. Переконуємося, що jQuery підключений для вашого сайту.

2. Завантажуючи та підключаємо .js-файл Sidr.

3. Підключаємо скрипт ініціалізації Sidr:

Обертаємо своє меню в div з id “sidr”:

Створюємо посилання на активацію:

Демо-скрипт ви можете бачити на наступній сторінці.

Використовуємо різноманітні сайдбари для різних секцій сайту

У цих файлах нам потрібно знайти наступний код:

Він буде частиною складнішої функції з додатковими параметрами – наприклад:

Як тільки ви знайдете код, ви можете просто скопіювати його і помістити відразу після цього фрагмента, змінивши назву та id — наприклад:

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

Якщо ви відвідаєте панель адміністратора WordPress, обидва сайдбари будуть виводитися в розділі віджетів. У даному прикладі я не змінював id першого сайдбару, тому він, як і раніше, працює длявсього сайту. Вам потрібно буде зробити додатковий крок для другого сайдбару, щоб виводився на головній сторінці.

Щоб реалізувати висновок для головної сторінки, потрібно повідомити тему, який сайдбар використовувати. Спочатку нам потрібно знайти, де генерується сайдбар. Найчастіше сайдбар знаходиться у файлі sidebar.php, проте це може бути також файл з ім'ям sidebar-left.php і т.д. Якщо ваша тема має кілька сайдбарів, то файлів може бути кілька.

Ви можете бути впевнені, що йдете вірним шляхом, якщо ви знайшли наступний код:

Ви повинні змінити його, щоб підключити інший сайдбар для головної сторінки. Наприклад:

Тепер для головної сторінки виводитиметься сайдбар «right-home-sidebar», а для всіх інших – «right-sidebar». Ми можемо розширити цей приклад, додавши трохи логічних виразів. Наприклад, наступний код генеруватиме різні сайдбари для головної сторінки, окремих записів та рубрики 3. Врахуйте, вам потрібно буде для початку зареєструвати їх, перш ніж ви зможете використовувати їх у темі.

Сайдбар як частина сторінки

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

Інформація про запис

свій

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

Виноски в сайдбарі

свій

Я часто лишаю виноски в межах моїх довгих записів. Зазвичай виноски знаходяться всамому низу сторінки. Однак ви могли б виводити примітки в сайдбарі поряд із вашим контентом для більш простих посилань. Реалізувати це можна за допомогою плагіну Side Matter.

Використовуємо вільний простір сторінки

сайдбар

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

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

Звичайно, ви можете застосувати свої власні цикли для сайдбару. Примітна особливість такого підходу – ви можете вибирати, вмикати чи виключати деякі ID записів.

Відсутність сайдбару

сайдбар

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

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

Люблю скромні сайдбари

Як ми побачили, сайдбар може бути набагато більшим, ніж просто мертве місце або місце, куди ви додаєте віджет Facebook, тільки щоб забити його чим-небудь. Сайдбар може бути корисною локацією вашого блогу, пропонуючи розширену інформацію та додаткову навігацію. Він може стати частиною контенту. А може і взагалі бутиприбраний. Вибір за вами.