✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

14

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

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

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

Включення широких і повношироких блоків

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

Більшість блоків дозволяють вибирати вирівнювання блоків. Коли ви працюєте в Gutenberg у темі, розробленій не для Gutenberg, ви можете вибирати між «Вирівнювання по лівому краю», «Вирівнювання по центру» та «Вирівнювання по правому краю».

Але чи знаєте ви, що насправді є ще два? Два інших, «Широка ширина» та «Повна ширина», ідеально підходять для створення першої або цільової сторінки. Пізніше ми докладніше розглянемо, як оптимізувати макет і дизайн вашої теми, щоб повністю підтримувати широкі та повноширинні блоки. Спочатку вам потрібно повідомити WordPress додати підтримку цих двох вирівнювання блоків у вашій темі.

У підключеній до after_setup_themeвас функції просто викличте add_theme_support('align-wide'). Ймовірно, ви вже маєте функцію «налаштування» у своїй темі, або якщо ні – додайте її у свою тему functions.php:

add_action('after_setup_theme', function() { add_theme_support('align-wide'); });

Завдяки активному коду у вашій темі ви маєте отримати загалом п’ять варіантів вирівнювання блоків. Для деяких блоків, наприклад Columns, ви отримуєте лише два нових.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

Існують певні типи блоків, у яких можна встановити вирівнювання блоків – здебільшого це ті, що підтримують вкладені блоки, тобто. блок, який дозволяє додавати блоки всередину. Такими популярними блоками є Cover, Columns, Image, embed blocks тощо. Блок Cover є чудовим блоком для створення головних сторінок або цільових сторінок, як ми побачимо в цій публікації.

Використання блоку Cover

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

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

У поєднанні з можливістю налаштування ширини або повної ширини блоку (як ми робили вище) блок Cover є потужним інструментом. Ви можете створити сторінку, де весь вміст розміщуватиметься всередині повношироких розділів Cover blocks із власним фоновим кольором або фоновим зображенням. З правильним стилем і макетом у вашій темі ви отримаєте повноцінний сучасний конструктор першої сторінки.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

У WordPress 5.3 важливе покращення відбулося для блоку Cover: внутрішньої оболонки HTML. Це означає, що блок обкладинки має один HTML-елемент для самого розділу – із фоновим кольором або фоновим зображенням, а потім ще один HTML-елемент, де знаходиться весь вміст. Поєднайте це з вирівнюванням блоків по всій ширині: стилізуйте зовнішній елемент (із кольором фону або зображення), щоб отримати повністю повну ширину, а потім стилізуйте внутрішній HTML-елемент із вмістом, щоб він містився в контейнері вашої теми.

Наприклад, припустімо, що ваша тема має контейнер максимальної ширини 1200 пікселів. Ймовірно, у вас уже є спеціальний клас HTML зі стилем max-width, який гарантує, що ваш вміст не розгортатиметься на всю ширину незалежно від розміру екрана. Додайте свій стиль максимальної ширини до внутрішнього HTML-коду обкладинки; назва класу wp-block-cover__inner-container. Як приклад:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, .wp-block-cover.alignfull .wp-block-cover__inner-container { position: relative; width: 100%; max-width: 1200px; padding: 0 20px; }

У наведеному вище коді CSS я націлений на два батьківських класи Cover. Батьківський клас блоку Cover змінюється залежно від того, чи ви вибрали фонове зображення чи ні. Блоки обкладинки з фоновим зображенням отримують клас ” wp-block-cover-image", а блоки обкладинки з фоновим кольором отримують клас ” wp-block-cover“. Крім того, я також націлюсь на вирівнювання блоку «Full Width» за допомогою класу «alignfull». Вирівнювання блоку «Широка ширина» отримує клас «alignwide». Додайте CSS, щоб також націлити це вирівнювання блоків – залежно від того, що ви хочете зробити.

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

Макет теми та стиль на всю ширину

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

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

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

Хорошим рішенням буде додати параметри публікації; користувацькі метаналаштування для публікацій і сторінок, які впливають на макет цієї сторінки. Ви можете зробити налаштування, щоб приховати бічну панель або примусово розгорнути вміст публікації на всю ширину. Створіть налаштування публікації вручну самостійно, додавши метабокси, або скористайтеся розширеними настроюваними полями, щоб полегшити цей процес. А потім у вашій темі ви отримуєте налаштування публікації та відповідно обробляєте вивід HTML.

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

Створення стилів блоків

У WordPress Gutenberg є маловідома функція; блоки можуть мати різні стилі. Ви можете побачити стилі блоків у дії за допомогою блоку Цитата. Додайте блок у свій редактор і подивіться на інспектор (права бічна панель). Ви знайдете тему «Стилі» та два варіанти між різними стилями.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

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

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

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

PS: якщо ви не бачите стилі блоків, можливо, ваша тема не підтримує це. Процес такий самий, як і для вирівнювання блоків по широкій і повній ширині; у хуку after_setup_themeви додаєте add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() { add_theme_support('wp-block-styles'); });

Використання кольорів теми як колірної палітри

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

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

На щастя, WordPress Gutenberg дозволяє визначати палітру кольорів! Це ще один add_theme_support()варіант, коли ви надаєте масив кольорів, які вам потрібні в палітрі. У функції, підключеної до after_setup_theme, виконайте наступне:

У наведеному вище коді ми додаємо підтримку теми для «editor-color-palette», а як другий параметр функції ми визначаємо масив усіх кольорів, які нам потрібні. Для кожного кольору потрібні атрибути name, slugі color. nameце те, що з’являється, якщо навести курсор миші на колір у палітрі. slugце ім’я класу, який буде додано до елемента блоку. І colorвизначає шістнадцятковий код вашого кольору.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

Майте на увазі, що вам потрібно додати стилі у свій CSS, орієнтований на кожен із цих класів (визначених slug). WordPress не застосовує автоматично шістнадцятковий колір до ваших блоків, навіть якщо ми повідомляємо WordPress, який код кольору.

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

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

Порада: завжди додавайте чисто чорний (#000000) і чисто білий (#FFFFFF) у палітру кольорів. Напевно, також доречно мати один або два світло-сірих кольори.

Використання статичної головної сторінки та оптимізація шаблону першої сторінки

Ви, напевно, вже знаєте про це, але я все одно згадаю. У WordPress ви можете встановити статичну сторінку як головну, перейшовши в Налаштування > Читання.

Посібник розробника: використання WordPress Gutenberg для першої та цільової сторінок

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

Це простий спосіб створити головну сторінку для вашого сайту WordPress. На вибраній сторінці ви можете створити першу сторінку, використовуючи всі згадані вище прийоми. Наприклад, у вас можуть бути зняті параметри публікації для відображення заголовка сторінки, бічної панелі та рекомендованого зображення. І сторінка повністю побудована з повноширокими блоками обкладинки та вмістом. Однак ви можете не використовувати параметри публікації (приховати бічну панель тощо), а просто створити шаблон головної сторінки, щоб замінити або застосувати ці параметри.

Якщо ваш WordPress встановлено як статичну сторінку як головну, WordPress шукатиме шаблон front-page.phpу вашій темі. Це використовуватиметься замість page.php. Це дає змогу створювати та налаштовувати окремий шаблон, який використовуватиметься лише для головної сторінки.

У цьому front-page.phpшаблоні ви вже можете визначити HTML, щоб гарантувати, що всі блоки мають повну ширину, не мають бічної панелі, заголовка сторінки чи представленого зображення. Можливо, ви захочете просто зробити, the_content()щоб вивести вміст сторінки повністю.

Наприклад, ось що я маю в цій темі сайту front-page.php. У той час як у всіх інших шаблонах, таких як page.php, я маю безліч виводів для бічної панелі, заголовка публікації тощо, це повний обсяг мого циклу в front-page.php:

while (have_posts()): the_post(); the_content(''); endwhile;

Це воно. Мій HTML-код і класи упаковки забезпечують повну ширину вмісту публікації.

Пам’ятайте, що це гарне рішення, якщо ви як користувач теми розумієте, як працюють ваші шаблони. Я знаю, що весь мій вміст на головній сторінці має бути повністю загорнутий у блоки обкладинки. Я покладаюся на HTML-код внутрішнього контейнера Cover block, щоб переконатися, що мій вміст виглядає добре та потрапляє в контейнер максимальної ширини. Якби я додав простий блок «Абзац» без блоку «Обкладинка», він виглядав би погано, оскільки в ньому не було б відступів з боків.

Зробіть заголовок сайту прозорим у першому блоці обкладинки

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

Я роблю це на головній сторінці цього сайту. Поглянь! У верхній частині сторінки мій заголовок не має фону та показує фон фіолетового градієнта (блок обкладинки) позаду. Коли ви починаєте прокручувати, він отримує фіксований суцільний фон.

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

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

Весь мій елемент заголовка завжди position: fixed. Оскільки зазвичай я не хочу, щоб мій вміст зникав за заголовком, я додав до елемента body padding-top, який зміщує вміст під заголовком. Однак я додав правило, згідно з яким, якщо ми перебуваємо на шаблоні першої сторінки, цей відступ не додаватиметься. Це гарантує, що лише на першій сторінці основна частина з’явиться за заголовком. Потім я націлюю перший блок обкладинки на першу сторінку та додаю додатковий відступ у верхній частині, щоб гарантувати, що вміст цього першого блоку не стикнеться за заголовком, надаючи йому хороше відступ після заголовка.

А потім я додав дуже простий код Javascript за допомогою jQuery:

Цей код додає клас «navbar-fixed», коли сторінку прокручують далі, ніж на 60 пікселів униз. І в моєму CSS я просто орієнтуюся на цей клас і додаю фіксований колір фону. Без цього класу фон заголовка на головній сторінці буде прозорим.

Це основи. Пограйте з CSS – налаштуйте «точку підказки» Javascript і використовуйте, наприклад, transitionвластивість, щоб зробити більш плавний перехід під час застосування кольору фону.

Чудові блоки для головних і цільових сторінок

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

  • Стовпці. Блок, який допускає вкладені блоки, що означає, що ви можете додавати будь-які блоки всередині кожного стовпця. Ви також можете додати стовпці всередину блоку Cover. Ідеально підходить для структурування вмісту в колонках. Ви можете визначити кількість стовпців і ширину кожного стовпця. Усі вони можуть мати однакову ширину або нестандартну ширину.
  • Група. Ще один блок, який дозволяє вкладені блоки. Чудово підходить для встановлення кольорового фону навколо купи інших блоків (наприклад, заголовок і пара абзаців).
  • Кнопка. Немає головної сторінки без кнопок. Кнопки чудово підходять для заклику до дії та для того, щоб спрямовувати відвідувачів туди, куди ви хочете їх направити. Ви можете налаштувати вигляд і дизайн кнопки. Поєднайте це з власними стилями блоків для кнопок!
  • Розпірка. Якщо ви відчуваєте, що вам не вистачає місця у ваших розділах, додайте блок Spacer – це просто простір без будь-якого вмісту. Ви можете визначити висоту розпірки.
  • Роздільник. Подібний до блоку Spacer, але додає гарну лінію. Ще один варіант чіткого поділу контенту. Налаштуйте дизайн лінії в CSS вашої теми або додайте власні стилі блоків.
  • Галерея. Чудово підходить для демонстрації зображень. Має підтримку вирівнювання блоків повної ширини, тому ви можете створити галерею зображень повної ширини на головній сторінці.
  • Медіа та текст. Хороший простий спосіб вирівняти зображення або медіафайли поруч із текстом. У деяких випадках це може бути кращим варіантом, ніж стовпці.
  • Вбудовується: Youtube ++. WordPress пропонує безліч вставок для медіа. Наприклад, на головній сторінці ви можете відтворювати повноширотне відео Youtube.
  • Віджети: поле пошуку, останні публікації, календар++. WordPress пропонує кілька приємних елементів вмісту за замовчуванням. Якщо ви хочете відобразити список останніх дописів або рядок пошуку на своїй цільовій сторінці, дерзайте.

Однак якщо ви відчуваєте, що вам не вистачає блоків, щоб робити те, що ви хочете, рішенням є створення власних власних блоків.

Створення власних блоків

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

Інші приклади блоків, які дуже корисні для створення першої та цільової сторінок, це слайдери/каруселі, порівняльні таблиці цін і відгуки.

Щоб оптимізувати для такого роду блоків, вам потрібно або знайти плагін, який дає вам це (я не досліджував цей параметр), або створити їх самостійно. Створення власних користувальницьких блоків вимагає значних знань Javascript і React, а також значного кодування. Я рекомендую піти цим шляхом, якщо ви серйозно ставитеся до розробника WordPress.

Якщо вам цікаво навчитися створювати власні блоки для Gutenberg, у мене є серія посібників, у яких це детально описано.

Ви також можете вибрати простіший шлях і придбати Advanced Custom Fields Pro (ACF). За допомогою цього плагіна ви можете створювати спеціальні блоки Gutenberg без будь-яких знань Javascript. Ви просто керуєте PHP-виводом блоків і дозволяєте ACF обробляти частину Javascript. Але майте на увазі, що це створює залежність вашої теми від ліцензованого плагіна.

Висновок

Сподіваюся, ця публікація допомогла вам у подальшому розвитку ваших навичок і знань із WordPress Gutenberg! На момент написання цієї статті справді бракує інформації та досвіду щодо того, як оптимізувати вашу тему для Гутенберга. Мені було особливо важко знайти щось про те, як гарно створити першу сторінку. Це те, чого я навчився, багато експериментуючи та граючись.

Джерело запису: awhitepixel.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі