Налаштування макета сторінки WordPress для Gutenberg та Spectra

Налаштування макета сторінки WordPress для Gutenberg та Spectra (Astra Settings)

Налаштування макета сторінки (запису) для Gutenberg та Spectra на сайті з WordPress темою Astra – контейнер, бічна колонка (сайд-бар), вимикання елементів, розширені налаштування тощо.

Сучасне та ефективне рішення для створення сторінок або записів (статей) на сайті з темою (шаблоном, темплейтом) Astra – використання блокового редактора Gutenberg з “рідним” для Astra аддоном (розширенням) Spectra. Тож розгляньмо, чому саме Gutenberg став основою сучасного підходу до створення сторінок.

Gutenberg натепер – забезпечує найлегші, а відтак – найшвидші сторінки на WordPress. Конкурувати з котрими можуть лише сторінки, створені за допомогою плагіна Advanced Custom Fields, або інтегрованого html коду. Втім, на відміну від останніх, Gutenberg не потребує спеціальної кваліфікації, знання коду тощо. Він інтуїтивно зрозумілий, достатньо простий, гнучкий. Цей блоковий редактор дозволяє довільно створювати майже будь-які макети сторінок в режимі конструктора.

Налаштування макета сторінки WordPress для Gutenberg та Spectra

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

Варто визначитися з декотрими термінами. А саме:

Відображення Сторінок та Записів у консолі адмінпанелі WordPress
  • Сторінка – це власне сторінка, котра в адмінпанелі зазначена в переліку сторінок у вкладці “Сторінки”. Сторінка – це умовно постійна частина сайту, котра несе сталу інформацію відповідно до свого призначення. Сторінка може бути “Головна”, “Блог” – централізовано призначена сторінка, на котрій відображаються прев’ю статей блогу (записів). Також можуть існувати будь-які тематичні сторінки – “Про нас”, “Контакти” тощо. Для сторінок також доступна ієрархія – можуть бути сторінки вищого рівня, й підсторінки нижчих рівнів.
  • Запис. Технічно – така саме сторінка, котра має лише дві відмінності. По-перше, вона в адмінці розміщена у вкладці “Записи”, в переліку статей блогу. По-друге, за замовчуванням (“за дефолтом”), Запис від народження має таксономії, а саме: категорії (рубрики), та мітки. Про те докладніше у відповідних статтях.

Отже, коли ми кажемо про налаштування сторінок сайту WordPress взагалі, або безпосередньо для Gutenberg та Spectra – ми маємо на увазі загальні налаштування і “Сторінок”, і “Записів”, попри декотрі відмінності між ними.

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

Оскільки макетом на сайті, де встановлена Astra, керує саме вона, з цього й почнемо.

Налаштування макета сторінки

Перш за все, треба визначитися з такими параметрами, як ширина макету, та його окремих елементів.

Зазвичай на сайті встановлено якийсь за стартових макетів.

На Астра частіше пишуть – англійською – “Starter Template” та “Website Template”, де “Template” – то буквально “шаблон”. Але й сама Astra – це також “Template”, як і багато інших шаблонів (тем) для ВордПресс. Тож за для уникнення плутанини в термінах, називатимемо “Стартовий макет” те, що пропонується від Астра, як готова збірка сайту, котру можна встановити за допомогою плагіну Starter Templates або Premium Starter Templates.

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

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

Для індивідуальних налаштувань використовуємо консоль налаштувань Astra в редакторі Gutenberg. За замовчуванням вона закрита, тож для її використання маємо її відкрити.

Налаштування макета Gutenberg Spectra Astra - відкриття консолі

Для цього робимо клік у відповідну іконку у верхній панелі редактора, праворуч.

Таким чином активуємо консоль налаштувань Астра, в котрій зможемо змінити потрібні параметри з “глобальних” на такі, котрих потребує саме ця сторінка.

Після активації бачимо консоль у розгорнутому вигляді:

Як бачимо, консоль одразу відкрита на вкладці “Контейнер”.

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

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

Те саме – зі стилем контейнера – виділено синім нижче. І додано зауваження:

Стиль контейнера буде застосовано, лише якщо макет встановлено як звичайний або вузький.

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

Налаштування макета Gutenberg Spectra Astra - відкрита консоль Astra Settings
Налаштування макета Gutenberg Spectra Astra - налаштування ширини

За потреби можемо перейти з “глобальних” налаштувань контейнера на інші на свій смак.

Можна просто поекспериментувати, або наслідувати перевірені на інших сторінках параметри.

Зауважимо, що вибір ширини контейнера всієї сторінки визначає лише її граничну ширину, бо кожен контейнер (окремий блок) контенту можна налаштувати індивідуально.

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

Тут налаштовуємо наявність чи відсутність сайд-бару (бічної колонки).

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

Якщо ж дефолтні налаштування для поточної сторінки неприйнятні, можемо обрати потрібне, всі 4 варіанти на скріні:

Налаштування макета Gutenberg Spectra Astra - налаштування ширини макета

Так само як і з контейнером сторінки, за потреби можемо обрати бажаний стиль бічної колонки.

Налаштування макета Gutenberg Spectra Astra - вимкнення елементів

Астра дає можливість вимкнути відображення у фронті певних елементів, котрі мають загальний характер для всього сайту. Це хедер (“шапка”), футер (“підвал”), та область банера.

Якщо щось з зазначеного не потрібне для цієї сторінки – просто активуйте перемикач (зсуньте праворуч, як на скріні “вимкнути область банера”. Тоді елемент буде скритий з фронту.

Втім, тут – лише ці елементи, а є ще й інші перемикачі, а саме:

Цей інструмент не відкривається безпосередньо у консолі. Натомість, за кліком, в центрі екрана з’являється Pop-up (поп-ап, вікно, що спливає).

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

Отже, кожен для свого випадку також може обрати – чи чіпати ті налаштування. А якщо щось змінювати – то що саме, і як саме.

Налаштування макета Gutenberg Spectra Astra - розширені налаштування
Налаштування макета Gutenberg Spectra Astra - спливаюча панель розширених налаштувань

Тут наявні перемикачі вимкнення основного хедера та мобільного заголовка. Так само: хочемо вимкнути для цієї сторінки – перемикач зсуваємо праворуч.

Нижче – перемикач прозорого хедера. Звісно, якщо він існує на сайті – це не обов’язково має бути. Тож залежно від його наявності, й того, чи він потрібен на цій сторінці – або залишаємо “Успадковано”, тобто – дефолтні налаштування кастомайзера. Або – обираємо ввімкнути чи вимкнути.

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

Тоді за дефолтом на сторінці Запису (статті) прозорого заголовка не буде. Але ми можемо тут його ввімкнути. Ну, й навпаки.

Коли консоль налаштувань Astra Вам більше не потрібна – просто закрийте її вимикачем-хрестиком, як на скріні.

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

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

Відкріплення консолі Astra Settings

Отже, щодо налаштувань макета сторінки WordPress для Gutenberg та Spectra у консолі Astra Settings – все.

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

Прокрутка до верху