Як каже Вікіпедія, WordPress з’явився в 2003 році. Кіномани б назвали його пре-релізом. Роком пізніше, в 2004 році, з’являється версія 1.2, яка вже вміє підтримувати плагіни. Минають роки, версії оновлюються, змінюючись і набуваючи нових функцій. З розвитком інтернету і переходом до блокового представлення інформації серед плагінів з’являється Gutenberg — редактор нового покоління.
Класичний
На цей час основною версією редактора є (як зараз називають) класична. Основним плюсом класики була можливість редагувати пост прямо в редакторі. Багато хто і писав так. Але були у класики і серйозні мінуси — зокрема представлення таблиць і різних форм підписки. Як правило, для представлення форми існує спеціальний код, спеціальний стиль, він конфліктує зі стилями теми — в результаті те, що красиво виглядало на сайті компанії, в движку роз’їжджалося в сторони. Для правильного і красивого відображення доводилося або писати для таблиці інші (відмінні від отриманих зовні) стилі, або як варіант — видаляти з теми згадку про таблиці. Що теж не вихід — якщо досвіду мало або неуважно перевіряти, можна видалити зайвого або залишити якісь «вуха». За запевненнями розробника — в новому редакторі таке було вирішено.
Редактор нового покоління
Абзац вище став деяким відступом, а також для кращого розуміння — на картинках, які будуть з’являтися по тексту, буде цей же текст
Далі будемо говорити тільки про Гутенберга. Зізнаюся чесно, я сам належав до тих, хто першим ділом встановив обидва плагіни “Classic Editor”, поекспериментував з кожним, залишив один, щоб не було нашарувань, і заспокоївся. Але оскільки я створюю сайти не тільки на движку, (з’явилися непогані рішення на конструкторах) дуже скоро я теж зіткнувся з блоковим текстом. А читаючи якось замітку в онлайн-версії Forbes (не реклама, тому посилання не дам😃), я помітив, що навіть вони не особливо заморочуються і пишуть блоками.
Отже, час минав, і 6 грудня 2018 року виходить 5 версія движка з новою темою наступного року (про це ми поговоримо у відповідній рубриці движка) і кардинальним рішенням.
Рокіровка
Крім звичайних оновлень і виправлення помилок, редактори міняються місцями. Гутенберг з плагінів переїжджає на місце основного редактора для сторінок і записів, а класичний займає його місце в плагінах. Як уже згадувалося вище — в плагінах представлено два, один з яких підтримується творцями движка, а другий звичайним користувачем, таким як ми з вами. Основною рисою нового редактора стало те, що в більшості випадків контент краще підготувати заздалегідь, а в адмінці WordPress вже розкидати по блоках, оформити технічні дані і натиснути опублікувати. Втім, якщо ви користувалися новим, вкладковим інтерфейсом останніх версій офісу, можливо, ви і не відчуєте різниці. Другою цікавою деталлю стало те, що «класичний» редактор нібито і перейшов у плагіни, проте якщо Гутенберг помітить, що редагований запис набирався в старому редакторі, він запропонує або перевести його в блоковий формат, або викличе старий “класичний” варіант.
Викликати старий?
Ось, наприклад, чернетка запису, в якій я налагоджую всякі дрібниці типу банерів.
- Перша кнопка — розділити на колонки або деталі. Але ділити банер (до речі, він робочий, подивіться внизу запису) — безглуздя.
- Друга зліва пропонує переформатувати текст у блоковий (новий вигляд).
- Третя — “Редактувати” викликає класичний редактор. Пробуємо натиснути на неї, попередньо виділивши наш блок із банером, і у спливаючому вікні відкривається стандартний редактор, який вже отримав назву “Класичний”.
Новий банер для блогу я поки що малювати не буду, тому закриваю редактор стандартним чином і повертаюся до панелі меню.
Четверта кнопка меню в (конкретно цьому) запису не має особливого сенсу. У випадаючому списку представлені всі функції редагування, якими користуються при використанні Гутенберга. До того ж, якщо подивитися на зображення вище абзацу, «класичний» редактор затуляє цю кнопку. До її опису повернемося трохи нижче. А далі подивимося, що відбувається, коли ми
Починаємо новий пост
Стандартно натиснувши на посилання «Додати запис» у блоці «Записи». Гутенберг відкриває нам нове вікно. Спочатку, коли ви ще нічого не написали, воно буде виглядати ось так:
Починаючи цей пост я вже таке посилання натискав, тому в мене воно прийме другий погляд (нагадую що картинки зминаються прямо в момент написання цього поста)
Розбір верхньої частини вікна
Почнемо з центру вікна (на світло-сірому полі). Звернемо увагу, що при першому збереженні чернетки тут з’явилася назва мого посту з позначкою, що я редагую запис. Комбінація клавіш, наведена тут, особливого сенсу не має — це список частих команд, де їх побачити, поговоримо пізніше. Далі посилання, звичайного синього кольору — воно буде активним до тих пір, поки я не збережу останні зміни в пості. Зберіг — воно стає сірим, поки не зміню пост знову. Якщо редагувати вже опублікований запис — посилання не буде. Можливість зберегти зміни буде на місці кнопки “опублікувати”, яку розглянемо трохи нижче. У опублікованому записі буде також кнопка зі стрілкою в правий верхній кут — вона надає можливість подивитися, як виглядає запис на сайті. У чернетки її, звісно, немає — вона не опублікована. Далі йде кнопка у вигляді сильно стилізованого десктопа — вона пропонує можливість подивитися, як буде виглядати готовий текст на різних девайсах — комп’ютері, айпаді або мобільному.
Чорна кнопка з контурами білого прямокутника, хоч і має іншу назву, дозволить приховати праву панель інструментів, ймовірно, розрахунок на малі екрани.
Приховати ліву — якщо вона у вас є, можна тільки в налаштуваннях редактора, крайня права кнопка. Про налаштування з докладними картинками буде нижче. Найголовніша кнопка, яка пофарбована в блакитний колір для стандартної теми — “Опублікувати”. Думаю, її значення розшифровувати не потрібно. Як уже писав вище, у вже опублікованих записах вона має інше значення — зберегти зміни.
Лівий верхній кут
Кнопки в лівому куті зрозумілі з опису. Велика чорна кнопка з логотипом сайту з’явиться тільки якщо працювати без лівої панелі (за замовчуванням Гутенберг стартує саме так, але запам’ятовує попереднє рішення. Якщо панель відкрити, наступного разу вона з’явиться теж).
Наступна кнопка, синій плюсик, дозволяє додати в текст новий блок. Крім текстових елементів, нові версії движка дозволяють вставляти масу елементів, навіть відео з YouTube.
Меню у вигляді злегка зсунутого гамбургера — це своєрідний зміст тексту. Кожен доданий елемент отримує своє посилання в цьому «змісті». Правда, інформативні тільки у заголовків. На мою особисту думку, зручніше зміст тільки за заголовками — перейти до нього можна в тому ж меню, натиснувши на посилання контур.
Стрілки вперед і назад — відповідно повторить або скасує останню дію.
Три крапки. Що за ними?
У правому верхньому куті, ще правіше кнопки «публікувати» є кнопка із зображенням трьох крапок по вертикалі. У вікнах додатків так іноді позначають налаштування. Гутенберг не став винятком. Тут він приховав тонкі налаштування, які впливають на відображення вікна, але для більшості користувачів «вистачає» базових налаштувань. Однак, наприклад, перевести редактор в режим відображення коду можна тільки там. Там же є кілька цікавих налаштувань, тому розглянемо все меню більш детально.
Перший блок — 4 кнопки, що відповідають за зовнішній вигляд вікна редактора. Зверху вниз;
- Верхня панель. Якщо вам не подобаються спливаючі вікна над кожним блоком — їх можна закріпити на верхній панелі замість сірого поля із заголовком, праворуч від кнопки додавання нового блоку. Меню не втрачає свого функціоналу, відображає тільки можливості, доступні для поточного блоку, але буде сидіти на одному місці.
- Для кращого розуміння я пропущу один блок і відразу перейду до режиму освітлення. Зображення нижче чітко показує суть роботи обох блоків. Панель закріплена вгорі, а на екрані залишився видимий тільки активний блок — заголовок. Все інше висвітлено.
- Пропущений другий блок приховує всі панелі за межами вікна — перед вами тільки контент, без відволікання на інші деталі. Досить підвести мишу до місця, де має бути меню, і воно з’явиться. До речі, відволікання скидає галочку з першого пункту, тому повернути меню на панель доведеться повторно (якщо ви хочете, щоб воно було саме там).
- Четверта кнопка блоку, незважаючи на гучну назву, просто повертає на екран ліву панель вікна WordPress (в редакторі вона зазвичай прихована за кнопкою з логотипом сайту)
Другий блок — 2 кнопки. В принципі зрозуміло з назви — тут можна переключитися на написання тексту за допомогою кодів. За замовчуванням редактор пропонує блоки, але якщо автор добре знає мову HTML, він може перейти на написання контенту таким чином. В окремому пості я розгляну якийсь із опублікованих на той час текстів — як він виглядає в коді. Зроблю копію, створю чернетку і опишу, що з цього вийде. За час моєї роботи розробником я якось заради інтересу спробував Elementor. Він якраз тоді тільки вийшов. Судячи з того, що я бачу — можуть бути цікаві паралелі.
Блоку плагінів у вас може і не бути — у мене преміумний сео-плагін, він у редакторі закріплений аж у 3 місцях. Це одне з них. Тому перейду до інструментів.
Блок складається з 5 пунктів, назви яких зрозумілі і без коментарів, але для закриття питання з цим меню, дам короткий опис і їм. Знову зверху вниз
- Гарячі клавіші. Клавіатурні скорочення, що використовуються в редакторі. Вгорі (в сірому блоці) написано одне, тут наведено всі (відкриється нове вікно з описом усіх можливих комбінацій)
- Копіювати всі блоки. Саме для того, про що я писав парою абзаців вище, призначений цей пункт. Можна одним натисканням виділити всі блоки в редакторіДопомога. З огляду на значок праворуч — ця кнопка відкриває в новій вкладці опис редактора на офіційному сайті движка.
- Керувати паттернами. У деяких розширених темах розробник може запропонувати кілька додаткових функцій для контенту. Вони доступні як з налаштувань теми, так і звідси. Можливо, я згодом ще повернуся до цього пункту, але поки що у мене їх немає.
- Початкова інструкція. Короткий мануал на кілька сторінок описує, як працювати з редактором (мануал англійською)
- Нарешті, останній блок, який я спеціально не буду описувати. Більшість функцій з цього блоку можна налаштувати іншими кнопками меню. Налаштовуючи щось тут, потрібно чітко розуміти, що, а головне, як це змінить у вікні редактора.
Висновок
На прикладі цього ж тексту я описав, що може побачити користувач у вікні нової версії редактора. Розробники добре попрацювали, а наші українські хлопці попрацювали над перекладом, тому якщо перед написанням витратити трохи часу — проблем не виникне. Блоки сео-плагіна я описувати не став, так як це окремий елемент — у вас він може виглядати і інакше.
Наступним кроком у вивченні редактора буде практичний досвід. Я підготую текст, картинки і за «одне» присідання опублікую новий пост. Лапки ставлю тому що, звичайно ж, буду знімати картинки і робити пояснення. Але в результаті пройдемо всі кроки, а ви, читаючи, зможете порівнювати написання і готовий пост, посилання на який я наведу в кінці запису.
