Блок-редактор Гутенберга для WordPress изменил способ создания контента в CMS. Но это также открыло новые возможности на фронте.
Одним из наиболее интересных событий в этой области является возможность добавлять «полные» или «широкие» блоки на страницу или сообщение. Эта функция добавляет возможность блоку Гутенберга отклоняться от стандартной ширины содержимого темы, что было почти невозможно в старом Классическом редакторе.
Есть несколько возможных применений для полного или широкого выровненного блока. Например, вы можете вводить новые разделы страницы с полноразмерным блоком обложки, который накладывает текст на фон изображения. Или вы можете воспользоваться этой функцией, чтобы создать зону, где нельзя пропустить призыв к действию. Здесь можно добавить практически любой тип контента, что является частью апелляции.
Однако есть небольшое предостережение: ваша тема должна поддерживать полные выровненные блоки. К счастью, это довольно легко сделать. Ниже приведено краткое руководство по добавлению расширенной поддержки выравнивания к вашей теме WordPress и блокам дизайна с помощью CSS.
Добавить поддержку темы
Первый шаг – добавить одну строку кода в файл functions.php вашей активной темы. Загрузите этот файл с вашего веб-сайта, если у вас его еще нет (его можно найти в папке / wp-content / themes / yourtheme /, заменив «yourtheme» именем папки). Затем скопируйте и вставьте следующий фрагмент кода PHP:
add_theme_support («широкое выравнивание»);
После добавления кода перезагрузите измененный файл Functions.php в папку вашей темы.
Этот код означает, что вы хотите активировать блоки ширины и выравнивания по ширине. Теперь, когда вы входите в WordPress и получаете доступ к редактору страниц / постов, обратите внимание, что некоторые блоки (не все) имеют новые параметры выравнивания «Полный» и «Ширина».
Вы используете коммерческую или стандартную тему?
Если вы используете стандартную или коммерческую тему WordPress, убедитесь, что вы используете дополнительную тему. Это позволит вам вносить изменения в тему, не теряя ее после обновления.
Основной стиль блока
Разработка широкого или полностью выровненного блока может быть немного сложнее. И есть несколько разных техник. То, что мы будем использовать здесь, происходит из этого примера в CodePen.
@ экран мультимедиа e (минимальная ширина: 960 пикселей) {
.alignwide, .alignfull {
ширина: 100 кВт;
максимальная ширина: 100vw;
левое поле: calc (50% – 50 VW);
}
}
Обратите внимание, что мы используем медиа-запрос CSS для включения именно этого стиля, когда размер экрана составляет 960 пикселей или более. Это потому, что мы не обязательно хотим этот эффект на небольших экранах.
В этом случае мы используем одинаковые стили для выравнивания двух блоков. Очевидно, что их можно разрабатывать отдельно, так что каждый из них имеет уникальный внешний вид.
Также стоит отметить возможный недостаток: на некоторых моделях при использовании этой техники может появиться горизонтальная полоса прокрутки. Это можно исправить с помощью CSS, добавив в элемент body следующее:
Body {
x-pop: скрытый;
}
Результаты
Теперь, когда мы включили полную и выровненную функцию блокировки, пришло время проверить это. Здесь мы создаем страницу с блоком обложки, с широким выравниванием.
При взгляде на переднюю часть сайта блок колод работает как положено. Элемент занимает всю ширину страницы, а содержимое ниже остается в пределах стандартной ширины темы в 960 пикселей.
Используя только стандартные стили, этот элемент действительно выделяется. Тем не менее, есть много возможностей сделать больше с дизайном.
Добавив дополнительные классы CSS или нацеливаясь на конкретные блоки, мы получаем полный арсенал возможностей дизайна. Такие вещи, как фон, границы или обтравочные контуры, могут добавить уникальный штрих.
Расширение с темами WordPress
В стандартной установке Gutenberg не предоставляет все возможности плагина для построения страниц. Но выравнивание блоков позволяет нам выйти на эту территорию.
Это хорошо, потому что веб-дизайн развивался с тех пор, как появился классический редактор. В то время сайты имели тенденцию постоянно использовать одинаковую ширину контента.
Разделы полной ширины в настоящее время являются одними из самых популярных и полезных вариантов дизайна. Возможность воспользоваться этим без необходимости использования плагинов тем или хаков делает WordPress еще лучше для дизайнеров.
