Вбудований у WordPress візуальний редактор сайту має назву Gutenberg. У ньому ви будете створювати з блоків сторінки, статті та віджети. У статті розказуємо, як влаштований Gutenberg та як у ньому працювати.
Базові дії з публікацією
Перш ніж працювати з блоками, варто навчитися виконувати базові дії з публікацією: зберігати зміни, відновлювати попередні версії, відкривати попередній перегляд та інші глобально важливі речі.
Вхід/вихід з редактора
Щоб увійти до редактора блоків, перейдіть у розділ «Сторінки» або «Записи», наведіть курсор на будь-яку публікацію та оберіть «Редагувати».
Щоби вийти з редактора блоків та повернутися до майстерні, натисніть у лівому верхньому куті на іконку сайту або ж логотип WordPress (якщо ви ще не завантажували іконку).
Збереження змін
Щоб зберегти зміни, у верхньому правому куті є кнопка «Зберегти» (або «Опублікувати», доки сторінку/запис ще не опубліковано). При натисканні на цю кнопку зміни побачать всі відвідувачі сайту. До цього вони будуть видимі тільки для вас у редакторі.
Попередній перегляд сайту
Ліворуч від кнопки «Зберегти» розташована кнопка у вигляді ноутбука. Це версії сайту для різних пристроїв. За замовчуванням активна версія для комп’ютерів, також є версія для планшетів та смартфонів. Корисний режим, щоби перевірити, як сайт виглядає на різних екранах, перед тим як опублікувати зміни.
Кнопка «Попередній перегляд в новій вкладці» дозволяє переглянути зміни безпосередньо очима відвідувача. Це більш реалістичний перегляд ніж у редакторі. Інколи в редакторі контент не вміщається через невеликі поля по бокам, але безпосередньо на сайті все виглядає нормально.
Бокові панелі
Також ліворуч від кнопки «Зберегти» розташовані перемикачі бокових панелей. Спочатку тут буде лише одна панель, але різні плагіни чи теми можуть додавати додаткові.
Головна бокова панель редактора має квадратну іконку. На цій панелі знаходяться основні налаштування. Вкладка «Сторінка» — основні параметри публікації, вкладка «Блок» — параметри будь-якого блоку, який ви оберете в робочій зоні.
Бокова панель з іконкою «A» — це бокова панель теми «Astra». На ній можна змінити деякі глобальні налаштування тільки для обраної публікації: обрати інший макет, увімкнути чи вимкнути бічну колонку, вимкнути шапку або підвал.
Тема Astra — одна з найбільш популярних у WordPress. У неї більше мільйона активних встановлень та активні розробники, які давно розвивають цей продукт та навіть випускають для нього різні розширення.
Стаття на тему 👀
Огляд теми «Astra»
Бокова панель з іконкою «S» на скриншоті — це бокова панель плагіна «Specta». На ній можна зберегти CSS-код, який буде поширюватися тільки на обрану публікацію.
Плагін «Spectra Legacy» — це інструмент від розробників теми «Astra», який додає у редактор WordPress більше 30 додаткових блоків, які дуже розширюють можливості по створенню сайту.
Стаття на тему 👀
Огляд плагіна «Specta Legacy»
Попередні версії публікації
Одна з найважливіших опцій на головній боковій панелі — «Редакції». Це попередні версії вашої сторінки. Кожен раз, коли ви натискаєте кнопку «Зберегти», зберігається нова редакція.
Щоби відновити попередню редакцію, знайдіть її на шкалі зверху та натисніть «Відновити». Під шкалою відображається, що саме було видалено та додано в тій чи іншій редакції. Коли закінчите, вийти звідси можна за допомогою кнопки «Перейти в редактор» вгорі.
Ще у WordPress є автоматичне збереження змін. Воно відбувається раз на хвилину. Якщо прослідкувати за кнопкою «Зберегти», ви помітите, що раз на хвилину вона стане сірою та не клікабельною. Це і є момент автозбереження.
Якщо оновити вкладку після автозбереження, зверху з’явиться жовта підказка, яка веде у розділ з редакціями, щоби можна було відновити автоматично збережені зміни.
URL-адреса публікації
Ще одна важлива опція на головній боковій панелі WordPress — «Посилання». Вона дозволяє змінити ту частину посилання на сторінку, яка йде після домену. Зазвичай після створення нової публікації у цій опції будуть цифри або слова з заголовку. Щоб це змінити, клацніть на цифри та вкажіть свій варіант, наприклад, blog або contact.
Опція «Посилання» буде неклікабельною для головної сторінки сайту, бо URL цієї сторінки це завжди суто домен, без жодних додаткових символів.
Головну сторінку треба призначати окремо у налаштуваннях платформи. Це робиться у розділі «Налаштування – Читання». Перша ж опція у цьому розділі — «Ваша домашня сторінка відображає». Оберіть варіант «Статична сторінка», а потім безпосередньо необхідну сторінку з випадного списку.
Базові дії з блоками
В редакторі боків є три зони, за допомогою яких ви будете взаємодіяти з наповненням ваших сторінок: на верхній панелі, на головній боковій панелі праворуч та на спливаючій панелі над обраним блоком.
Спочатку розглянемо першу зону — верхню панель. На ній можна додати новий блок, відновити чи повторити дію та переглянути усі блоки на сторінці у вигляді списку.
Додавання нового блоку
Щоби додати новий блок, треба натиснути кнопку із плюсом у верхньому лівому куті верхньої панелі. Після цього відкриється бокова панель з блоками. З неї можна вручну перетягувати блоки на потрібне місце, а можна натиснути на потрібний блок, після чого він додасться під блоком, який зараз обрано у редакторі.
Також кнопка для додавання блоків буде з’являтися прямо в робочій зоні редактора. Якщо на неї натиснути, з’явиться більш компактна панель з часто вживаними блоками. При натисканні кнопки «Переглянути всі», відкриється повна бокова панель.
Скасування/повторення дій
Стрілка назад скасовує дію, стрілка вперед — повторює. Також працюють стандартні комбінації клавіш Ctrl + Z та Ctrl + Shift + Z.
За замовчуванням WordPress запам’ятовує 100 дій. Якщо треба повернутися більш ніж на 100 дій назад, треба відновлювати попередню редакцію.
Огляд документа
Це бокова панель зі списком усіх блоків на сторінці та їх ієрархію. Супер корисна опція, щоби швидко знайти потрібний блок аби його видалити, перемістити, дублювати або ж просто обрати для редагування. Така потреба може виникнути бо кожна секція часто складається з багатьох блоків і обрати потрібний блок мишкою не завжди буває зручно.
Щоб знаходити блоки було легше, ви можете перейменувати контейнери, щоб вони мали назву відповідної секції. Наприклад, «Титульний банер», «Блок з перевагами», «Відгуки» тощо. Для цього натисніть біля потрібного блока на три крапки та оберіть зі списку «Перейменувати».
Параметри блоків
Редагування блоків відбувається у другій зоні редактора — на основній боковій панелі WordPress. Вона працює таким чином: ви обираєте будь-який блок у робочій зоні, після чого на боковій панелі з’являються його параметри.
Параметри блоків будуть розташовані на одній або двох вкладках (залежить від блоку). Наприклад, у простих текстових блоків таких як заголовок, параграф або список всі опції розміщуються на одній вкладці. У деяких інших блоків опцій буде більше, тому вони будуть присутні на двох вкладках: «Налаштування» та «Стилі».
Деякі опції зі старту можуть бути приховані. Щоб їх увімкнути, натискаєте на три крапки біля назви розділу, та бачите список всіх наявних опцій. При натисканні на опцію, вона додається на бокову панель.
Наприклад, у розділі «Колір» за замовчуванням є дві опції: «Текст» і «Фон». Але є також прихована опція — «Посилання».
Більшість реально корисних опцій завжди відображається одразу. Єдиний виняток — це відступи. Вони зазвичай приховані та знаходяться у розділі «Розміри».
За замовчуванням відступи зазначаються за допомогою бігунків. Але якщо натиснути на іконку з налаштуваннями, з’явиться поле, де можна вручну ввести цифру з потрібним розміром.
Лишається розглянути третю зону для роботи з блоками — спливаючу панель над блоком, який ви обрали. На ній можна знайти різні загальні службові опції на кшталт змінити ширину блоку, перемістити, скопіювати, дублювати, видалити тощо.
Переміщення блоків
За допомогою стрілочок можна легко здвинути блок на один рівень вище або нижче. Наприклад, так можна рухати цілі секції. Або ж рухати місцями колонки.
Також є альтернативний варіант для переміщення блоків — крапки. За них можна взяти блок мишкою і перетягнути в потрібне місце. Те, куди він приземлиться, відзначається синьою лінією.
Змінення ширини блоків
Якщо вам знадобиться змінити ширину блоку — наприклад, розтягнути його на весь екран — це робиться за допомогою опції «Вирівняти» верхній панелі. Вона буде не в усіх блоків, проте у більшості.
Видалення/дублювання/копіювання блоків
Всі подібні службові дії знаходяться у меню швидких дій з блоками. Щоб його відкрити, натисніть на три крапки на спливаючій панелі праворуч. Після цього з’явиться список доступних опцій.
Лайфхаки для роботи в Gutenberg
У цьому розділі буде декілька порад, які допоможуть використовувати редактор WordPress на більш високому рівні.
1. Використовуйте / для швидкого додавання нових блоків.
Так вам не доведеться щоразу відкривати панель із блоками та прокручувати її, щоб знайти потрібний. Просто введіть з нового рядка косу риску / і почніть вводити назву блоку. По ходу введення у спливаючому вікні з’являтимуться варіанти. Коли побачите потрібний, виберіть його за допомогою стрілок на клавіатурі та натисніть «Enter».
2. Закріпіть спливаючу панель із параметрами блоку
Іноді спливаюча панель перекриває вміст у блоку, що стоїть вище. Якщо вам це не подобається, її можна закріпити на окремому рядку під верхньою панеллю Gutenberg. Для цього натисніть на верхній панелі праворуч трикрапку та клацніть по першій же опції «Верхня панель інструментів».
3. Використовуйте редактор коду для редагування вмісту в HTML-форматі
Так ви зможете відредагувати HTML-атрибути блоку, надати свій CSS-клас або написати для блоку вбудований код. Щоб перейти в такий режим, виберіть блок, клацніть на три крапки на спливаючій панелі праворуч і виберіть опцію «Редагувати як HTML».
Також ви можете увімкнути редактор коду одразу для всіх блоків. Для цього клацніть по трійці на верхній панелі Gutenberg праворуч і виберіть опцію «Редактор коду».
4. Додайте якірне посилання на будь-який блок
Так ви зможете створити зміст у статті, верхнє меню на лендингу або просто посилання на конкретне місце в будь-якій публікації. Просто оберіть потрібний блок і заповніть опцію «HTML-якір» на бічній панелі в розділі «Додатково».
Заповнювати краще латинськими літерами. Після цього, HTML-якір потрібно додати до посилання зі знаком #. Наприклад, https://vashdomen.com/#vidguky .
5. Швидко знайдіть потрібний блок за допомогою змісту
Це зручно, якщо у вас у публікації є секції, в яких багато вкладених блоків і не виходить вибрати потрібний, наприклад, колонку таблиці. У цьому випадку натисніть на верхній панелі Gutenberg ліворуч кнопку з трьома горизонтальними смужками та виберіть потрібний блок у змісті, який з’явиться на бічній панелі.
6. Перетягуйте зображення в редактор прямо з комп’ютера
Так вам не доведеться щоразу додавати блок «Зображення» та натискати додаткові кнопки. А синя лінія допоможе розташувати картинку одразу в потрібному місці.
7. Використовуйте гарячі клавіші
Працювати в редакторі записів WordPress стане набагато простіше, якщо ви запам’ятаєте прості комбінації клавіш для популярних дій:
- Ctrl+S — зберегти публікацію;
- Ctrl + Z — скасувати дію;
- Ctrl + Shift + Z — повторити скасовану дію;
- Ctrl+K — вставити посилання на виділений текст;
- Ctrl + Shift + K — Видалити посилання;
- Ctrl + Shift + D — дублювати вибраний блок;
- Ctrl + Shift + , — показати/приховати бічну панель;
- Ctrl + Alt + T — додати новий блок перед вибраним блоком;
- Ctrl+Alt+Y — додати новий блок після вибраного блоку.
Якщо у вас Mac, замініть Ctrl на Command (⌘), а Alt на Option (⌥).
Також ви відкриєте повний список гарячих клавіш, якщо натиснете таку комбінацію:
- Shift + Alt + H — для Windows;
- Control (⌃) Option (⌥) + H — для Mac.
Альтернативний спосіб відкрити список гарячих клавіш — натиснути на трійку на верхній панелі Gutenberg і у спливаючому вікні вибрати опцію «Гарячі клавіші».
Що далі
Сподіваємося, ця стаття допомогла вам розібратися з тим, як працює редактор блоків WordPress. Якщо у вас залишаються питання, поставте їх у коментарях до цієї статті та ми спробуємо дати відповідь.
Наступним кроком після знайомства з редактором має бути створення перших секцій або сторінок. У нас є окрема стаття на цю тему, де процесс описано через простий, але дієвий принцип побудови секцій, який ми називаємо «Принцип 3К».
Стаття на тему 👀
Як створювати секції у WordPress