Руководство разработчика: Использование WordPress Gutenberg для главной страницы и целевых страниц

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

Когда WordPress представил новый редактор Gutenberg в WordPress 5.0 (выпущенном примерно в декабре 2018 года), он в основном сделал ненужным использование отдельного плагина компоновщика страниц. Редактор Gutenberg дает автору WordPress большую гибкость и возможность создавать богатый контент и дизайн, которые раньше были непростыми — если только тема или плагин не предоставили им функциональность с использованием, например, шорткодов.

Вы получаете множество стилей для блоков Gutenberg из коробки в WordPress, но немного поработав над своей темой и зная о блоках, вы можете добавить гораздо больше к опыту Gutenberg. Давайте посмотрим, как!

Включение широких и полноразмерных блоков

Большинство блоков позволяют выбирать выравнивание блоков. Когда вы работаете в Гутенберге с темой, не разработанной для Гутенберга, у вас есть выбор между «Выровнять по левому краю», «Выровнять по центру» и «Выровнять по правому краю».

Но знаете ли вы, что на самом деле есть еще два? Два других, «Широкая ширина» и «Полная ширина», идеально подходят для создания главной страницы или целевой страницы. Позже мы подробнее рассмотрим, как оптимизировать макет и дизайн вашей темы для полной поддержки широких и полноразмерных блоков. Сначала вам нужно указать WordPress добавить поддержку этих двух выравниваний блоков в вашей теме.

В подключенной к after_setup_themeвам функции просто вызовите add_theme_support('align-wide'). Вероятно, у вас уже есть функция «настройки» в вашей теме, а если нет — добавьте ее в свою тему functions.php:

add_action('after_setup_theme', function() {
    add_theme_support('align-wide');
});

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

Существуют определенные типы блоков, в которых вы можете установить выравнивание блоков – в основном это те, которые поддерживают вложенные блоки, т.е. блок, который позволяет добавлять блоки внутри. Такими популярными блоками являются Обложка, Столбцы, Изображение, блоки для встраивания и так далее. Блок обложки — отличный блок для создания первых страниц или целевых страниц, как мы увидим в этом посте.

Использование блока крышки

Блок обложки, безусловно, лучший блок, если вы хотите создать главную или целевую страницу, разделенную на разделы. Вы можете добавить любой тип блока и столько блоков, сколько хотите внутри блока Обложки. С помощью блока «Обложка» вы можете установить цвет фона, фоновое изображение или фоновое изображение с наложением цвета.

В сочетании с возможностью установить настройку блока на ширину или на всю ширину (как мы сделали выше), блок «Обложка» является мощным инструментом. Вы можете создать страницу, на которой весь контент находится внутри секций блоков обложек полной ширины, каждый из которых имеет собственный цвет фона или фоновое изображение. С правильным стилем и макетом в вашей теме у вас есть полноценный современный конструктор главной страницы.

В WordPress 5.3 произошло важное улучшение блока Cover: внутренняя HTML-оболочка. Это означает, что в блоке «Обложка» есть один элемент HTML для самого раздела — с его фоновым цветом или фоновым изображением, а затем еще один элемент HTML, в котором находится все содержимое. Объедините это с выравниванием блока по всей ширине: стилизуйте внешний элемент (с фоновым цветом или изображением) так, чтобы он полностью соответствовал ширине, а затем стилизуйте внутренний HTML-элемент с содержимым, чтобы оно помещалось в контейнер вашей темы.

Например, предположим, что ваша тема имеет контейнер максимальной ширины 1200 пикселей. Вероятно, у вас уже есть определенный HTML-класс со стилем max-width, гарантирующий, что ваш контент не будет просто раздуваться на всю ширину независимо от размера экрана. Добавьте стиль максимальной ширины во внутренний HTML-код обложки; имя класса wp-block-cover__inner-container. В качестве примера:

.wp-block-cover-image.alignfull .wp-block-cover__inner-container, 
.wp-block-cover.alignfull .wp-block-cover__inner-container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

В приведенном выше коде CSS я ориентируюсь на два родительских класса Cover. Класс родительского блока Обложки изменяется в зависимости от того, выбираете ли вы фоновое изображение или нет. Блоки обложки с фоновым изображением получают класс «wp-block-cover-image», а блоки обложки с фоновым цветом получают класс «wp-block-cover«. Кроме того, я также нацеливаюсь на выравнивание блока «Полная ширина» с классом «alignfull». Выравнивание блока «Широкая ширина» получает класс «alignwide». Добавьте CSS для выравнивания этого блока — в зависимости от того, что вы хотите сделать.

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

Макет темы и полноразмерный стиль

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

Ваша тема, вероятно, имеет правую боковую панель при просмотре отдельной записи или страницы. Вероятно, есть дополнительные HTML-оболочки, в том числе элемент контейнера с максимальной шириной, который не позволяет вашим полноразмерным блокам фактически становиться полноразмерными. Ваши обертки, вероятно, также имеют достаточное количество полей или отступов, что опять же не позволяет блокам полной ширины полностью касаться краев экрана. Но вам нужно сделать так, чтобы отдельный пост или страница выглядели хорошо для постов, в которых пользователь также не использует блоки обложки. При разработке для Гутенберга с поддержкой широких и полноразмерных блоков необходимо учитывать обертки. Все зависит от дизайна вашей темы, HTML и стилей, но давайте рассмотрим некоторые идеи, чтобы решить эту проблему.

Хорошим решением будет добавить опции записи; пользовательские мета-настройки для сообщений и страниц, которые влияют на макет этой страницы. Вы можете сделать настройку, чтобы скрыть боковую панель или заставить содержимое вашего поста полностью отображаться на всю ширину. Создавайте настройки публикации вручную, добавляя метабоксы, или используйте расширенные настраиваемые поля, чтобы упростить этот процесс. А затем в своей теме вы получаете настройки публикации и соответствующим образом обрабатываете вывод HTML.

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

Создание стилей блоков

В WordPress Gutenberg есть малоизвестная функция; блоки могут иметь разные стили. Вы можете увидеть стили блоков в действии с блоком Quote. Добавьте блок в свой редактор и взгляните на Инспектор (правая боковая панель). Вы найдете тему «Стили» и два варианта между разными стилями.

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

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

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

PS: если вы не видите блочные стили, возможно, ваша тема не поддерживает их. Процесс такой же, как мы делали для выравнивания широких и полноразмерных блоков; в хуке after_setup_themeвы добавляете add_theme_support('wp-block-styles'):

add_action('after_setup_theme', function() {
    add_theme_support('wp-block-styles');
});

Использование цветов темы в качестве цветовой палитры

Если вы играли с Гутенбергом, вы, вероятно, заметили, что Гутенберг предлагает вам определенный набор цветов для текста или цвета фона. Например, при добавлении блока «Обложка» вам будет предложено выбрать цвет из цветовой палитры.

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

К счастью, WordPress Gutenberg позволяет вам определять цветовую палитру! Это еще один случай add_theme_support(), когда вы предоставляете набор цветов, которые хотите видеть в палитре. В функции, подключенной к after_setup_theme, сделайте следующее:

В приведенном выше коде мы добавляем поддержку темы для ‘ editor-color-palette‘, а в качестве второго параметра функции мы определяем массив всех цветов, которые нам нужны. Для каждого цвета требуются атрибуты name, slugи color. nameэто то, что появляется, когда вы наводите указатель мыши на цвет в палитре. slug— это имя класса, которое будет добавлено к блочному элементу. И colorопределяет шестнадцатеричный код для вашего цвета.

Имейте в виду, что вам нужно добавить стили в свой CSS, ориентированные на каждый из этих классов (определяемых slug). WordPress не применяет автоматически шестнадцатеричный цвет к вашим блокам, даже если мы сообщаем WordPress код цвета.

Например, изображение справа — это моя цветовая палитра, которую я определил для темы этого сайта — для белого пикселя:

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

Совет: всегда добавляйте чистый черный (#000000) и чистый белый (#FFFFFF) в свою цветовую палитру. Вероятно, также неплохо иметь один или два светло-серых цвета.

Использование статической главной страницы и оптимизация шаблона главной страницы

Вы, наверное, уже знаете об этом, но я все же упомяну. В WordPress вы можете установить статическую страницу в качестве главной, выбрав «Настройки» > «Чтение».

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

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

Когда ваш WordPress настроен как статическая страница в качестве главной страницы, WordPress будет искать шаблон front-page.phpв вашей теме. Это будет использоваться вместо page.php. Это позволяет вам создать и настроить отдельный шаблон, который используется только для вашей главной страницы.

В этом front-page.phpшаблоне вы уже можете определить HTML, чтобы любые блоки были полностью заполнены, не имели боковой панели, заголовка страницы или избранного изображения. Возможно, вы захотите просто сделать так, the_content()чтобы выводить содержимое страницы полностью.

Например, это то, что у меня есть в этой теме сайта front-page.php. В то время как во всех других шаблонах, таких как page.php, у меня есть множество выходных данных для боковой панели, заголовка сообщения и т. Д., Это полный объем моего цикла в front-page.php:

while (have_posts()): the_post();
    the_content('');
endwhile;

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

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

Делаем шапку сайта прозрачной в первом блоке Cover

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

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

Имейте в виду, что вам нужно знать цвета в заголовке и фон первой обложки. Если ваш заголовок состоит из белого логотипа и белых пунктов меню (как у меня), вы не можете использовать этот трюк с блоком обложки со светлым фоном. Это сделает ваш заголовок нечитаемым!

Если вы хотите сделать это, имейте в виду, что для этого требуется немного знаний Javascript. Но на самом деле это очень просто. Я пройдусь по самым основам для вас:

Весь мой элемент заголовка всегда position: fixed. Поскольку обычно я не хочу, чтобы мой контент скрывался за заголовком, я добавил padding-top к элементу body, перемещая содержимое ниже заголовка. Однако я добавил правило, согласно которому, если мы находимся в шаблоне главной страницы, этот отступ не будет добавлен. Это гарантирует, что только на главной странице основная часть будет отображаться за заголовком. Затем я нацеливаюсь на первый блок обложки на главной странице и добавляю дополнительный padding-top, чтобы убедиться, что содержимое этого первого блока не торчит за заголовком — придавая ему хороший отступ после заголовка.

Затем я добавил очень простой код Javascript с помощью jQuery:

Что делает этот код, так это добавляет класс ‘ navbar-fixed‘, когда страница прокручивается дальше, чем на 60 пикселей вниз по странице. И в моем CSS я просто нацеливаюсь на этот класс и добавляю фиксированный цвет фона. Без этого класса фон заголовка на главной странице прозрачен.

Это основы этого. Поэкспериментируйте с CSS — настройте «конечную точку» Javascript и используйте transitionсвойство instance, чтобы сделать более плавный переход при применении цвета фона.

Отличные блоки для главных страниц и целевых страниц

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

• Колонны. Блок, допускающий вложенные блоки, что означает, что вы можете добавлять любые блоки внутри каждого столбца. Вы также можете добавить столбцы внутрь блока обложки. Идеально подходит для структурирования контента в столбцах. Вы можете указать количество столбцов и ширину каждого столбца. Все они могут быть одинаковой ширины или произвольной ширины.
• Группа. Еще один блок, допускающий вложенные блоки. Отлично подходит для установки цветного фона вокруг кучи других блоков (например, заголовка и пары абзацев).
• Кнопка. Нет главной страницы без каких-либо кнопок. Кнопки отлично подходят для призыва к действию и направления посетителей туда, куда вы хотите. Вы можете настроить внешний вид и дизайн кнопки. Объедините это с пользовательскими стилями блоков для кнопок!
• Распорка. Если вы чувствуете, что вам не хватает места в ваших разделах, добавьте блок Spacer — это просто пространство без какого-либо содержимого. Вы можете определить высоту распорки.
• Разделитель. Аналогичен блоку Spacer, но добавляет красивую линию. Еще один вариант четкого разделения контента. Настройте дизайн линии в CSS вашей темы или добавьте пользовательские стили блоков.
• Галерея. Отлично подходит для демонстрации изображений. Имеет поддержку выравнивания блоков по всей ширине, поэтому вы можете создать галерею изображений во всю ширину на главной странице.
• Медиа и текст. Хороший простой способ выравнивания изображения или мультимедиа рядом с текстом. В некоторых случаях может быть лучшим вариантом, чем столбцы.
• Встраивает: Ютуб++. WordPress предлагает множество вставок для медиа. Например, у вас может быть полноразмерное видео Youtube, воспроизводимое на главной странице.
• Виджеты: Поле поиска, последние сообщения, календарь++. WordPress предлагает несколько приятных элементов контента по умолчанию. Если вы хотите отобразить список последних сообщений или панель поиска на своей целевой странице, сделайте это.

Однако, если вы чувствуете, что вам не хватает блоков, чтобы делать то, что вы хотите, решение состоит в том, чтобы создать свои собственные пользовательские блоки.

Создание пользовательских блоков

Очень распространенной функцией главной страницы или целевой страницы является элемент «ярлык»; где вы выбираете пост или страницу, и он выводит блок со ссылкой на пост, содержащий избранное изображение, заголовок поста, возможно, выдержку. На момент написания этой статьи в стандартном WordPress такой опции не было. Вам придется вручную сделать этот ярлык самостоятельно, вручную вставив то же самое изображение, что и в сообщении, вручную набрав заголовок сообщения и отрывок, и заключить все в ссылку.

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

Чтобы оптимизировать для таких блоков, вам нужно либо найти плагин, который дает вам это (я не исследовал этот вариант), либо сделать их самостоятельно. Создание собственных пользовательских блоков требует значительных знаний Javascript и React, а также хорошего программирования. Я рекомендую пойти по этому пути, если вы серьезно относитесь к тому, чтобы стать разработчиком WordPress.

Если вам интересно узнать, как создавать пользовательские блоки для Гутенберга, у меня есть серия руководств, в которых это подробно рассматривается.

Вы также можете выбрать более простой маршрут и приобрести Advanced Custom Fields Pro (ACF). С помощью этого плагина вы можете создавать собственные блоки Gutenberg без каких-либо знаний Javascript. Вы просто управляете выводом блоков PHP и позволяете ACF обрабатывать часть Javascript. Но имейте в виду, что это создает зависимость вашей темы от лицензированного плагина.

Вывод

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