Воссоздание домашней страницы темы WordPress музыкального исполнителя с помощью редактора блоков

Одно из моих любимых занятий каждую неделю — просматривать последние темы, которые можно найти в каталоге тем WordPress. Часто встречаются интригующие дизайнерские концепции. Тем не менее, большую часть времени я разочарован, узнав, что дизайн многих домашних страниц зависит от параметров темы, а не от редактора блоков.

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

Музыкальный исполнитель был одной из последних тем, которые привлекли мое внимание. Мне понравилась большая область героев и несколько элементов дизайна темы. После его установки я понял, что макет домашней страницы управляется с помощью параметров темы. Однако автор темы мог бы построить эту страницу полностью из блоков и обернуть каждый раздел или даже весь дизайн в шаблоны блоков.

Все это можно сделать с помощью редактора блоков.

Чтобы я практиковал то, что проповедую, я потратил пару часов и воссоздал демо домашней страницы темы прямо из редактора блоков. Код не требуется. Было несколько сложных моментов, о которых я расскажу. Тем не менее, это было не так сложно создать, и его можно было бы упростить, если бы тема поддерживала редактор блоков.

План состоял в том, чтобы воспроизвести пользовательскую страницу с установленной темой Music Artist. Однако отсутствие поддержки блоков в теме означало, что некоторые вещи были принципиально нарушены. Вместо этого я активировал тему с похожим дизайном, таким как шрифты и цвета. Поскольку я уже знал, что Ariele Lite работает с редактором блоков, имело смысл посмотреть, смогу ли я строить с его помощью. Это оказалось прочным фундаментом.

Ниже приведено сравнение домашней страницы оригинальной темы Music Artist (первая) и воссозданной с использованием блоков темы Ariele Lite (вторая):

Очевидно, есть различия в интервалах, цветах, типографике и других элементах. Многое из этого сводится к стилистическому выбору дизайнеров темы. Если бы у меня было больше времени и модификаций с помощью плагина, такого как Editor Plus, я мог бы изменить это достаточно, чтобы получить более близкую копию. Однако моей целью было максимально приблизиться к ядру WordPress. Технически, у меня установлена ​​последняя версия плагина Gutenberg, поэтому некоторые элементы еще не добавлены в WordPress.

Для этого эксперимента я использовал:

• WordPress 5.7 Бета
• Гутенберг 10.1 Бета
• Ариэль Лайт 1.0.8
• Редактор Плюс 2.6

Мне понадобился Editor Plus только для того, чтобы сделать пару корректировок полей в блоке Group. Я мог бы оставить это в покое, но я хотел уменьшить некоторые интервалы между разделами на странице, чтобы получить более близкое воссоздание. В будущем мы увидим больше элементов управления интервалами в WordPress, поэтому я счел это справедливым компромиссом.

Этот эксперимент должен показать авторам тем, что они могут создавать свои собственные дизайны с помощью блочной системы. Отказ от устаревших параметров темы означает, что разработчикам требуется гораздо меньше работы с кодом, что позволяет им больше сосредоточиться на стилях. Конечные пользователи также выигрывают от большей гибкости, такой как добавление пользовательских элементов или удаление ненужных частей. Это даже не включает параметры стиля на уровне отдельного блока.

Вторая цель — показать пользователям, что они могут создавать некоторые из этих домашних страниц без кода. Редактор блоков и хорошо продуманная тема, готовая к работе с блоками, могут помочь вам довольно далеко.

Воссоздание домашней страницы музыкального исполнителя

Начав с основы Ariele Lite, это означало, что дизайн был упакован. Однако в теме есть настраиваемый шаблон страницы «Пустой холст», который позволяет пользователям создавать всю страницу целиком.

Были элементы, которые я не мог воссоздать полностью из-за ограничений редактора блоков. Другие части были проблемами или выбором дизайна, вытекающими из темы.

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

Раздел героев

Блок обложки WordPress остается одним из моих любимых блоков. Это позволяет пользователям создавать разделы героев без особых усилий. Я взял фоновое изображение из оригинальной демонстрации и вставил его. Я сделал первый настоящий шаг в этом путешествии.

Затем я добавил блок заголовка, немного изменив его размер. Я последовал за ним с блоком Spacer и Social Icons.

Я сразу наткнулся на две загвоздки. Во-первых, WordPress не включает значок социальной сети iTunes. Мне не удалось найти открытую проблему в репозитории Gutenberg для этого. Возможно, это не часто запрашиваемая функция. Вторая проблема заключалась в том, что блок Social Icons не выводит ярлыки социальных сетей, поэтому я не смог воспроизвести эту часть дизайна.

Раздел дискографии

Есть несколько способов работы с этим разделом. Предполагая, что перечисленные альбомы являются настраиваемым типом сообщений, любой плагин, из которого были получены эти альбомы, в идеале должен иметь настраиваемый блок для их вывода. Пользователи также могут использовать блок «Последние сообщения», если это сообщения в блоге или предстоящий блок «Запрос».

Для простоты я решил добавить блок Columns и поместить в него три связанных изображения.

Раздел «Медиа и текст»

Мой план для этого раздела состоял в том, чтобы использовать основной блок «Медиа и текст». Однако он поддерживает только самостоятельные носители. У меня не было возможности вставить видео с YouTube.

Вместо этого я выбрал блок Columns. В левой колонке я добавил URL-адрес видео на YouTube. Справа я добавил блоки «Заголовок», «Абзац» и «Кнопки».

Раздел видео

Это был относительно простой раздел для воссоздания. Для макета потребовался только блок заголовка, за которым следовал блок столбцов. Затем я взял пару ссылок на видео с YouTube и вставил URL-адреса в редактор.

Раздел последних сообщений

С этой частью макета у меня было больше всего проблем. WordPress предоставляет блок «Последние сообщения», который можно настроить в виде сетки. Однако Ariele Lite неправильно обрабатывала столбцы.

Итак, я немного обманул.

Я переключился на блочную тему, которая поддерживает грядущую функцию полного редактирования сайта. Затем я добавил блок запроса, чтобы получить больше контроля над столбцами сообщений. После этого я вернулся к теме Ariele Lite.

Первоначальный дизайн можно было бы сделать с текущим блоком «Последние сообщения», так что это не проблема редактора блоков.

Нижний колонтитул боковой панели

Технически боковая панель нижнего колонтитула выходит за рамки дизайна главной страницы. Это часть нижнего колонтитула темы на всем сайте. Тем не менее, я решил добавить его, так как я уже был в рулоне.

Для этого раздела требуется блок Columns. С этого момента нужно добавить блок заголовков для каждого столбца. Я добавил блоки «Абзац», «Календарь» и «Галерея», чтобы воссоздать три «виджета».

Блочный дизайн календаря Ariele Lite лучше работает на светлом фоне. Это была небольшая болевая точка, которую я упустил из виду. В долгосрочной перспективе WordPress должен предоставить элементы управления дизайном для блоков, в которых они отсутствуют.