Урок 11

Конфигурируем Gutenberg

В этом уроке мы сделаем так, что при редактировании записи / страницы в админке они будут выглядеть точно так же, как и на сайте!

Чтобы скачать тему WordPress, которая получилась у нас в процессе этого урока, необходимо приобрести курс.

К примеру мы немного заполнили пост, и на сайте он выглядит так:

А в админке, в конце этого урока, в редакторе Gutenberg он выглядит так!

Стилизация редактора Gutenberg в WordPress под дизайн вашей темы

Чувствуете?

Мы подключили шрифты – такие же, которые используются в нашей вёрстке.
Настроили размеры и межстрочные интервалы.
Стилизовали заголовки.
Стилизовали функционал «Буквицы» (это когда первая буква в абзаце большая).
Стилизовали блок цитаты, списки, ширину контента и т.д.

Разве не круто? А хотите посмотреть, как выглядел редактор Gutenberg до того, как мы его настроили? Для той же самой записи:

Редактор Gutenberg с дизайном по умолчанию

Причём для такой настройки Gutenberg под тему нам не нужно делать чего-то сверхсложного! Не придётся создавать блоки, изучать JavaScript и React. В конце концов – это же базовый курс по созданию темы 🙃

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

add_theme_support( 'gutenberg', array(
	'wide-images' => true
) );

Купить курс

21 видеоурок
Можно скачать готовый код после каждого урока
Можно начать проходить курс сразу же после оплаты
Достаточно базовых знаний HTML и CSS, чтобы пройти курс
Единоразовый платёж
Доступ навсегда
Уроки актуальны в 2023-м году

5000 р