Якщо ми переглядаємо Каталог тем WordPress, більшість тем демонструють зображення обкладинок. Це функція, яка користується попитом. Тенденція на титульній сторінці актуальна навіть у заблокувати каталог тем скріншоти також.
Розглянемо такий приклад з Двадцять двадцять (класична тема), яка включає a шаблон обкладинки який можна використовувати для відображення як в одній публікації, так і на сторінці, де зображення публікації відображається вгорі, що розтягується на весь екран браузера, із заголовком публікації та іншими бажаними метаданими внизу. Шаблони обкладинок дозволяють створювати вміст, який виділяється з традиційних обмежень відображення вмісту.
Створення шаблонів обкладинок наразі потребує написання PHP-коду, як тут, у Шаблон обкладинки теми Twenty Twenty за замовчуванням. Якщо ми подивимося на template-parts/content-cover.php файл, він містить файл код для відображення вмісту, коли cover-template використовується.
Таким чином, неможливо створити індивідуальну титульну сторінку, якщо ви не володієте глибокими знаннями PHP. Для багатьох звичайних користувачів WordPress єдиним варіантом є використання плагіна like Custom Post Type UI як описано в це коротке відео.
Розділи обкладинок у блокових темах
З WordPress 5.8, автори тем можуть створювати спеціальні шаблони (наприклад, окрема публікація, автор, категорія та інші) із головним розділом героя, використовуючи редактор блоків обкладинки та об’єднані в їхні теми з мінімальним кодом або без нього.
Перш ніж заглибитися в те, як створюються верхні великі розділи обкладинки в шаблонах блокових тем, давайте коротко розглянемо дві блокові теми Двадцять двадцять два та Вабі від Річа Тейбора (повний огляд тут).
За лаштунками Twenty Twenty-Two реалізує великий заголовок додавання прихованого зображення, збереженого як шаблон в header-dark-large частин. Тоді як у темі Wabi реалізовано великий фоновий колір заголовка в одній публікації акцентні кольори фону та проміжний блок висотою 50 пікселів (рядки: 5-9). Колірами акцентів керує assets/js/accent-colors.js файлу.
Багато інших вирішили створити розділ верхньої обкладинки за допомогою блок кришки, яка дозволяла користувачам змінювати колір фону та додавати статичне зображення з медіа-бібліотеки або завантажувати з медіа-пристроїв без написання коду. При такому підході зображення з в опублікувати блок рекомендованих зображень потрібно було додати вручну до кожного окремого допису, якщо ви хотіли, щоб зображення для допису було фоновим зображенням в окремих дописах.
Блоки обкладинки з динамічним зображенням публікації
WordPress 6.0 зробив доступним ще один цікавий продукт представлені блоки обкладинки зображень функція, яка дозволяє використовувати рекомендоване зображення будь-якої публікації чи сторінки як фонове зображення в блоці обкладинки.
У наступному коротке відео, інженери Automattic обговорюють додавання вибраних зображень до блоків із прикладом Архео Тема:
Блок зображення, включно з блоком розміщеного зображення, можна додатково налаштувати за допомогою duotone колір в theme.json як обговорюється в цьому короткому З’єднання крапок Відео YouTube (Енн Маккарті з Automattic).
Приклади використання (Вей, Яскравий режим)
Якщо ми переглядаємо мініатюри зображень у заблокувати каталог тем, ми бачимо, що більшість із них містять великі розділи заголовка обкладинки. Якщо ми покопаємося в їхніх файлах шаблонів, вони використовують блоки обкладинки зі статичним фоном зображення.
У деяких нещодавно розроблених темах використовуються блоки обкладинок із динамічним фоновим зображенням у публікації (наприклад, Archeo, Wei, Frost, Bright Mode тощо). Короткий огляд нової функції доступний у це коротке відео GitHub.
Поєднання динамічних акцентних кольорів особливості Вабі тема з блоками зображень обкладинки та публікації, Річ Табор ще більше розширює свою творчість у своєму новому Wei тема (доступний повний огляд тут), щоб відображати динамічні зображення обкладинки з однієї публікації.
У своєму повідомленні Wei, Пише Річ Табор: «За кадром, single.html шаблон використовує блок обкладинки, який використовує представлене зображення публікації. Потім наноситься дуотон за схемою кольорів, призначеною для стовпа. Таким чином практично будь-яке зображення виглядатиме чудово».
Якщо ви хочете глибше дослідити блок обкладинки заголовка теми Wei і навчитися створювати власну, ось коротке відео від Франк Кляйн (Курси розвитку WP), який крок за кроком пояснює, як це було створено.
Подібно до теми Wei, Браян Гарднер також використовує блок обкладинки з розміщеним блоком зображень у своїй останній публікації Яскравий режим тема для відображення видатного вмісту яскраві кольори.
Браян розповів WPTavern: «найбільше йому подобається те, як використовується Cover Block окремі сторінки. Він перетягує представлене зображення в блок обкладинки, а також пропонує власні стилі блоку для тіней і варіантів повної висоти. […] Мені здається, що це справді демонструє те, що можливо з сучасним WordPress».
Щоб дізнатися більше, ось його демонстраційний сайт та повний огляд теми Brian's Bright Mode.
Проектування складних макетів за допомогою редактора блоків
Нещодавно WordPress запустив новий редактор блоків головна сторінка посадки і скачати сторінку. Оголошення викликав неоднозначну реакцію від своїх читачів, у тому числі від Метт Малленвег (Automattic), який прокоментував 33 дні, витрачені на розробку та запуск такої «простої сторінки». Ви можете знайти додаткові кулуарні обговорення тут.
У відповідь Джеймі Марсленд з Pootlepress створив це відео YouTube де він відтворює майже ідентичну домашню сторінку майже за 20 хвилин.
Коментуючи відео Marsland, Пише Сара Гудінг з WP Travern: «Його можна назвати досвідченим користувачем редактора блоків. Він може швидко перемішувати рядки, стовпці та групи, регулюючи за потреби відступи та поля, а також призначати кожному розділу відповідний колір для дизайну. На даний момент це не те, що більшість пересічних користувачів WordPress можуть зробити».
Незважаючи на те, що редактор блоків пройшов довгий шлях, у більшості розробників тем і звичайних користувачів усе ще виникають проблеми зі створенням і дизайном складних макетів.
Додавання покращень до блоків TT2 Gopher
У цьому розділі я розповім вам про те, як я додав покращення до Тема TT2 Gopher Blocks про які я згадував у попередній статті. Натхненний блоками обкладинок з тем, які я описав раніше, я хотів додати до теми три шаблони обкладинок (автор, категорія та одна обкладинка).
Під час перегляду веб-сайтів ми помічаємо два типи заголовків обкладинок. Заголовок, який найчастіше спостерігається, – це розділ обкладинки, змішаний із заголовком сайту (назва сайту та верхня навігація) у блок обкладинки (наприклад, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode тощо). Ми також знаходимо розділ обкладинки заголовка, який не змішується з заголовком сайту, а розташований просто під ним, наприклад цей BBC Future веб-сайт. Для теми TT2 Gopher blocks я вибрав останню.
Створення шаблонів заголовка обкладинки
Спочатку давайте створимо шаблони заголовків обкладинок для шаблонів автора, одного та інших (категорій, тегів) за допомогою блоків обкладинок. Потім ми перетворимо їх на шаблони (як описано тут раніше) і викликайте відповідні шаблони обкладинки заголовка в шаблонах.
Якщо ви знайомі з редактором блоків, створіть свій розділ заголовка за допомогою блоків обкладинок у редакторі сайту, а потім перетворіть код заголовка обкладинки на шаблони. Однак, якщо ви не знайомі з редактором FSE, то найпростішим способом буде скопіювати шаблони з каталог шаблонів у публікації, внесіть необхідні зміни та перетворите їх на шаблон.
У моєму попередня стаття CSS-Tricks, я детально обговорив створення та використання шаблонів блоків. Ось короткий огляд робочого процесу, який я використовую для створення єдиного шаблону заголовка обкладинки публікації:
Шаблон заголовка обкладинки однієї публікації
крок 1: Використовуючи інтерфейс FSE, давайте створимо новий порожній файл і почнемо будувати структуру блоків, як показано на лівій панелі.
Крім того, це можна зробити спочатку в публікації або на сторінці, а потім скопіювати та вставити розмітку у файл шаблону пізніше.
крок 2: Далі, щоб перетворити наведену вище розмітку на шаблон, спочатку ми повинні скопіювати її розмітку коду та вставити в новий /patterns/header-single-cover.php у нашому редакторі коду. Ми також повинні додати необхідну розмітку заголовка файлу шаблону (наприклад, заголовок, слаг, категорії, засіб вставки тощо).
Ось весь код /patterns/header-single-cover.php Файл:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
крок 3: Для цієї демонстрації я використовував це зображення з каталогу фотографій як фонове зображення-заповнювач і застосував Плануючи двоколірний колір. Щоб динамічно використовувати розміщене зображення, ми повинні додати "useFeaturedImage":true у блоці обкладинки, замінивши наведене вище посилання зображення-заповнювача безпосередньо перед "dimRatio":50 таким чином, що рядок 10 має виглядати наступним чином:
Крім того, зображення заповнювача також можна змінити клацанням заміщати і вибір Використовуйте обране зображення опції:
Тепер шаблони обкладинки заголовка мають бути видимими на панелі вставлення шаблонів для використання будь-де в шаблонах, публікаціях і сторінках.
Заголовки обкладинки архіву
Натхненний цей пост WP Tavern і покрокову інструкцію зі створення заголовка шаблону автора, я хотів створити подібний заголовок обкладинки та додати його до теми TT2 Gopher.
Спочатку давайте створимо шаблон заголовка обкладинки архіву author.html також шаблон, дотримуючись наведеного вище робочого процесу. У цьому випадку я створюю це на новій порожній сторінці, додаючи блоки (як показано нижче у вигляді списку):
На тлі обкладинки я використав те саме зображення, що й на обкладинці заголовка однієї публікації.
Оскільки ми хотіли б відобразити коротку біографію автора в блоці автора, біографічну інформацію слід також додати на сторінку профілю користувача, інакше у інтерфейсі відображатиметься порожнє місце.
Нижче наведено код розмітки header-author-cover, який ми будемо використовувати шаблон на наступному кроці:
Published by:
Щоб перетворити розмітку на a header-author-cover шаблон, ми повинні додати необхідну розмітку заголовка файлу шаблону, як описано раніше. Редагуючи header-author-cover.php шаблон, ми можемо створити подібні обкладинки заголовків для тегів, таксономії та інших спеціальних шаблонів.
Команда header-category-cover.php шаблон для мого category.html шаблон доступний на GitHub.
Створення шаблонів із блоками обкладинки заголовка
WordPress 6.0 і недавнє Гутенберг 13.7 розширені функції створення шаблонів у редакторі блоків, що дає змогу багатьом користувачам WordPress без глибоких знань програмування створювати власні шаблони.
Щоб отримати детальнішу інформацію та випадки використання, ось a ретельна примітка щодо налаштування від Джастіна Тедлока.
Редактор блоків дозволяє створювати різні типи шаблонів, у тому числі шаблони обкладинок. Давайте коротко розглянемо, як комбінувати блок кришки та опублікувати блок рекомендованих зображень завдяки новому інтерфейсу користувача шаблонів можна легко створювати різні типи користувацьких шаблонів обкладинок навіть без навичок кодування або з низькими навичками.
З Gutenberg 13.7 створення шаблонів стало набагато легшим. Як створити шаблони блоків з кодами та в редакторі сайту описано в Тематичний посібник і в моя попередня стаття.
Авторський шаблон з обкладинкою
Верхня (розділ заголовка) розмітка author.html шаблон наведено нижче (рядок 6):
...
...
...
... Ось скріншоти заголовків обкладинок для author.html та category.html шаблони:
Все код для обох шаблонів доступний на GitHub.
Одинарний стовп з блоком кришки
Щоб відобразити блок обкладинки в нашій єдиній публікації, ми повинні викликати header-cover-single pattern під розділом заголовка (рядок 3):
....
....
....Ось знімок екрана, на якому показано зовнішній вигляд однієї публікації з розділом обкладинки заголовка:
Все single-cover.html шаблон доступний на GitHub.
Ви можете знайти додаткові покрокові інструкції зі створення розділ заголовка героя та з використанням блоків тла обкладинки розміщеного зображення on WP таверна та Повне редагування сайту .
Там у вас є це!
Корисні ресурси
Рекомендований блок обкладинки зображення
Повідомлення в блозі
Хоча блокові теми, загалом, є отримує багато негативних настроїв від членів спільноти WordPress, на мою думку, це майбутнє WordPressтеж. За допомогою блокових тем автори тем-аматорів, які не мають глибоких навичок програмування та володіння мовами PHP і JavaScript, тепер можуть створювати теми зі складними макетами з розділом обкладинки героя, як описано в цій статті, у поєднанні з моделі та стильові варіації.
Як ранній користувач Gutenberg, я не міг бути більше схвильований новими інструментами створення тем, як створити тему блоку плагін та інші, які дозволяють авторам тем досягати наступного безпосередньо з інтерфейсу редактора блоків без написання коду:
- (I) створювати
- (ii) перезаписати файли теми та експортувати
- (iii) створити пусту або дочірню тему, і
- (iv) змінити та зберегти варіацію стилю поточної теми
Крім того, останні ітерації плагіна Gutenberg дозволяють увімкнути рідка типографіка та вирівнювання макета та лише за допомогою інших стилістичних елементів керування theme.json файл без JavaScript і рядка правил CSS.
Дякуємо за читання та діліться своїми коментарями та думками нижче!