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

Урок 11

Зарегистрируйтесь или войдите и получите бесплатный доступ к первым 3-м урокам курса.

Урок 11

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

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

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

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

Запись на сайте WordPress

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

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

Чувствуете?

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

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

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

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

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

add_theme_support( 'gutenberg', array(
	'wide-images' => true
) );
Купить курс
  • 21 видеоурок
  • Можно скачать готовый код после каждого урока
  • Можно начать проходить курс сразу же после оплаты
  • Достаточно базовых знаний HTML и CSS, чтобы пройти курс
  • Единоразовый платёж
  • Доступ навсегда
  • Уроки актуальны в 2024-м году
5000 р

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