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

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

За последние пару лет WordPress постоянно предоставлял функции, о которых просили авторы тем. Тем не менее, темы, которые их используют, немногочисленны и редки.

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

Мне нужно было перейти на профессиональную версию, чтобы получить то, что было на скриншоте? Вроде бы есть план такой версии, но пока она недоступна.

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

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

Итак, я воссоздал домашнюю страницу темы “Классическая свадьба” с нуля. С помощью редактора блоков. С темой, которая его поддерживает.

Создание свадебной домашней страницы

Моя цель была проста. Демо-версии для работы не было, и все, что мне нужно было сделать, это сделать снимок экрана шириной 800 пикселей со страницы темы на сайте автора. Как я воссоздал домашнюю страницу Music Artist несколько недель назад, я хотел сделать то же самое для Classic Wedding. За некоторыми исключениями, с которыми могла бы справиться тема, я добился успеха.

Поскольку Classic Wedding не поддерживает сам редактор блоков, мне не удалось воссоздать его домашнюю страницу через редактор блоков при использовании темы. Этого не происходило – я пробовал. Я знал, что у темы Eksell WordPress был шаблон «холста», который позволял пользователям редактировать всю страницу, так что это был простой выбор.

Я также загрузил шрифты Kaushan Script и Lora, чтобы они лучше соответствовали оригинальной теме. В этом не было необходимости для эксперимента, но я хотел, чтобы моя игра хоть немного походила.

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

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

Я использовал px там единицы, потому что это было легко. В реальном проекте % или rem было бы лучше. Но я просто делал быстрое доказательство концепции.

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

Поскольку тема не упаковывала свои декоративные изображения – опять же, как пользователи воссоздали бы домашнюю страницу без них? – Я выбрал простой полосатый фон SVG вместо цветов в оригинале. Поскольку у меня уже был установлен Editor Plus, я добавил SVG из Hero Icons в качестве основного фона.

Моя первоначальная идея заключалась в том, чтобы воссоздать только «контентную» часть домашней страницы. Однако само по себе это было немного скучно. Поэтому я преобразовал все в блок Columns и добавил боковую панель. Я воссоздал основные элементы, используя блоки Image, Heading, Paragraph и Navigation. Затем для развлечения я добавил блок социальных иконок.

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

В целом это был относительно простой проект. Однако этот эксперимент добавил некоторые сложности, которых не было, когда я воссоздавал домашнюю страницу Music Artist. Обязательны элементы управления полями и вертикальное выравнивание блока навигации. Использование стороннего плагина и написание собственного CSS – не идеальный вариант, и это были требования, чтобы сделать это прямо из редактора.

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