Написание и редактирование

Редактор WordPress: работа с блоками

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

Содержание

Редактор блоков WordPress
Редактор блоков WordPress

Редактор WordPress используется для создания страниц и записей с медиаданными, а также для управления их структурой. Вам больше не нужно беспокоиться о выравнивании и структурировании текста, цитат и изображений. Теперь каждый элемент в записи или на странице размещён в отдельном блоке. Процессы выполняются автоматически, а вы можете сосредоточиться на творческой части.

Перемещайте, редактируйте, настраивайте каждый блок — этот редактор будет отображать визуальные элементы точно так же, как они будут выглядеть на вашем сайте. Это позволит вам не тратить время на предварительный просмотр и перепроверку содержимого, прежде чем нажать кнопку «Опубликовать».

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

Блоки

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

Благодаря этому вы получаете возможности создания страниц и записей без особых усилий. Блоки позволяют быстро добавлять и настраивать различные медиафайлы и визуальные элементы (раньше для этого требовались шорткоды, пользовательский HTML-код и внедрённые объекты).


Добавление блока

Существуют разные типы блоков. Они упорядочены по категориям и по времени последнего использования. Каждый блок можно редактировать или перемещать независимо от других блоков. Иногда некоторые блоки содержат свои собственные настройки форматирования, с помощью которых можно ещё более точно управлять макетом и функциональными возможностями.

Добавление новых блоков
Добавление новых блоков

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

  1. Нажмите чёрный значок «+» в боковой части любого пустого блока.
  2. Нажмите синий значок «+» в левом верхнем углу окна редактора.
  3. Нажмите клавишу «Ввод» (клавишу перевода строки), находясь в выбранном блоке, чтобы создать под ним новый блок.
  4. Нажмите чёрный значок «+» сверху в центре существующего блока, чтобы добавить блок над ним.
  5. Щёлкните три точки над выделенным блоком и выберите, куда добавить новый блок: выше или ниже текущего.

По умолчанию используется блок, представляющий собой абзац, который применяется для вставки обычного текста. С помощью кнопок «+» можно выбрать и другой тип блока. Для поиска блока можно ввести косую черту и имя блока, например /image или /heading.

Горячие клавиши для добавления блока
Горячие клавиши для добавления блока

См. раздел «Часто используемые блоки»

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

Категория «Часто используемые блоки»
Категория «Часто используемые блоки»

Чтобы активировать категорию «Часто используемые блоки», выполните следующие действия:

  1. Нажмите вертикальный значок «…» в правом верхнем углу экрана редактора.
  2. Выберите Опции.
  3. Установите флажок Активировать категорию «Часто используемые блоки» в библиотеке блоков.
Опция активации часто используемых блоков
Опция активации часто используемых блоков

Перемещение блоков

Блоки можно перетаскивать. Для этого нажмите и удерживайте ручку на панели инструментов, которая появляется при наведении курсора на левую сторону панели инструментов. Кроме того, для перемещения блока на один шаг в желаемом направлении можно использовать стрелки вверх и вниз.

Перемещение блока
Перемещение блоков

Настройка блока

Каждый блок имеет собственные настройки. Для доступа к настройкам щёлкните мышью блок. В его верхней части появится панель инструментов. Дополнительные настройки также находятся на боковой панели справа от редактора.

Примеры различных панелей инструментов блока

Панель инструментов блока абзаца
Панель инструментов блока абзаца
Панель инструментов блока изображения
Панель инструментов блока изображения
Панель инструментов блока списка
Панель инструментов блока списка

Настройки блока — Панель инструментов

Для доступа к дополнительным опциям, которые есть у большинства блоков, нажмите кнопку с многоточием справа от панели инструментов блока.

  1. Команда Скрыть параметры блока закрывает меню настроек.
  2. Команда Дублировать создаёт второй блок с таким же содержимым на той же странице.
  3. Команда Вставить до/после добавляет новый блок до или после текущего.
  4. Команда Редактировать как HTML переводит блок в версию HTML для редактирования кода HTML напрямую. В режиме редактирования HTML эта опция меняется на «Редактировать визуально».
  5. Команда Добавить в мои блоки даёт возможность создать блок, который можно использовать на других страницах с сохранением содержимого и оформления. Подробнее
  6. Команда Удалить блок удаляет блок со страницы или из записи.
Опции дополнительной панели инструментов для блоков
Опции дополнительной панели инструментов для блоков

Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включён в список разрешённых тегов HTML и не является кодом для ограниченного использования, как, например, JavaScript.

Настройки блока — Боковая панель

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

На снимке экрана справа активным блоком является «Абзац». В нём можно изменить размер шрифта, шрифт и цвет фона. Кроме того, для него доступны расширенные опции: создание переходов и ссылок внутри страницы или добавление класса CSS.

Если вы не видите настройки блока в правой части окна редактора, нажмите значок настроек ⚙️ (в форме шестерёнки) рядом с кнопкой «Опубликовать/обновить», чтобы развернуть боковую панель меню.

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

Изменение типа блока

Можно ли изменить тип блока? Нет проблем! Каждый блок можно преобразовать в блок другого сходного или связанного типа. Например, изменить абзац на заголовок, список или цитату.

Изменение типа блока
Изменение типа блока

Навигация по блокам

Некоторые блоки встроены в другие (так называемые родительские) блоки. При этом необходимо знать, как можно без труда выбрать родительский блок. Чтобы выбрать родительский блок, наведите курсор на крайний левый значок на панели инструментов, как показано на этом снимке экрана.

Инструмент выбора родительского блока

Например, необходимо разместить текст внутри блока «Столбец». В таком случае следует выбрать блок «Столбец». Чтобы расположить несколько кнопок внутри блока «Кнопки», выберите блок «Кнопки».

Кроме того, можно использовать навигацию по блокам.

Навигация по блокам — это раскрывающийся список со всеми блоками, вставленными на страницу или в запись. Он упрощает обзор структуры страницы и выбор блока, с которым вы хотите поработать.


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

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

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

Удаление блока

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

Удалить блок
Удалить блок

Настройки документа

Справа от редактора блоков находится меню Настройки документа. В нём можно добавить теги и категории, задать избранное изображение, проверить и изменить статус записи, а также выполнить другие действия, которые применяются к странице или записи в целом.

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

Редактор WordPress — Настройки документа
Настройки документа

Если вы не видите панель «Настройки документа» в правой части окна редактора блоков, нажмите значок настроек ⚙️ (в форме шестерёнки) в правом верхнем углу. 

Редактор WordPress — Настройки

Шаблоны блоков

Шаблоны блоков — это коллекция готовых блоков, которые можно вставлять на страницы и в записи. Например, существует шаблон, с помощью которого можно вставить и расположить рядом три изображения. Вставка шаблона блока

  1. Нажмите значок «+» для добавления нового блока.
  2. Откройте вкладку Шаблоны.
  3. Щелчком мыши выберите шаблон, который необходимо вставить. Он будет вставлен в документ в месте расположения курсора.

Подробные сведения см. в руководстве по работе с шаблонами блоков.


Дополнительные параметры

Настройте параметры редактирования в соответствии со своими потребностями с помощью трёх точек справа от значка настройки.

Просмотр

Показывает опции там, где отображаются панели инструментов блока при редактировании.

Редактор

По умолчанию открывается визуальный редактор. Переключитесь в редактор кода, чтобы просматривать всю страницу в виде HTML-кода.

Не весь код будет работать в режиме «Редактировать как HTML». Если ваш код имеет верный синтаксис и не содержит ошибок, убедитесь, что в нем используются только разрешенные теги HTML и нет кода с ограничениями на использование, например JavaScript.

Инструменты

Управляйте существующими блоками, которые можно использовать многократно, копируйте все содержимое для вставки на другую страницу или освойте комбинации клавиш быстрого доступа.

Опции

Укажите, какие настройки документа будут видны на боковой панели.

Дополнительные параметры

Часто задаваемые вопросы

Как редактировать код HTML в редакторе WordPress?

Добавьте пользовательский блок HTML, чтобы задать собственный код HTML.

Другие опции редактирования кода HTML в редакторе WordPress описаны здесь.

Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включён в список разрешённых тегов HTML и не является кодом для ограниченного использования, как, например, JavaScript.

Как будет выглядеть моё текущее содержимое?

После перехода с классического редактора на редактор блоков текущее содержимое должно выглядеть так же, как и раньше. Если вы редактируете существующую запись или страницу в новом редакторе, всё содержимое будет помещено в классический блок, который будет обрабатывать данную информацию точно так же, как это делалось в предыдущем редакторе. Здесь подробно описан процесс преобразования в блоки.

Почему моё содержимое по-разному отображается в редакторе и на сайте?

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

Почему некоторые настройки доступны не на всех моих сайтах?

Если на сайте используется тарифный план WordPress.com Business, возможно, у вас есть плагины, позволяющие добавить в редактор пользовательские блоки. Этих блоков не будет на другом сайте, где такой плагин отсутствует.

Некоторые настройки блоков («wide» или «full-width») должны поддерживаться в вашей теме. Одинаковые блоки могут присутствовать на разных сайтах, но какие-то настройки, применяемые для них, могут немного отличаться в зависимости от используемой темы.

Смогу ли я использовать старый редактор?
Будут ли по-прежнему работать шорткоды?

Да. В редакторе есть блок «Шорткод», в котором можно использовать шорткоды, как и раньше. В дальнейшем многие шорткоды будут преобразованы в отдельные блоки.

Будет ли этот редактор доступен для всех?

Наша цель заключается в том, чтобы новый редактор WordPress был так же легко доступен для всех, как и предыдущие редакторы. И даже более того. Мы хотим, чтобы все могли им пользоваться. Согласно стандартам WordPress в отношении доступности использования кода весь новый или обновляемый код, применяемый на платформе WordPress, должен соответствовать рекомендациям по обеспечению доступности веб-контента (WCAG) 2.0 на уровне AA. Исключения не допускаются. Если возникнут проблемы доступности, свяжитесь с нами.

Нужно ли использовать какую-то специальную тему для нового редактора?

Нет. Новый редактор блоков будет работать со всеми темами. Но, возможно, не все темы будут поддерживать специальные функции разметки (например, содержимое с настройками «wide» и «full width»).

Где найти полный список комбинаций клавиш?

Полный список комбинаций клавиш приведён в справочнике по WordPress.

Где находятся опции подсчёта количества слов и проверки орфографии?

Чтобы увидеть количество слов на странице или в записи, нажмите значок информации в левой верхней части экрана в форме буквы i в круге. Эта опция доступна в версии для ПК, но недоступна в мобильной версии.

Инструменты проверки орфографии и грамматики отсутствуют, поскольку проверка орфографии по умолчанию предусмотрена во всех современных браузерах. Вы можете использовать её для исправления орфографических ошибок в записях.

Были ли эти инструкции полезны? Оставьте отзыв об этих инструкциях.