Как настроить текст в редакторе WordPress Gutenberg (внутренняя часть)

Опубликовано: 2024-12-09

Редактор WordPress Gutenberg — мощный инструмент для создания контента, но его внутренний интерфейс по умолчанию не всегда отвечает конкретным потребностям каждого пользователя.

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

В этой статье мы рассмотрим, как настроить текст в серверной части редактора Gutenberg, добавив пользовательские фрагменты PHP и модификации CSS, которые вы можете применить к любой используемой вами теме WordPress.

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

До настройки
После настройки

Действия по настройке текста во внутренней области редактора WordPress Gutenberg

Шаг 1. Добавьте пользовательский код в файл function.php.

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

На панели управления WordPress выберите «Внешний вид» > «Редактор файлов темы» . Вы можете найти Редактор файлов темы в меню «Инструменты» , если вы используете тему блока.

После входа на страницу редактора файлов темы выберите   файл function.php . После этого вставьте приведенный ниже фрагмент PHP в конец содержимого файла function.php . Затем обновите файл темы, нажав кнопку «Обновить файл» . 

 // Добавляем собственный CSS в редактор Гутенберга
функция custom_gutenberg_editor_styles() {
    add_theme_support('стили редактора'); // Включаем стили редактора
    add_editor_style('custom-editor-style.css'); // Ставим в очередь пользовательский CSS-файл
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Подключаем стили пользовательского редактора напрямую
функция enqueue_custom_editor_css() {
    wp_enqueue_style(
        'пользовательские стили редактора', 
        get_template_directory_uri() . '/custom-editor-style.css',
        множество(),
        '1.0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Шаг 2. Добавьте файл CSS в каталог вашей темы ( custom-editor-style.css ).

Далее вам нужно создать файл CSS с именем custom-editor-style.css в каталоге вашей темы (например, wp-content/themes/your-theme/).

1. Установите файловый менеджер для WordPress

Чтобы создать имя файла CSS в каталоге вашей темы, вы можете использовать любой файловый менеджер для WordPress, доступный в каталоге плагинов WordPress.

Пожалуйста, установите и активируйте его, затем начните создавать новый CSS-файл с именем custom-editor-style.css в каталоге вашей темы. В этом примере мы используем плагин Advanced File Manager, а наша текущая тема WordPress — Astra, поэтому путь будет таким: wp-content/themes/astra/custom-editor-style.css

2. Добавьте фрагмент CSS в файл custom-editor-style.css.

Затем добавьте в этот файл пользовательские стили, чтобы изменить текст во внутренней области Гутенберга. Скопируйте приведенный ниже фрагмент CSS и вставьте его в поле ввода.

Вот фрагмент CSS, который вы можете использовать: 

 /* Настраиваем размер шрифта абзаца и высоту строки */
.editor-styles-wrapper p {
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}



/* Настраиваем заголовок сообщения редактора (H1) */
.editor-post-title__input {
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 40 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 700 !важно;
    высота строки: 1,6 !важно;
}

/* Настраиваем блоки заголовков (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 36 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 700 !важно;
    высота строки: 1,6 !важно;
}

.editor-styles-wrapper h3{
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 32px !важно;
    цвет: #000000 !важно;
    шрифт-вес: 700 !важно;
    высота строки: 1,6 !важно;
}

.editor-styles-wrapper h4{
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 30 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 700 !важно;
    высота строки: 1,6 !важно;
}

.editor-styles-wrapper h5{
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 28 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 700 !важно;
    высота строки: 1,6 !важно;
}


/* Стиль для неупорядоченных списков */
.editor-styles-wrapper ul {
    поле слева: 20 пикселей;
    отступ слева: 20 пикселей;
    Тип стиля списка: диск;
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    семейство шрифтов: «Arial», без засечек !important;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

/* Стиль для элементов списка */
.editor-styles-wrapper ul li {
    нижнее поле: 10 пикселей;
    размер шрифта: 18 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

/* Вложенные стили списков */
.editor-styles-wrapper ul ul {
    поле слева: 20 пикселей;
    Тип стиля списка: круг;
}

/* Дополнительные стили для упорядоченных списков, если необходимо */
.editor-styles-wrapper ол {
    поле слева: 20 пикселей;
    отступ слева: 20 пикселей;
    Тип стиля списка: десятичный;
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    семейство шрифтов: «Arial», без засечек !important;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

Добавив фрагмент CSS в файл custom-editor-style.css , вы можете проверить, успешно ли применяются ваши настройки во внутренней области редактора Gutenberg.

Перейдите в редактор WordPress Gutenberg, создав новый тип записи (страницу или запись) или выбрав существующий.

Что сделал код?

1: Пользовательский код в файле function.php.

Первая функция 
 функция custom_gutenberg_editor_styles() {
    add_theme_support('стили редактора'); // Включаем стили редактора
    add_editor_style('custom-editor-style.css'); // Ставим в очередь пользовательский CSS-файл
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Эта функция сообщает WordPress использовать собственный файл CSS ( custom-editor-style.css ) в редакторе Gutenberg.

Вторая функция 
 функция enqueue_custom_editor_css() {
    wp_enqueue_style(
        'custom-editor-styles', // Уникальное имя таблицы стилей.
        get_template_directory_uri() . '/custom-editor-style.css', // Путь к вашему CSS-файлу.
        array(), // Никаких зависимостей.
        '1.0' // Версия CSS-файла.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Эта функция напрямую загружает файл custom-editor-style.css в редактор.

Почему две функции?

  • Первая функция добавляет базовую поддержку тем для стилизации редактора WordPress Gutenberg.
  • Вторая функция контролирует, как и когда загружается файл CSS.

2. Фрагмент CSS в файле custom-editor-style.css.

Настроить текст абзаца (p) 
 .editor-styles-wrapper p {
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

Что он делает:

  • Изменяет размер шрифта абзацев на 18 пикселей.
  • Устанавливает высоту строки на 1,6 для лучшей читаемости.
  • Применяет черный цвет текста #000000.
  • Использует обычную толщину шрифта (400).
  • !important : гарантирует, что эти стили переопределят любые конфликтующие стили.
Настройте заголовок сообщения (H1) 
 .editor-post-title__input {
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 40 пикселей! важно;
    цвет: #000000 !важно;
    вес шрифта: 700;
    высота строки: 1,6;
}

Что он делает:

  • Изменяет шрифт заголовка сообщения на Arial с запасным вариантом без засечек.
  • Устанавливает большой размер шрифта 40 пикселей.
  • Обеспечивает выделение текста жирным шрифтом (вес шрифта: 700) и использование черного цвета.
  • Поддерживает постоянную высоту строки.
Настройте блоки заголовков (H2, H3, H4, H5) 
 .editor-styles-wrapper h2 {
    семейство шрифтов: «Arial», без засечек !important;
    размер шрифта: 36 пикселей! важно;
    цвет: #000000 !важно;
    вес шрифта: 700;
    высота строки: 1,6;
}

Аналогичные стили применяются для H3, H4 и H5 с уменьшением размера шрифта:

  • Н2: 36 пикселей
  • Н3: 32 пикселя
  • Н4: 30 пикселей
  • H5: 28 пикселей

Что он делает:

  • Стандартизирует семейство шрифтов, цвет, толщину и высоту строки на всех уровнях заголовков.
  • Обеспечивает четкую иерархию путем регулировки размеров шрифта.
Стиль для неупорядоченных списков (ul) 
 .editor-styles-wrapper ul {
    поле слева: 20 пикселей;
    отступ слева: 20 пикселей;
    Тип стиля списка: диск;
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    семейство шрифтов: «Arial», без засечек !important;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

Что он делает:

  • Добавляет пробел слева от неупорядоченных списков (отступ).
  • Гарантирует, что элементы списка используют стиль маркера диска.
  • Применяет одинаковый размер шрифта, цвет и высоту строки в соответствии с текстом абзаца.
Стиль для элементов списка (ul li) 
 .editor-styles-wrapper ul li {
    нижнее поле: 10 пикселей;
    размер шрифта: 18 пикселей! важно;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

Что он делает:

  • Добавляет расстояние между элементами списка для удобства чтения (нижнее поле: 10 пикселей).
  • Обеспечивает соответствие стилей текста общему дизайну.
Вложенные стили списков 
 .editor-styles-wrapper ul ul {
    поле слева: 20 пикселей;
    Тип стиля списка: круг;
}

Что он делает:

  • Регулирует отступы для вложенных неупорядоченных списков.
  • Изменяет стиль маркеров для вложенных списков на кружок.
Стиль для упорядоченных списков (старый) 
 .editor-styles-wrapper ол {
    поле слева: 20 пикселей;
    отступ слева: 20 пикселей;
    Тип стиля списка: десятичный;
    размер шрифта: 18 пикселей! важно;
    высота строки: 1,6 !важно;
    семейство шрифтов: «Arial», без засечек !important;
    цвет: #000000 !важно;
    шрифт-вес: 400 !важно;
}

Что он делает:

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

Итог

В этой статье показано, как легко можно настроить текст во внутренней области редактора WordPress Gutenberg. Как мы упоминали в начале этой статьи, настройка текста во внутренней области Гутенберга улучшит ваши возможности редактирования. Расширение возможностей редактирования в WordPress имеет решающее значение, поскольку оно напрямую влияет на нашу эффективность, креативность и удовлетворенность как создателей контента.

Реализация метода, описанного в этой статье (добавление пользовательского кода в файл function.php и добавление файла CSS в каталог вашей темы), позволит вам настроить текст во внутренней области Gutenberg независимо от того, какую тему WordPress вы используете. Такой подход гарантирует, что ваши изменения останутся согласованными в разных темах и обновлениях.

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