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

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

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

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

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

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

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

Сравнение исходной домашней страницы темы Music Artist и воссоздания с использованием блоков в теме Ariele Lite.

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

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

• WordPress 5.7 Бета
• Gutenberg 10.1 Бета
• Ariele Lite 1.0.8
• Editor Plus 2.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Медиа и текстовая секция

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

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

Раздел видео

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

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

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

Итак, я немного схитрил.

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

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

Раздел боковой панели нижнего колонтитула

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

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

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