Натяжка верстки на Gutenberg • WP Best

Новый блочный редактор WordPress

С выходом WordPress 5.0 разработчики выпустили новый редактор по умолчанию, под названием Gutenberg.

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

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

Если сайт перестал правильно функционировать, можно откатиться к использованию классического редактора.

Тем не менее, выбор сделан, и нам нужно плавно совершать переход.

Первая попытка натянуть верстку на Gutenberg

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

В общем, получилось. В работе, конечно, присутствовали плюсы и минусы. Но в целом, преимущество Gutenberg я увидел.

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

Пример переноса HTML верстки в Gutenberg

В качестве наглядного примера, я выбрал простой бесплатный современный шаблон.

https://www.tooplate.com/view/2111-pro-line

Для начала, конечно, нужно разделить шаблон по файлам темы, подключить ресурсы, картинки, стили, скрипты, шрифты.

Об этом я написал подробную статью 3 года назад, и с тех пор больших изменений не произошло.

http://wp-best.ru/kak-natyanut-html-shablon-na-wordpress-chast-1/

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

Пользуемся блоками Gutenberg

Копируем весь HTML код основного содержания в новый блок HTML. Так будет удобнее с ним работать.

Добавляем весь код в один блок

Далее, копируем-вырезаем верхние теги разметки.

<section class="tm-banner-section" id="tmVideoSection">
    <div class="container tm-banner-text-container">
        <div class="row">
            <div class="col-12">
                <header>
Переносим теги в другой блок

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

Набираем заголовок и задаем в настройках класс

Аналогично, добавляем блок Абзац и добавляем к нему CSS класс.

Новый блок абзац с классом

Оставшиеся закрывающие теги секции переносим в новый HTML блок.

               </header>
            </div>
        </div>
    </div>
Результат всех перечисленных правок

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

Надеюсь, главный принцип понятен.

Сравнение с конструкторами и плагином ACF

В первую очередь, это инструменты с разными возможностями.

Дополнительные поля ACF требуют определенные навыки работы с кодом.

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

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

Если верстку страницы можно натянуть стандартными средствами WordPress, не стоит усложнять и расширять дополнительными плагинами.

Делитесь вашими впечатлениями использования нового блочного редактора Gutenberg.

Подписаться
Уведомление о
guest
2 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Зачем
Зачем
1 год назад

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

Автор
Автор
5 месяцев назад
Reply to  Зачем

Согласен, данный подход для настоящих даунов

2
0
Оставьте комментарий.x
()
x
Пролистать наверх