В центре редактора Gutenberg находится "Блок", и при вставке контента, такого как текст, изображения и т. д., суть заключается в добавлении соответствующего типа блока и его редактировании. Такой подход очень гибок и обеспечивает точный контроль над стилем и положением каждого элемента. Вот подробные шаги:
I. Вставка текста: построение содержания с помощью блоков абзацев и заголовков
Текст - это основная часть статьи, и в Gutenberg его расположение осуществляется с помощью блоков "Параграф" и "Заголовок", которые работают следующим образом:
1. Вставьте текст абзаца (основное содержимое)
- Метод 1: При входе на страницу редактирования статьи по умолчанию отображается запрос "Начните писать или введите / для добавления блока", и система автоматически создает блок "Параграф" при непосредственном вводе текста.
- Метод 2: Нажмите значок "+" (вставка блока) в области редактирования, найдите "абзац" и нажмите его, чтобы создать пустой блок абзаца, а затем введите содержимое.
форматирование：
Выберите блок абзаца, и справа появится панель Block (Block Settings) для его настройки:
- Выравнивание (выравнивание по левому краю, выравнивание по центру, выравнивание по правому краю, выравнивание по концам);
- Размер текста (маленький, обычный, большой, очень большой);
- Цвет текста (нажмите на квадрат с цветом, чтобы выбрать цвет, при этом следите за тем, чтобы он контрастировал с цветом фона, чтобы обеспечить читаемость);
- Цвет фона (добавляет основной цвет к абзацу, чтобы выделить важное содержимое).
2. вставка заголовков (иерархия содержания)
Заголовок используется для обозначения структуры статьи (например, глава, раздел), и рекомендуется использовать его в соответствии с иерархией "H1-H6" (H1 - это, как правило, основной заголовок статьи, который по умолчанию размещается в верхней части страницы редактирования, поэтому нет необходимости добавлять его повторно).
процедура：
- Нажмите на значок "+" в области редактирования, найдите "Заголовок" и выберите его, чтобы создать блок заголовка.
- Введите текст заголовка (например, "I. Подготовка к установке").
- Выберите блок и выберите H2-H6 (H2 для подзаголовка первого уровня, H3 для подзаголовка второго уровня и так далее) в "Уровне заголовка" на правой панели.
изысканность: После ввода текста выделите его и нажмите кнопку Ctrl+B(жирный) или Ctrl+I(курсив) для быстрого оформления текста.
II. Вставка изображений: использование блока "Картинки" для добавления изображений и их оптимизации
Изображения оживляют посты, а блок "Изображения" в Gutenberg поддерживает загрузку, изменение размера и оптимизацию в следующих шагах:
1. 3 способа вставки изображений
- Способ 1: Загрузите новое изображениеНажмите на значок "+" → найдите "Изображения" → нажмите "Загрузить" → выберите файл с изображением на своем компьютере → дождитесь завершения загрузки.
- Способ 2: Использование изображений из медиатекиЕсли изображение уже было загружено (например, вставленное ранее), нажмите на блок "Изображения" и выберите "Медиатека" → Отметьте нужное изображение → Нажмите "Выбрать".
- Способ 3: Вставить изображение напрямуюСкопируйте изображение на свой компьютер (правой кнопкой мыши "Копировать"), вернитесь в область редактирования и правой кнопкой мыши "Вставить", система автоматически создаст блок изображения и загрузит его.
2. Настройка стилей изображений (должны быть оптимизированы)
Выбрав блок изображения, на правой панели можно настроить следующие основные параметры:
- выравнивание：
- Выровненный по левому краю / Выровненный по правому краю: изображения отображаются по бокам, а текст - вокруг них;
- Выравнивание по центру: изображения отображаются по центру, а текст - выше и ниже;
- Широкое выравнивание: изображение занимает всю ширину области редактирования (подходит для больших изображений).
- величина: Перетащите ползунок "Ширина", чтобы настроить масштаб (рекомендуется держать галочку "Ограничить масштаб", чтобы избежать искажения изображения).
- ссылка: Отметьте поле ввода "Ссылка", чтобы связать изображение с другими страницами (например, нажмите на изображение, чтобы перейти на страницу с изображением высокого разрешения), ссылку можно оставить пустой.
- Альтернативный текст (Alt Text): Введите описание изображения (например, "Скриншот шагов установки WordPress"), чтобы помочь поисковым системам распознать содержимое изображения, улучшить SEO и облегчить доступ к нему.
3. Решение общих проблем
- Не удалось загрузить изображение: проверьте размер изображения (рекомендуется не более 5 МБ), формат (поддерживаются JPG, PNG, WebP) или обновите страницу и повторите попытку.
- Размытые изображения: обязательно загружайте оригинальное изображение (разрешение не менее 1000px по ширине) и избегайте масштабирования сверх исходного размера.
Вставка видео: добавьте локальное или онлайн-видео с помощью блока "Видео".
Будь то видео, снятое вами самостоятельно, или видео с YouTube, Station B или других платформ, вы можете вставить его через блок "Видео":
1. Вставьте локальное видео (то, которое вы загрузили сами)
- Нажмите на значок "+" → найдите "Видео" → выберите "Загрузить" → выберите видеофайл на вашем компьютере (поддерживаются форматы MP4, WebM).
- После завершения загрузки видео автоматически отображается в блоке, и его можно проверить, нажав кнопку воспроизведения.
принимать к сведениюЛокальные видеофайлы имеют большой размер и могут занимать место на сервере и замедлять скорость загрузки. Рекомендуется использовать этот метод только для небольших видео (в пределах 100 МБ), а для больших видео отдавать предпочтение онлайн-платформам.
2. Вставьте онлайн-видео (рекомендуется!)
Вставленный через ссылку на видеоплатформу, он не занимает места на сервере и загружается быстрее:
- Откройте видеоплатформу (например, YouTube, B Station, Tencent Video), найдите целевое видео и скопируйте ссылку для обмена (например.
https://www.bilibili.com/video/BV123456）。 - В области редактирования Gutenberg вставьте ссылку → система автоматически распознает и создаст видеоблок, а также отобразит видеоплеер.
Поддерживаемые платформыВы можете использовать YouTube, B-Site, Tencent Video, Youku, Aqiyi и другие основные платформы, и подождите 2-3 секунды, пока ссылка загрузится после вставки.
3. Настройка стиля видео
Выберите видеоблок, после чего можно настроить правую панель:
- Выравнивание (такое же, как у изображения, выравнивание влево/вправо позволяет тексту обворачиваться);
- Ширина (изменение размера видеоплеера, рекомендуется не превышать ширину 1000px во избежание неполного отображения на мобильных телефонах);
- Автовоспроизведение: не рекомендуется (большинство браузеров блокируют автовоспроизведение, что негативно сказывается на впечатлениях от просмотра).
В-четвертых, вставляйте ссылки: пусть текст, картинки связаны с другим контентом.
Ссылки - это "кровеносные сосуды" сайта, которые могут связывать содержимое с другими страницами и внешними сайтами, и Gutenberg поддерживает добавление ссылок в текст и изображения:
1. Добавление ссылок в текст (гиперссылки)
- Выберите текст, на который нужно добавить ссылку (например, "Нажмите для получения подробного руководства").
- Нажмите на значок "Связь" (в виде цепочки) на панели инструментов, которая появится выше, или нажмите клавишу быстрого доступа
Ctrl+K。 - Вставьте адрес ссылки (например, ссылку на страницу сайта) в поле ввода.
https://你的域名/教程или внешние ссылкиhttps://example.com）。 - Дополнительные настройки:
- Поставьте галочку "Открыть в новой вкладке" (чтобы посетители не покидали ваш сайт, рекомендуется использовать внешние ссылки);
- Нажмите на значок "Настройки ссылки" (маленькая шестеренка), чтобы добавить заголовок ссылки (текст подсказки, отображаемый при наведении мыши).
- Нажмите "Ввод" или "Применить", чтобы завершить настройку, текст станет синим и подчеркнутым, что означает, что ссылка успешно добавлена.
2. Добавление ссылок на изображения
- Выберите блок изображения и найдите поле ввода "Ссылка" на правой панели.
- Введите адрес ссылки (например, нажмите на изображение, чтобы перейти на страницу с подробным описанием продукта).
- Поставьте галочку "Открыть в новой вкладке" (по желанию) и нажмите на пробел, чтобы сохранить.
3. удаление ссылок
- Текстовая ссылка: выделите текст со ссылкой, щелкните значок "Удалить ссылку" (цепочка с крестиком) на панели инструментов или нажмите кнопку
Ctrl+KПосле этого удалите адрес ссылки. - Ссылка на изображение: выберите изображение и удалите адрес в поле ввода "Ссылка" справа.
V. Советы начинающим операторам
- Ярлыки операций с блоками：
- Быстрое добавление блока: введите
/+ имя блока (например./图片(Вызовите блок изображений напрямую); - Переместить блок: выберите блок и нажмите кнопку
↑/↓или перетащите значок "⋮⋮" слева от блока; - Удалить блок: выберите блок и нажмите кнопку
Deleteили щелкните значок "Удалить" на панели инструментов блока.
- Быстрое добавление блока: введите
- Предварительный просмотр в режиме реального времени: Нажмите кнопку "Предварительный просмотр" в правом верхнем углу страницы редактирования, чтобы проверить, работает ли ссылка и правильно ли отображается изображение/видео.
- Избегайте чрезмерной типографикиЦвет текста и цвет фона не должны быть слишком большими (не более 3), чтобы страница выглядела аккуратно и опрятно; размер изображений и видео равномерный (например, ширина установлена на 800px), чтобы улучшить эстетику.
Выполнив описанные выше действия, вы сможете легко вставлять и редактировать текст, изображения, видео и ссылки в редакторе Gutenberg. Помните: каждый элемент - это отдельный "блок", выделите его и настройте параметры в правой панели для точного расположения. Потренируйтесь еще несколько раз, и вы скоро все поймете!
Русский