Редактор сайта

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

Редактор сайта доступен только после установки и активации на вашем сайте блочной темы.

Как открыть редактор сайта

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

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

Чтобы найти блочные темы, в панели управления WordPress перейдите в раздел Внешний вид > Темы и нажмите Добавить новую. На странице Добавить темы выберите Блочные темы, чтобы найти растущий список блочных тем в каталоге тем WordPress.

После установки и активации блочной темы на вашем сайте перейдите в раздел Внешний вид > Редактор , чтобы открыть редактор сайта.

Что можно делать в редакторе сайта

После открытия редактора сайта вы увидите пять пунктов меню.

• Навигация: позволяет просматривать меню и вносить в них основные изменения.
• Стили: предоставляет прямой доступ к редактированию вариантов стиля вашего сайта.
• Страницы: теперь вы можете редактировать содержимое страниц непосредственно в редакторе сайта.
• Шаблоны: просмотр различных стандартных макетов для разных разделов сайта, а также пользовательских страниц (результаты поиска, 404 и т. д.).
• Паттерны: здесь можно управлять синхронизированными паттернами и частями шаблонов.

Вы также увидите значок лупы. Нажмите его, чтобы открыть палитру команд.

Ниже представлен обзор различных разделов редактора сайта.

Рабочая область редактора сайта

Редактор сайта загружает главную страницу вашего сайта (в соответствии с настройками в разделе Настройки чтения) для начала редактирования.

Верхнее меню редактора сайта содержит следующие параметры:

1. Значок сайта (или значок W, если значок сайта не задан): вернуться в панель управления или перейти в другой раздел редактора сайта: Навигация, Стили, Страницы, Шаблоны или Паттерны. Если вы решите вернуться в панель управления, вам будет предложено сохранить изменения или покинуть редактор сайта без сохранения изменений.

2. Кнопка вставки блоков +: добавить в редактор сайта новый блок, паттерн блока, медиафайл или синхронизированный паттерн (если на сайте есть синхронизированные паттерны).

3. Инструменты: переключение между редактированием блока и выбором блока. Выберите инструмент Выбрать (или нажмите клавишу Escape на клавиатуре), чтобы выбрать отдельные блоки. После выбора блока нажмите клавишу Enter на клавиатуре, чтобы вернуться к редактированию.

4. Отменить: отменить последнее выполненное действие.
5. Повторить: повторить действие, отменённое с помощью кнопки Отменить.
6. Просмотр списка: просмотреть список всех блоков на странице и легко перемещаться между блоками страницы. Это удобно для просмотра структуры страницы, а также редактирования, перемещения и удаления блоков.
7. Палитра команд: нажмите здесь, чтобы быстро получить доступ ко всему содержимому сайта, шаблонам и паттернам, а также вызвать другие действия (настройки, создание новой страницы и т. д.).

8. Сохранить: сохранить изменения, внесённые в редакторе сайта.
   • При нажатии кнопки Сохранить появится список всех синхронизированных паттернов, меню навигации, шаблонов и частей шаблонов, в которых были внесены изменения.
   • Вы можете сохранить все элементы или только некоторые из них.
   • Обратите внимание, что некоторые изменения (например, изменения шаблонов шапки и подвала) применяются ко всем страницам сайта, использующим эти шаблоны, а не только к странице, над которой вы работали.

9. Настройки: показать или скрыть боковую панель настроек шаблона и блока.

10. Стили: просматривать доступные варианты стиля темы, настраивать типографику, цветовые палитры и макет всего сайта или изменять внешний вид определённых блоков для всего сайта.
11. Дополнительные параметры: нажмите значок с тремя вертикальными точками, чтобы открыть дополнительные настройки и инструменты.

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

Режим фокусировки: все блоки становятся серыми, кроме того, над которым вы работаете, чтобы вы могли сосредоточиться на одном блоке за раз.

Без отвлечений: при включении этого параметра все несущественные элементы интерфейса скрываются, обеспечивая более полное погружение в процесс редактирования.

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

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

Инструменты: здесь можно скачать тему с обновлёнными шаблонами и стилями (Экспорт), узнать о сочетаниях клавиш, открыть приветственный гид редактора сайта, скопировать все блоки или просмотреть дополнительные статьи поддержки.

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

Как использовать редактор сайта

Редактирование стилей сайта

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

• Перейдите в раздел Внешний вид > Редактор.
• Нажмите пункт меню «Стили» или значок рядом с боковой панелью настроек блока.

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

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

Подробнее о стилях читайте в этой статье поддержки: Обзор стилей.

Настройка макета сайта

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

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

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

Ознакомьтесь с полным списком блоков темы.

Пример – как настроить тему Twenty Twenty-Three с помощью редактора сайта

Тема Twenty Twenty-Three поддерживает редактор сайта и может быть настроена с его помощью. В качестве примера удалим отступ в верхней части главной страницы темы Twenty Twenty-Three. Для этого удалим нижний внутренний отступ части шаблона шапки и верхний внутренний отступ области содержимого.

Сначала удалите нижний внутренний отступ частей шаблона шапки.

1. На экране администрирования выберите Внешний вид > Редактор.
2. Выберите Паттерны > Части шаблонов > Шапка > Шапка и нажмите значок карандаша, чтобы отредактировать её.
3. Выберите блок Группа > Ряд. Используйте нижнюю навигацию по блокам.
4. В настройках блока нажмите «Стили».

5. Прокрутите вниз до раздела «Внутренние отступы» > «Снизу». Текущее значение — 2.
6. Установите значение 0.
7. Сохраните части шаблона.

Затем удалите верхний внутренний отступ области содержимого.

8. Вернитесь в редактор сайта.
9. Выберите «Шаблоны» > «Главная» и нажмите значок карандаша, чтобы отредактировать её.
10. Выберите верхний блок «Группа». Используйте нижнюю навигацию по блокам.
11. В настройках блока нажмите «Стили».

12. Прокрутите вниз до раздела «Внутренние отступы» > «Сверху». Текущее значение — 3.
13. Установите значение 0.
14. Сохраните шаблон.

Просмотр шаблонов и частей шаблонов

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

• Перейдите в раздел Внешний вид > Редактор, чтобы открыть редактор сайта. Вы перейдёте на экран, где можно выбрать просмотр шаблонов или частей шаблонов.
• Нажмите Шаблоны, чтобы просмотреть список доступных для сайта шаблонов.
• Нажмите Паттерны, чтобы просмотреть список частей шаблонов.

Управление шаблонами сайта

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

В разделе Внешний вид > Редактор отображается экран с боковой панелью, содержащей список шаблонов и паттернов, включая список частей шаблонов.

Подробнее о шаблонах читайте в этой статье поддержки: Редактор шаблонов.

Управление частями шаблонов

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

В разделе Внешний вид > Редактор нажмите пункт Паттерны. В разделе «Все части шаблонов» можно получить к ним доступ.

Подробнее о частях шаблонов читайте в этой статье поддержки: Часть шаблона.

Управление страницами

Начиная с версии 6.3, страницы можно просматривать, редактировать и создавать через редактор сайта в разделе “Страницы”.

Подробнее об управлении страницами через редактор сайта читайте в этой статье поддержки: Страницы редактора сайта

Как вернуться в панель управления

Чтобы вернуться в панель управления, нажмите значок WordPress (или значок сайта, если вы его установили), чтобы открыть левую навигацию редактора сайта. Выберите < , чтобы вернуться в панель управления WordPress. Перед выходом вам будет предложено сохранить изменения, внесённые в редакторе сайта.

Как экспортировать шаблоны и стили

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

• Откройте редактор сайта, перейдя в раздел Внешний вид > Редактор.
• Выберите значок с тремя вертикальными точками рядом с пунктом настроек Стили.
• В разделе Инструменты выберите Экспорт. Это запустит процесс экспорта, и вы получите загруженный zip-файл своей темы с включёнными шаблонами и частями шаблонов.

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

Следующие инструменты помогут при работе с редактором сайта.

Палитра команд

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

Вы можете открыть палитру команд в режиме просмотра сайта на боковой панели, нажав значок поиска. В режиме редактирования палитра команд находится в верхней панели заголовка. Также можно использовать сочетание клавиш Cmd+k на Mac или Ctrl+k в Windows.

Подробнее о палитре команд читайте в этой статье поддержки: Палитра команд редактора сайта.

Представление списка

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

Подробнее о представлении списка читайте в этой статье поддержки:  Представление списка.

Паттерны блоков

Паттерны блоков — это наборы заранее определённых блоков, которые можно вставлять в записи и страницы. Затем их можно дополнительно настроить. WordPress поставляется с набором стандартных паттернов блоков. Паттерны блоков также входят в состав блочных тем.

Подробнее о паттернах блоков читайте в этой статье поддержки: Паттерн блока.

Копирование и вставка стилей

В WordPress 6.2 была добавлена новая возможность копировать и вставлять стили блоков, что упрощает повторное использование созданных вами дизайнов. Найти её можно в меню с тремя точками любого блока; она предназначена для копирования и вставки между блоками одного типа:

Глобальное применение изменений стиля

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

Изменение размера предварительного просмотра редактора сайта

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

Ссылки на ресурсы

• Дополнительное руководство по использованию редактора сайта
• Простой дизайн сайта и редактирование всего сайта
• Введение в редактор сайта и редактор шаблонов