Спочатку я не думав писати окремий запис, поклавши все в перший пост. Але коли я зрозумів що права панель, а особливо меню трьох крапок розтягне той пост до астрономічних позначень — родилася ідея і сьогодні я готую другу частину теми, де на прикладах розкажу як писати, та оформляти пост в новому редакторі і наскільки це зручніше (а може і ні) старого TiniMCE. Можна побачити що права панель Gutenberga пішла за схемою розвитку таких же панелей в других редакторах — змінювати вміст в залежности від того, що ми маємо в головному вікні.
До речи, в переліку блоків осталася можливість відкрити старій редактор і писати саме в ньому. Gutenberg на це зневажливо фуркне, пропонуючи переформатувати текст під блоки, але і заважати не буде. Для відкриття потрібно в самому низу переліку блоків знайти блок “класичний” і вуаля! TiniMCE знову перед вами.
Публікація запису
Отже, я беру готовий текст, картинки і посилання для нового запису та переходжу до його оформлення.
Я вже десь про це говорив, але повторюся ще раз — під час знайомства з новим редактором я спочатку зайшов у плагіни, завантажив стару версію і перший пост писав у ній. Але оскільки це був перший пост… (я його, як і раніше, іноді переглядаю), зараз вже всі плагіни старого коду вимкнені, а всі записи пишуться в новій версії.
Також повторюся, що якщо ви плануєте створення банера для бічної панелі, або будь-який інший фрагмент тексту, який краще редагувати з використанням HTML, Гутенберг залишив під собою редактор коду — переключитися на нього можна з меню, яке з’явиться після натискання 3 крапок у правому верхньому куті.
Маленька порада. Не знаю, як пишуть інші, але мені іноді потрібно побачити, як виглядає картинка або текст на головній, в меню, списку публікацій, тому я можу опублікувати неготовий текст у відображенні тільки для себе, але при цьому виставлю всі заборони для індексації запису в пошукових системах. Як їх налаштувати, перевірити, включити — буде нижче.
Заголовок нового посту
Однією з особливостей нового редактора стала робота із заголовком. Такого варіанту, як був у класичному, залишити запис без заголовка більше не передбачено. Якщо розраховується публікація на сайті, заголовок у записі ПОВИНЕН бути. Іноді, звичайно, його важко спочатку придумати, але при остаточному перегляді його потрібно вставити.
Переходимо в адмін частину сайту, в розділ Записи, де вибираємо Додати запис.
Тут додам ще пораду. В принципі для роботи нам цього як би достатньо, однак якщо ви заздалегідь завантажили файли зображень або відео, можливо редактор варто відкривати в новій вкладці. Для цього достатньо утримувати CTRL при натисканні на кнопку.
Новий запис
У текстового заголовка особливих налаштувань як би і немає. Шрифт, розмір, накреслення задаються обраною темою. Але є одна особливість, якої позбавлені всі наступні блоки, саме тому, ймовірно, заблокована можливість опускати заголовок.
На початку у нас нічого ще не написано, тому ми бачимо чисте «поле для творчості». У мене заголовок вже придуманий, я вводжу саме його (до речі, опублікований запис потрапить в рубрику плагінів, завжди знайдете його там).
Заголовок мого нового запису
На зображенні уважно дивимося на сірий рядок у центральній частині верхньої панелі та праву панель. Заголовок запису використовується в 4 (!!!) місцях. Безпосередньо запис — в тому полі, куди його щойно ввели, в переліку записів в карті сайту або в конкретній рубриці, і в назві запису, як її покаже пошукова система, а в наслідок браузер користувача (хоча останнє значення можна буде змінити в блоці SEO перед публікацією). Також воно видно ще у вікні мініатюри запису — маленьке нагадування, що якщо залишити вікно порожнім, швидше за все, картинки не буде і в списку публікацій. Буде тільки назва і уривок, або окремий текст, якщо ви потурбуєтеся про його написання.
Пишемо пост
Переходимо до створення контенту. Деякі відразу під заголовок ліплять велику картинку — обкладинку поста. Іноді вона не відрізняється від картинки, під якою пост фігурує на головних сторінках, тоді при читанні їх може з’явитися дві. У мене картинка на головної відрізняється, але тим не менш я її все одно в налаштуваннях поста вимикаю, а перед картинкою кладу невеликий абзац тексту. Розрахунок на тих, хто буде читати з мобільного. Картинку поста вони побачать, але будуть впевнені, що у них відкрився пост, а не через погане з’єднання з мережею тільки одна картинка запису. Крім того, в деяких темах вже вбудовано, в інших можна включити плагіном невелику анімацію, яка зараз все більше набирає популярність — наприклад, картинка не просто з’явиться, а «прилетить» справа (зліва або зверху/знизу). І якщо інтернет гальмує — текст вже з’явиться, поки картинка буде повільно завантажувати скрипт анімації.
Всі блоки тексту я описувати не буду, вони у мене практично однотипні, тільки відмінності в списках. Опишу тільки один. Сподіваюся, читач зрозуміє, що інші збираються за тим же принципом.
Натискаємо на синій плюс у лівому верхньому куті або праворуч від тексту. Вони дублюються, але у верхньому більше інформації. Я віддаю перевагу натискати праворуч, але для кращого розуміння натисну верхній. Абзаци Gutenberg називає параграфами. В принципі, при введенні першого параграфа у вікні нічого не зміниться — це нормально. Якщо ви звернете увагу на малюнки 2 і 3 вище — під заголовком є підпис. Незважаючи на те, що написано — вже вибрано текстовий блок, параграф.
Ставимо курсор на початок підпису і пишемо свій текст. Редактор вставив текст в наступний (ніби не обраний) блок, але якщо таке сталося, перший можна і вручну видалити. (Також пораджу при вставки тексту из word 1 раз тиснути Backspace – Gutenberg намагаеться взяти всє, навіть попередне форматування)
Над абзацом відразу вискакує меню, а права панель переходить на вкладку блоки. Праву панель розглянемо трохи пізніше, але основні налаштування знаходяться в спливаючому меню. Для того щоб воно було на екрані — курсор повинен знаходитися в полі блоку.
Всі пункти виконані у вигляді випадаючих меню. Пройдемося по пунктах (зліва направо):
Значок у вигляді параграфа дозволяє змінити вигляд абзацу. Наприклад, його можна перетворити на заголовок, якщо згодом ви вирішите, що абзац так буде краще виглядати. Або якщо ви хотіли вставити не просто текст, а форматований код або лістинг програми. Частина пунктів доступні і з меню, показаного на 4 картинці, але повний список (а їх тут цілих 10 варіантів представлений тільки тут)
На картинке всі доступні в базовому наборі пункті
Два значки поруч — решітка і стрілки вниз-вгору дозволяють змінювати положення блоків. Більш детально розглянемо, коли додамо другий блок, так як для одного вони безглузді.
Третій значок, обмежений з двох сторін рисками, вирівнює текст. Доступні варіанти по лівому (за замовчуванням), правому краях або по центру. Інші ховаються в самому першому меню — можна зробити цитату, список або навіть вірш.
Наступна пара значків у вигляді B і І може зробити текст відповідно напівжирним або курсивом (розмір шрифту задається темою!!!)
Значок у вигляді кільця ланцюга пропонує додати до тексту посилання. Як і з накресленням, спочатку потрібно виділити слово, до якого застосовувати дію.
Стрілка вниз відкриває меню додаткових можливостей тексту (ліва картинка нижче). Вибране слово можна написати верхнім (або нижнім) індексом, додати до нього виноску, вставити в текст зображення або вбудований текст та інші (всього 10 варіантів).
Нарешті останній значок, також відокремлений рискою (права картинка вище) — функції роботи з усім блоком, перемістити, видалити, вставити, зробити дубль. Навіть можливість редагування як HTML.
Як вже зазначалося, на правій панелі для параграфа налаштувань мало, і звичайними користувачами більша частина не використовується. Якщо ви не вмикали жодних додаткових плагінів для редакції — у вас буде всього 1 меню.
Тут можна налаштувати колір і фон підсвічування для тексту. Дві кнопки бургера дають кілька додаткових опцій — в меню типографії можна змінити міжлітерний інтервал, регістр, ще раз перевірити накреслення. Найцікавіший варіант — буквиця. (Зробити першу букву абзацу висотою в весь абзац (для дитячих проектів може бути корисно)).
Про розмір я спеціально не вказував раніше — тут зібрано кілька команд для браузера, які працюють досить безглуздо. Для початку вони змінюють розмір тексту всього абзацу, по-друге, зовсім не зрозуміло — розмір XL це скільки? Це багато, але наскільки?
При натисканні кнопки “додатково” можна побачити ще пару пунктів. Перший — якір, корисний, коли у вас дуже великий текст і ви хочете направити користувача відразу в потрібне місце. Наприклад вище — замість другого показу картинок я переношу користувача відразу до неї. Другий пункт — додаткові можливості оформлення тексту, якщо ви знайомі з таблицями стилів (навіть якщо у тексту є в темі певні стилі — ці перепишуть їх, але тільки для одного поточного тексту).
Знову натискаємо на синій хрест (рис. 4) іі в списку, що з’явився вибираємо зображення, а потім, у відкрите поле завантажуємо картинку. Ось тут доречно буде можливість побачити — як це виглядає на сайті. Я роблю великі картинки (оскільки у мене сео плагін преміум — мені доступні майже всі його фішки, я роблю картинку відразу і для OG полів, і для соцмереж), але на мобільних гаджетах вона може виглядати погано. У даному випадку на картинку додано текст з сео опису.
Тут верхнє меню вже більше, та й в правій панелі буде більше можливостей.
Перший пункт зліва, як і в меню абзацу, пропонує можливість перетворити блок в інші варіанти — всього 6 пунктів від колонок до групи. Трохи нижче є ще стилі, але вони ж будуть на правій панелі.
Ось тут, маючи два блоки, можна поекспериментувати з решіткою і стрілками вгору-вниз. Стрілка вгору підніме картинку над текстом, стрілкою вниз повернемо її назад. Решітка діє за тим же принципом, але дозволяє пересувати блок відразу через декількох сусідів.
Кнопка, схожа на бургер, дозволяє вирівнювати зображення по лівому/правому краю або по центру. У мене розтягнута по горизонталі — її особливо не посунеш, але якщо картинка витягнута по вертикалі — можна досягти цікавого ефекту. Наприклад, робити багато тексту збоку, поставивши картинку обмежувальною гранью.
Трикутник, наступна кнопка дозволяє створити ефекти кольору, наприклад зробити з моєї картинки чорно-білу.
Вже знайоме кільце з ланцюжком, робить зображення посиланням як у параграфі. Але зображення в той же час — медіа-файл тому тут є ще два варіанти. Відкрити його в тому ж вікні або зробити збільшуваною при натисканні. Перший варіант покаже його в тій же вкладці в натуральний розмір (втім є можливість налаштувати, щоб відкрити в нової), другий просто збільшить до розмірів вікна — режим читання як в деяких браузерах. Правилами хорошого тону рекомендується використовувати третій (або другий) варіант.
Для тих, хто хоч раз працював з графічним редактором, наступний значок знайомий. Квадратик з хрестиками в протилежних кутах — обрізати зображення (хоча краще це робити в бібліотеці).
Меню з літерою додае текст на зображення (Втім нанести на зображення можна що завгодно. При виборі цього пункту викликається меню абзацу з усім арсеналом можливостей). Вихід з обох — стрілка назад на верхньой панелі редактору .
Нова кнопка, відокремлена рисками від сусідів, не потребує опису. Назва на ній досить точно описує її функцію.
Нарешті останній пункт – три крапки по вертикалі має ті ж можливості, що і в блоці абзацу – копіювати, вставити, видалити.
Налаштування зображення — бічна панель
На відміну від параграфа — зображення в бічній панелі має більше можливостей. Знову повертаємося до зображення 7
Стилі. Якщо у вас квадратна ілюстрація — цілком ймовірно, що із закругленими кутами вона буде виглядати краще. На розташування тексту це не впливає, але всього однією кнопкою тут можна зробити кути зображення закругленими.
Налаштування. Наступні пункти під рядком кнопок стилів.
Альтернативний текст — текстовий опис картинки (навряд чи зараз хтось користується інтернетом без картинок, але все ж опис може допомогти при поганій якості зв’язку). Оскільки у мене ця картинка — заголовок тексту, а на головній буде інша — я цю описувати ніяк не збираюся.
Пропорції. Цікава можливість, проте в кожному конкретному випадку потрібно пробувати. Якщо коротко — тут можна переформатувати відображення картинки як розмір монітора. Зараз монітори широкоформатні, їх позначають за співвідношенням сторін 16:10 (або частіше 16:9). АЛЕ був час, коли широкоформатний монітор — це було круто, всі користувалися квадратними моніторами і там роздільна здатність була 4:3. Якщо така можливість покращує вигляд картинки — її можна використовувати. (Я готував картинку раніше — жоден з налаштувань мені не допомагає.)
Ширина/висота. Тут можна змінити розміри картинки, якщо не зробили цього під час завантаження в бібліотеку.
Резолюція. Це налаштування керує тим, як картинка буде виглядати в записі — мініатюра, середня або повнорозмірна.
Додатково. Все те ж саме, що і в абзаці, за винятком можливості додати атрибут title — спливаюче нагадування над посиланнями. Оскільки у мене зображення з дрібним текстом, якого на мобільному може бути і зовсім не видно — напишу тут пам’ятку.
Подальшу роботу над текстом я описувати не буду. Перейду відразу до оформлення запису перед публікацією.
Готуємо публікацію
В принципі, я запис починаю з цієї підготовки, тому пройдуся по вже заповнених полях. Потім трохи по SEO (у мене преміум-версія і плагін не Yoast) і, швидше за все, на цьому буде крапка.
Отже, права панель, вкладка запис. Зауважу, що у мене вже всі дані є, але для картинки я поки залишу чисті поля.
Готуємо запис
Перше поле зверху перевіряє, що запис має заголовок. У мене є, переходимо далі.
Вставити зображення — картинка, встановлена тут, відобразиться в стрічці постів сайту. Якщо вибір невеликий — краще вставити її, але не використовувати обкладинку (зрозуміло, що при цьому мініатюра повинна з’являтися на сторінці одиночного запису теж, що у мене вимкнено).
Уривок. Автори старого зразка часто вставляли в текст тег
more/Тоді те, що вище потрапляло в уривок і відображалося в стрічці. У мене проблем скласти описовий уривок зазвичай немає, я сюди вставляю додатковий текст. Довелося навіть в темі міняти підпис під постами, замість читати повністю — читати статтю.
Статус. У цьому меню можна налаштувати видимість запису. Або це чернетка, або на затвердженні (коли на сайті є ще редактор, наприклад) або опубліковано. Окремо відзначу опцію заплановано. Якщо ви пишете по 2 статті на тиждень і збираєтеся на місяць у відпустку, не плануючи в цей період писати, можна зробити кілька постів, налаштувати їх, але не публікувати, а запланувати. Сайт сам буде їх публікувати в заданий час, а ви в цей час можете відпочивати на пляжі. Особисто я сам іноді використовую цю можливість на великі свята — написати пост о 4 годині ранку першого січня 😄. У це ж меню пішла функція закріпленого поста.
Статус
Опублікувати — простіший спосіб планування. Підтримується навіть хвилина публікації. Можна також вибрати опублікувати миттєво.
Наступне поле — закінчення назви посилання на пост. Зазвичай запис зберігається в стилі назва сайту, назва запису. Ось цю «назву запису» можна (і потрібно) змінювати. Чому? Незважаючи на те, що пошукова система нормально розуміє кириличні символи — до назв на них вона ставиться вкрай негативно. Якщо в назві залишилася національна (не транслітерована) назва, в індекс вона потрапить багатокілометровим записом незрозумілих символів. Запам’ятати таке, та ще й з першого разу, або розмістити на візитці буде дещо складно. У випадку цього запису — назва залишається англійською, але якщо планується називати пости не тільки англійською, варто пошукати плагіни з серії Cyrtolat — перекладає кириличні назви у зручний для пошукової системи вигляд (давайте не будемо говорити про кириличні домени із зони *.укр).
Автор: Має сенс, якщо у вас на сайті кілька авторів. Якщо ви один…
Шаблон. У деяких темах (особливо преміум-сегменті) розробник додає ще пачку всіляких шаблонів оформлення. Але для звичайного сайту це зазвичай не потрібно. Навіть я можу вибрати опублікувати описаний в статті пост без бічної колонки (такий шаблон є), але навіщо?
Коментарі. Незалежно від налаштувань блогу коментарі можна відкривати або закривати окремо для кожного поста.
Редакції. Власне кажучи, це резервні копії поста. Для чого це може бути корисно — напевно, говорити не варто. Однак у механізмі движка немає можливості видаляти старі версії, і коли їх кількість наближається до 50. А самих постів теж 50… отримуємо 200 невикористаних постів, а база все це зберігає і при складанні сторінки перевіряє їх «на свіжість». Я поки нічого з цим не роблю, але вирішення цього питання в планах. Можливо, готувати пост заздалегідь і потім за один раз все робити, а може видаляти старі редакції плагіном (або кодом як справжній розробник😄).
Решта пунктів зрозумілі з назв. Видалити пост, призначити рубрику (WordPress так і не навчився людським поняттям — категорія чого?), поставити тег.
Зміст
Для постів такої довжини, як цей, для зручності навігації використовують зміст, оглавление, називати можна по-різному — список підзаголовків.
Особливого тренду ця функція не отримала, можливо тому серед стандартних блоків движка її ще немає. Але є безліч плагінів, а також сторонні блоки, які здатні створити даний розділ. Я знайшов у пошуку блоків в меню, яке відкривається у верхньому лівому куті. І завершуючи підготовку до публікації, буду на цьому сайті вставляти даний блок. Налаштувань не наводжу — в плагінах вони можуть відрізнятися, а якщо зберуся якийсь розглядати, про нього буде окремий пост.
СЕО
На завершення статті трохи про Сео. Пропис заголовків і описів. Наводжу скрін статті, про яку вже стільки написано. Так як у мене преміум плагін, у мене є можливості робити більш тонкі налаштування, але пропис заголовка є в кожному плагіні — це азбука.
Особливих коментарів не буде. Заголовок включає назву статті, назву сайту. Опис склав сам. До речі, він же наводиться на головній картинці на початку статті.
І оскільки ця стаття вийде пізніше, ніж описана — ось постійне посилання на опубліковану статтю, яка послужила дослідним прикладом.
