Если мы просматриваем Каталог тем WordPress, большинство тем содержат изображения обложек. Это функция, пользующаяся большим спросом. Тенденция к титульным страницам актуальна даже в заблокировать каталог темы скриншоты тоже.
Рассмотрим следующий пример из Двадцать двадцать (классическая тема), которая включает в себя шаблон обложки его можно использовать для отображения как в отдельном сообщении, так и на странице, где изображение сообщения отображается вверху и простирается по всему экрану браузера, а заголовок сообщения и другие желаемые метаданные находятся ниже. Шаблоны обложек позволяют создавать контент, который выделяется из традиционных ограничений отображения контента.
Создание шаблонов обложек в настоящее время требует написания кода PHP, как показано здесь. Шаблон обложки темы Twenty Twenty по умолчанию. Если мы посмотрим на template-parts/content-cover.php файл, он содержит код для отображения контента, когда cover-template используется.
Таким образом, невозможно создать персонализированную титульную страницу, если вы не обладаете глубокими знаниями PHP. Для многих обычных пользователей WordPress единственным вариантом является использование такого плагина, как 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 тема (полный обзор доступен здесь) для отображения динамических изображений обложки одного поста.
В своем объявлении в Вэй Рич Табор пишет: «За кулисами single.html В шаблоне используется блок «Обложка», который использует изображение публикации. Затем применяется дуотон по цветовой гамме, присвоенной посту. Таким образом, практически любое изображение будет выглядеть хорошо».
Если вы хотите углубиться в блок обложки заголовка темы Wei и узнать, как создать свой собственный, вот Короткое видео от Фрэнк Кляйн (Курсы разработки WP), который шаг за шагом объясняет, как он был создан.
Подобно теме Вэй, Брайан Гарднер также использует блок обложки с блоком избранных изображений в своих недавних Яркий режим тема для отображения выдающегося содержимого с помощью яркие цвета.
Брайан рассказал WPTavern: «Больше всего в этой теме ему нравится то, как используется блок обложки. отдельные страницы. Он помещает избранное изображение в блок «Обложка», а также предлагает пользовательские стили блоков для теней и вариантов полной высоты. […] Мне кажется, что это действительно демонстрирует возможности современного WordPress».
Более подробно вот его демонстрационный сайт и полный обзор темы Brian’s Bright Mode.
Проектирование сложных макетов с помощью редактора блоков
Недавно WordPress запустил новый редактор блоков, разработанный целевая домашняя страница и еще один Скачать страницу. Объявление вызвал неоднозначную реакцию от своих читателей, в том числе от Мэтт Малленвег (Automattic), который прокомментировал 33 дня, потраченные на разработку и запуск такой «простой страницы». Ты можешь найти дополнительные закулисные обсуждения здесь.
В ответ Джейми Марсланд из Pootlepress создал это видео на YouTube где он воспроизводит почти идентичную домашнюю страницу почти за 20 минут.
Комментируя видео Марсланда, Сара Гудинг из WP Travern пишет: «Его можно назвать опытным пользователем редактора блоков. Он может быстро перемещать строки, столбцы и группы, при необходимости корректируя отступы и поля, а также назначать каждому разделу соответствующий цвет дизайна. На данный момент это не то, что может сделать большинство обычных пользователей WordPress».
Хотя редактор блоков прошел долгий путь, у большинства разработчиков тем и обычных пользователей по-прежнему возникают проблемы, связанные с созданием и проектированием с его помощью сложных макетов.
Добавление улучшений в блоки TT2 Gopher
В этом разделе я расскажу вам, как я добавил улучшения в Тема TT2 Gopher Blocks о котором я упоминал в своей предыдущей статье. Вдохновленный блоками обложек из тем, которые я описал ранее, я хотел добавить в тему три шаблона обложек (автор, категория и отдельная обложка).
Просматривая веб-сайты, мы замечаем два типа заголовков обложек. Наиболее часто встречающийся заголовок — это раздел обложки, смешанный с заголовком сайта (название сайта и верхняя навигация) в блоке обложки (например, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode и т. д.). Мы также находим раздел обложки заголовка, который не смешивается с заголовком сайта и расположен прямо под ним, например этот BBC Future Веб-сайт. Для темы блоков TT2 Gopher я выбрал последнюю.
Создание шаблонов заголовков обложки
Сначала давайте создадим шаблоны заголовков обложки для авторских, одиночных и других шаблонов (категорий, тегов), используя блоки обложки. Затем мы преобразуем их в шаблоны (как описано здесь ранее) и вызовите соответствующие шаблоны обложки заголовка в шаблоны.
Если вы знакомы с работой с редактором блоков, создайте раздел заголовка, используя блоки обложки в редакторе сайта, а затем преобразуйте код заголовка обложки в шаблоны. Однако, если вы не знакомы с редактором FSE, то проще всего скопировать шаблоны из файла. каталог шаблонов в сообщении внесите необходимые изменения и преобразуйте его в шаблон.
В моем предыдущая статья о CSS-трюкахЯ подробно обсудил создание и использование шаблонов блоков. Вот краткий обзор рабочего процесса, который я использую для создания шаблона заголовка обложки одного поста:
Шаблон заголовка обложки одной публикации
Шаг 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: Для этой демонстрации я использовал это изображение из каталога фотографий в качестве фонового изображения-заполнителя и применил Midnight двухцветный цвет. Чтобы динамически использовать избранное изображение в публикации, мы должны добавить "useFeaturedImage":true в блоке обложки, заменив приведенную выше ссылку на изображение-заполнитель непосредственно перед "dimRatio":50 так, что строка 10 должна выглядеть следующим образом:
Кроме того, изображение-заполнитель также можно изменить, нажав кнопку Замените и выбор Использовать избранное изображение опции:
Теперь шаблоны обложки заголовка должны быть видны на панели вставки шаблонов и их можно использовать в любом месте шаблонов, сообщений и страниц.
Заголовки обложки архива
Вдохновленный этот пост WP Tavern и пошаговое руководство по созданию авторского заголовка шаблона. Я хотел создать аналогичный заголовок обложки и добавить его в тему TT2 Gopher.
Сначала давайте создадим шаблон заголовка обложки архива для author.html шаблон, следуя описанному выше рабочему процессу. В данном случае я создаю это на новой пустой странице, добавляя блоки (как показано ниже в виде списка):
В качестве фона для обложки я использовал то же изображение, что и в обложке заголовка одного поста.
Поскольку мы хотели бы отображать краткую биографию автора в блоке автора, биографическое заявление также следует добавить на страницу профиля пользователя, иначе во внешнем интерфейсе будет отображаться пустое место.
Ниже приведен код разметки header-author-cover, что мы будем использовать шаблон на следующем шаге:
Published by:
Чтобы преобразовать разметку в header-author-cover шаблон, мы должны добавить необходимую разметку заголовка файла шаблона, как описано ранее. Редактируя header-author-cover.php шаблон, мы можем создавать аналогичные обложки заголовков для тегов, таксономии и других пользовательских шаблонов.
Ассоциация header-category-cover.php образец для моего category.html шаблон доступен на GitHub.
Создание шаблонов с блоками обложки заголовка
WordPress 6.0 и недавнее Gutenberg 13.7 расширенные функции создания шаблонов в редакторе блоков, что позволяет многим пользователям WordPress без глубоких знаний кодирования создавать свои собственные шаблоны.
Для получения более подробной информации и вариантов использования см. подробные примечания по настройке от Джастина Тэдлока.
Редактор блоков позволяет создавать различные типы шаблонов, в том числе шаблоны обложек. Давайте кратко рассмотрим, как объединить блок крышки и опубликовать блок избранных изображений Благодаря новому пользовательскому интерфейсу шаблонов можно легко создавать различные типы пользовательских шаблонов обложек даже при отсутствии или низких навыках программирования.
Создание шаблонов стало намного проще с Gutenberg 13.7. Как создавать шаблоны блоков с кодами и в редакторе сайта описано в Тематический справочник и в мою предыдущую статью.
Авторский шаблон с блоком обложки
Верхняя разметка (раздел заголовка) author.html шаблон показан ниже (строка 6):
...
...
...
... Вот скриншоты заголовков обложек для author.html и category.html шаблоны:
Целиком код для обоих шаблонов доступен на GitHub..
Одинарный пост с защитным блоком
Чтобы отобразить блок обложки в нашем отдельном сообщении, нам нужно вызвать метод header-cover-single pattern под заголовком (строка 3):
....
....
....Вот снимок экрана, показывающий внешний вид отдельной публикации с разделом обложки:
Целиком single-cover.html шаблон доступен на GitHub.
Вы можете найти дополнительные пошаговые руководства по созданию раздел заголовка сообщения героя и использование блоков фоновой обложки избранного изображения в публикации on WP Tavern и Полное редактирование сайта Веб-сайт.
Вот он!
Полезные ресурсы
Блок обложки избранного изображения
Сообщения в блоге
Несмотря на то, что темы блоков, в целом, получение большого количества отзывов от членов сообщества WordPress, по моему мнению, они будущее WordPress, слишком. С помощью блочных тем авторы тем-любителей, не обладающие глубокими навыками кодирования и знанием языков PHP и JavaScript, теперь могут создавать темы со сложным макетом с главным разделом обложки, как описано в этой статье, в сочетании с паттеранами и вариации стиля.
Будучи одним из первых пользователей Гутенберга, я был в восторге от новых инструментов создания тем, таких как создать тему блока плагин и другие, которые позволяют авторам тем достигать следующих результатов непосредственно из пользовательского интерфейса редактора блоков без написания кода:
- (I) Создайте
- (ii) перезаписать файлы темы и экспортировать
- (iii) создать пустую или дочернюю тему и
- (iv) изменять и сохранять вариации стиля текущей темы
Кроме того, последние версии плагина Gutenberg позволяют включать плавная типографика и выравнивание макета и другие стилистические элементы управления, используя только theme.json файл без JavaScript и строки правил CSS.
Спасибо за чтение и поделитесь своими комментариями и мыслями ниже!
