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

Главная » Натяжка верстки на Gutenberg

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

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

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

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

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

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

к содержанию ↑

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

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

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

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

к содержанию ↑

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

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

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

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

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

https://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.

1
Оставить комментарий

avatar
1 Цепочка комментария
0 Ответы по цепочке
1 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
1 Авторы комментариев
Зачем Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Зачем
Гость

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

Пролистать наверх