Создание блочных тем WordPress и полнофункциональное редактирование

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

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

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

Полнофункциональное редактирование WordPress (FSE) — это…?

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

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

После обновления WordPress до последней версии необходимо включить тему FSE, например Twenty Twenty-Two. После этого вы можете использовать только блоки Гутенберга для создания всего веб-сайта.

Как FSE может вам помочь?

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

А глобальные элементы, что это такое? Выделенные глобальные элементы, контейнеры и столбцы можно использовать на всем веб-сайте.

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

В выпуске WordPress 6.0 FSE не включен по умолчанию. Поэтому, чтобы использовать возможность полного редактирования сайта при использовании версии WordPress старше 6.0, вы должны сначала обновить WordPress, прежде чем активировать тему FSE. Панель инструментов вашего сайта — это то место, где вы управляете всем этим.

Среда WordPress снова развивается

Этот тип изменений в WordPress произошел в предыдущий период. Мы все были знакомы с Гутенбергом около трех лет назад (трудно вспомнить из-за того, что один, если не больше, из этих последних лет резко исчез). Теперь вы можете называть его редактором блоков.

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

Смещение фокуса: от пользователей к строителям

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

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

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

Тогда почему важно создать полноценную тему сайта?

Beaver Builder появился раньше Elementor, помните? Многие из вас использовали его сами или в компаниях, где вы работали над созданием полноценных веб-сайтов для бизнес-клиентов. Однако им требовался другой продукт, Beaver Themer. В противном случае вам нужно было предоставить им помощь с темой, которая поддерживала настраиваемые (и динамические) верхние и нижние колонтитулы, когда им нужно было изменить верхний и нижний колонтитулы веб-страниц (или сообщений).

Было здорово, когда такие темы, как Blocksy, Kadence и Astra, начали развивать эти функции. Но это также привело к некоторой блокировке. И вы понимаете, что происходит дальше: после того, как клиент устанавливает плагин на свой веб-сайт, он обнаруживает, что он несовместим с темой или конструктором страниц.

Внезапно все показывают пальцем. Тематические фирмы утверждают, что это не они. По мнению создателей страниц, это тоже не они. Угадай, что? Новые игроки в игре, хостинговые компании, утверждают, что это не они. В конечном итоге обвинили строителей (подрядчиков и агентства), которые изначально построили участок.

То же самое произошло, когда пользователи начали жаловаться на то, как медленно загружаются эти страницы из-за кода, созданного теми же конструкторами страниц. Агентства и фрилансеры подверглись критике.

Решение

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

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

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

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

Как придать всему этому логический смысл?

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

Вам нужен комфорт «проверенного и надежного» с силой «нового». И вопросов больше, чем решений…

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

Представьте себе, что вы посещаете курс, в котором подробно объясняется все, что вам нужно было понять о создании блочных тем и FSE. Мы имеем в виду следующие 14 пунктов, в дополнение к другим:

• Узнайте о полном редактировании сайта, чтобы увидеть, как это влияет на разработку темы.
• Создайте базовый шаблон индекса, а затем используйте блоки для извлечения сообщений из базы данных.
• Не кодируя ни одной строчки, реализуйте целый домашний шаблон блога.
• Должны быть добавлены верхние и нижние колонтитулы для темы.
• Узнайте, как полнофункциональное редактирование сайта относится к навигационным меню.
• Узнайте, как настроить параметры редактора блоков с помощью файла theme.json.
• Узнайте, как использовать встроенные элементы управления шаблонами для создания универсальных макетов.
• Используя theme.json, примените универсальную типографику и цветовые схемы.
• Управляйте отступами и полями с помощью элементов управления интервалами.
• Узнайте, как настроить редактор блоков, чтобы его настройки соответствовали теме.
• Добавьте выбор шрифта, градиенты, цветовые палитры и другие параметры настройки.
• Чтобы ограничить, насколько ваши клиенты могут отличаться от базового дизайна, узнайте, как исключить нежелательные варианты настройки из блоков.
• Узнайте, как использовать шаблоны, чтобы помочь вам и вашим клиентам быстрее создавать страницы.
• Используйте элементы шаблона, чтобы предотвратить повторное использование блочных компонентов в других шаблонах.

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

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

Так что, ребята, удачи в темах строительных блоков и выполнении FSE!