Полное руководство по редактору блоков WordPress

Если вы в настоящее время используете веб-сайт WordPress или планируете создать его, вы, вероятно, слышали о редакторе блоков. Этот мощный инструмент встроен в ядро ​​WordPress, что дает владельцам веб-сайтов и разработчикам возможность создавать весь свой сайт с нуля без необходимости использования кода.

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

Что такое редактор блоков?

Редактор блоков — это революционный редактор веб-сайтов, выпущенный как часть WordPress версии 5.0 и заменивший классический редактор. Он позволяет как новичкам, так и опытным пользователям создавать страницы, шаблоны и целые веб-сайты, перетаскивая элементы на место — код не требуется!

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

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

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

• Блоки . Отдельные элементы, которые можно добавлять к контенту. Например, изображения, абзацы, заголовки, видео, столбцы и многое другое.
• Шаблоны блоков . Группы предварительно выбранных блоков, которые можно использовать для создания целых разделов контента. Например, баннеры, дизайн сообщений, макеты столбцов и многое другое.
• Шаблоны . По сути, это фреймворки, которые определяют дизайн и макет определенных типов контента. Сообщения, продукты и страницы категорий — все это примеры контента, у которого есть собственные шаблоны.
• Части шаблона . Часть вашего сайта, которая отображается на большинстве или на всех ваших страницах. Например, заголовки, нижние колонтитулы и комментарии.
• Редактор сайта . Инструмент WordPress, который обеспечивает блокировку дополнительных областей вашего сайта, включая шаблоны и части шаблонов. Для использования редактора сайта у вас должна быть установлена ​​тема блока.

Плюсы и минусы редактора блоков

Как и все, редактор блоков имеет свои преимущества и недостатки. Давайте взглянем.

Плюсы редактора блоков

1. Это помогает вам быть быстрее и эффективнее

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

• Многоразовые блоки . Вы можете сохранить блок и использовать его снова и снова на своем веб-сайте. Затем, когда вы редактируете этот блок, он будет обновляться во всех экземплярах. Например, вы можете создать призыв к действию, который сможете вставлять на все свои целевые страницы по мере их создания. И если вам нужно изменить ссылку на кнопку, она будет обновлена ​​на всех страницах.
• Шаблоны блоков . Шаблоны блоков — это предопределенные группы блоков, которые доступны по умолчанию в WordPress или через сторонние плагины. Они позволяют быстро вставлять сразу целые разделы страниц, например заголовки и многоколоночные макеты. Вы можете просто добавить их на страницу, настроить цвета, и все готово!
• Сочетания клавиш . Это позволяет вам держать руки на клавиатуре все время, пока вы добавляете и редактируете контент на своем сайте. Навигация по различным блокам, сохранение изменений, вставка блоков, стиль текста и многое другое.
• Простое создание поста в блоге . Вы можете перетаскивать контент прямо в редактор блоков, и он автоматически преобразует его в соответствующие блоки. Это может сэкономить вам огромное количество времени! Например, если вы пишете сообщение в Документах Google, вы можете полностью вставить его в WordPress, и оно сохранит заголовки, изображения, ссылки и многое другое. Нет необходимости отдельно добавлять графику и другие элементы!
• Установите стили глобально . Установите цвета, шрифты, интервалы и другие характеристики дизайна, которые применяются к блокам на вашем сайте (при использовании блочной темы). Это избавляет вас от необходимости редактировать каждую страницу по отдельности и упрощает работу членов команды или клиентов, добавляющих контент на ваш сайт.

2. Это позволяет новичкам создавать сложные, красивые сайты без написания кода.

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

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

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

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

3. Это позволяет настоящую полную настройку сайта

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

• Заголовки
• Нижние колонтитулы
• Страницы результатов поиска
• Архивы (например, категории сообщений и продуктов)
• 404 страницы
• Шаблоны постов в блоге
• Шаблоны продуктов
• Разделы комментариев

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

4. Улучшает производительность сайта

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

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

5. Много интеграций со сторонними плагинами

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

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

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

6. Он постоянно совершенствуется

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

Будьте в курсе последних событий здесь.

Минусы редактора блоков

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

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

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

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

2. Может быть кривая обучения

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

К счастью, есть много отличных ресурсов, которые могут помочь, в том числе:

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

Как получить доступ и использовать редактор блоков

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

Интерфейс редактора блоков

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

Вот разбивка этих элементов:

• Вставка блоков : здесь вы будете выбирать и добавлять блоки. Вы можете просмотреть список доступных блоков и шаблонов, упорядоченных по типам блоков, и перетащить их прямо с этой панели. Откройте и закройте средство вставки блоков с помощью кнопки в левом верхнем углу.
• Блоки : на этой вкладке показаны все доступные блоки.
• Шаблоны : на этой вкладке отображаются все доступные шаблоны блоков.
• Панель поиска блока : используйте ее для поиска определенного блока или шаблона.
• Инструменты : эта кнопка обеспечивает различные взаимодействия для выбора, навигации и редактирования блоков.
• Отменить/Повторить : отменить действие, выполненное в редакторе блоков, или повторить то же самое действие.
• Подробности . Предоставляет информацию о странице или публикации, например, количество слов и символов, время чтения, количество абзацев, заголовков и блоков.
• Представление в виде списка : инструмент, помогающий перемещаться по блокам и содержимому. Просматривайте все блоки на странице, перемещайте их и быстро и легко переключайтесь между ними.
• Панель настроек : доступ к настройкам страницы/записи или каждого отдельного блока. Здесь вы будете вносить изменения в элементы дизайна, такие как интервалы, цвета и многое другое.
• Дополнительные параметры . Измените тип представления, переключитесь в редактор кода для редактирования в HTML и настройте другие аспекты работы с редактором блоков.
• Добавить новый блок: щелкните этот значок, чтобы добавить новый блок в зависимости от расположения значка на странице.

Использование блоков

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

В этом случае вы перейдете в «Сообщения» → «Добавить новый» на панели управления WordPress. Это автоматически откроет редактор блоков для нового поста. Начните с добавления заголовка вверху поста.

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

Начнем с добавления блока Paragraph. Вы можете либо найти его в средстве вставки блоков и перетащить его в область основного содержимого справа, либо просто начать печатать там, где написано «Введите /, чтобы выбрать блок».

Когда вы поместите курсор внутрь текста, над ним появится новое меню с параметрами стиля. Слева направо это:

• Абзац: щелкните здесь, чтобы преобразовать блок в блок другого типа. Например, вы можете преобразовать его в заголовок.
• Перетащите: переместите блок в любое место по отношению к другим блокам на странице.
• Переместить вверх/вниз: переместить блок вверх или вниз на одну позицию на странице.
• Выравнивание: выравнивание текста по левому краю, по центру или по правому краю.
• Жирный: выделяйте любой текст в абзаце жирным шрифтом.
• Курсив: выделить курсивом любой текст, выделенный в абзаце.
• Ссылка. Превратите любой выбранный вами текст в ссылку.
• Дополнительно: см. дополнительные параметры для выделения или зачеркивания текста, превращения числа в нижний индекс и т. д.
• Параметры: доступ к дополнительным возможностям, таким как повторное использование блока, его дублирование, блокировка и т. д.

Внесите необходимые изменения в текст абзаца. Затем выберите любое место внутри блока и щелкните значок в правом верхнем углу. Это откроет панель настроек.

В верхней части этой панели вы увидите вкладки для публикации и блокировки. А пока давайте сосредоточимся на вкладке «Блок». На этой панели отображаются параметры, относящиеся к выбранному вами блоку — в данном случае к блоку «Абзац».

В разделе «Цвет» вы можете установить цвет текста, фона и ссылок только для этого абзаца. Вы даже можете создать свой собственный градиент, если хотите. Например, вы можете выделить абзац из остальной части сообщения, используя темно-зеленый фон и белый текст.

В разделе «Типографика» вы можете установить параметры шрифта. Хотя размер отображается по умолчанию, вы можете щелкнуть три вертикальные точки, чтобы разблокировать дополнительные параметры, такие как семейство шрифтов и интервал между буквами. В этом примере мы решили изменить текст на шрифт с засечками и добавить больше пространства между строками текста (называемого высотой строки).

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

А в разделе «Дополнительно» вы можете добавить привязку HTML, чтобы вы могли ссылаться на раздел в другом месте сообщения или установить класс CSS для целей стилизации.

Теперь, когда наш блок абзацев выглядит так, как мы хотели, давайте добавим к нашему сообщению два столбца — один с изображением, а другой — со вторым абзацем. Добавьте блок столбцов на свою страницу, а затем выберите нужный макет столбца. На этот раз мы выберем 33/66, то есть разделение ⅓, ⅔.

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

В левом столбце щелкните значок + и выберите блок изображения.

Здесь вы можете загрузить изображение со своего устройства, выбрать существующее из медиатеки или вставить изображение из URL-адреса. Мы решили добавить фото торта "Черный лес" из Медиатеки. Когда вы нажмете на блок «Изображение», вы увидите новую панель настроек, как и в блоке «Абзац», но с немного другими параметрами. Например, вы сможете обрезать изображение, добавить текст поверх него, применить фильтр и многое другое.

Если щелкнуть значок в правом верхнем углу, вы увидите панель настроек для блока «Изображение». Там вы можете добавить замещающий текст, создать закругленные углы, изменить размер изображения, добавить границу и многое другое. Здесь мы скруглили углы изображения с радиусом 22 пикселя.

Затем мы добавили еще один блок «Абзац» справа, ⅔ столбца. Обратите внимание, что вы можете выбрать для редактирования либо каждый отдельный столбец, либо весь блок из двух столбцов. Когда оба столбца выбраны, они будут выделены синим цветом.

Это позволяет вам принимать решения для обоих столбцов одновременно, используя появившуюся панель инструментов. Здесь мы устанавливаем вертикальное выравнивание на «Выровнять по середине», чтобы текст и изображение были выровнены.

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

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

Если вы готовы, теперь вы можете нажать «Опубликовать» , чтобы опубликовать публикацию!

Использование шаблонов блоков

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

Вы собираетесь снова щелкнуть синий значок + в левом верхнем углу, чтобы открыть средство вставки блоков. Но на этот раз нажмите на вкладку Patterns . По умолчанию откроется список рекомендуемых шаблонов.

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

В этом случае давайте выберем «Галерея» и перетащим шаблон под названием «Смещенные изображения с описаниями» в наш пост. Это добавит аккуратное изображение к содержимому.

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

Начните с выбора одного из изображений. Затем нажмите «Заменить». Здесь вы можете выбрать между загрузкой изображения или выбором из медиатеки. После того, как вы добавили свое изображение, сделайте то же самое с другим заполнителем.

Затем щелкните один из блоков «Абзац» и замените текст своим собственным. Вы можете вносить изменения по своему усмотрению, как вы делали ранее с блоком «Абзац».

Вот и все! Теперь у вас есть красивый раздел страницы, на создание которого у вас ушло всего несколько минут.

Использование шаблонов и частей шаблона

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

Чтобы использовать Редактор сайта, на вашем сайте должна быть активна блочная тема. В панели управления WordPress перейдите в раздел «Внешний вид» → «Редактор». Это откроет редактор сайта. С левой стороны вы увидите боковую панель с параметрами для шаблонов и частей шаблона. Нажмите Шаблоны. Здесь вы увидите список всех шаблонов на вашем сайте, который зависит от конкретной темы, которую вы используете.

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

• Популярное изображение
• Заголовок поста
• Опубликовать контент
• Мета поста
• Комментарии

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

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

Добавим в наш шаблон шаблон блока «Простой призыв к действию».

Теперь мы просто настроим текст CTA так, чтобы он соответствовал нашим потребностям. Мы также обновим дизайн кнопки, что можно сделать, щелкнув блок «Кнопка», а затем значок шестеренки в правом верхнем углу. Там вы можете редактировать такие настройки, как цвет, типографика, отступы и многое другое. Вы можете изменить текст кнопки и ссылку, нажав непосредственно на текст кнопки и используя появившуюся панель инструментов.

Взгляните на изменения, которые мы сделали:

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

Теперь вернемся к редактору сайта и рассмотрим редактирование частей шаблона. Перейдите в «Внешний вид» → «Редактор» и выберите «Части шаблона».

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

Вы увидите заголовок и текущие блоки, которые там находятся. В этом случае есть блок «Заголовок сайта» и блок «Навигация».

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

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

Затем, используя панели настроек, с которыми вы уже знакомы, придайте ей желаемый стиль. Мы добавили текст-заполнитель и изменили цвет кнопки.

Вы также можете выбрать весь заголовок и настроить его стиль, используя панель «Настройки» справа, чтобы изменить цвет фона, типографику, отступы и многое другое. Представьте себе все способы применения этих методов на вашем сайте!

10 дополнительных советов, чтобы получить максимальную отдачу от редактора блоков

Теперь, когда вы знаете основы, давайте рассмотрим несколько советов, как максимально эффективно использовать редактор блоков.

1. Воспользуйтесь преимуществами сочетаний клавиш

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

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

• Показать или скрыть панель настроек: Ctrl + Shift + ,
• Перейдите к следующей части редактора: Ctrl + `
• Сохранить изменения: Ctrl + S
• Отменить изменение: Ctrl + Z
• Дублировать выделенный блок: Ctrl + Shift + D
• Вставить новый блок перед выделенным блоком: Ctrl + Alt + T
• Переместить выделенный блок вверх: Ctrl + Shift + Alt + T

Полный список сочетаний клавиш, в том числе для разных операционных систем, смотрите в документации WordPress.

2. Установите стили для вашего сайта и блоков

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

Чтобы получить доступ и установить варианты стиля, перейдите в «Внешний вид» → «Редактор» и щелкните значок «Стили» в правом верхнем углу.

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

Или, если вы вернетесь на панель «Стили», вы сможете установить типографику, цвета и параметры макета. Например, нажмите «Типографика», и вы увидите варианты текста, ссылок, заголовков и кнопок. Мы выбрали «Заголовки» и изменили шрифт, толщину шрифта и регистр букв.

Вернувшись на панель «Стили», вы также найдете параметр «Блоки» . Откройте его, и вы увидите список блоков на вашем сайте. В этом примере мы откроем блок Button. Доступные параметры будут немного отличаться в зависимости от выбранного вами блока, но для этого вы можете редактировать типографику, цвета и макет. Нажмите «Цвета» , и вы сможете установить цвета по умолчанию для кнопок на вашем сайте.

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

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

3. Создавайте многоразовые блоки

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

Давайте начнем с того, что добавим его на нашу страницу и стилизуем его.

Когда вы закончите, нажмите на блок, затем выберите три вертикальные точки на панели инструментов, которая появляется над блоком. Затем выберите «Создать многоразовый блок».

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

Если вы нажмете ссылку с надписью «Управление блоками многократного использования» , вы увидите полный список своих блоков многократного использования и сможете редактировать, добавлять или переименовывать их.

4. Используйте редактор кода

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

Теперь вы увидите весь контент на странице в формате HTML. Вы можете редактировать этот код и вносить изменения по своему усмотрению, а также переключаться между двумя редакторами.

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

5. Максимально используйте представление списка

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

Если вы видите стрелку слева от блока, вы можете щелкнуть и развернуть этот элемент, чтобы увидеть все блоки, вложенные под ним. Например, блок «Галерея» содержит три блока «Изображение».

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

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

Узнайте больше о мощном представлении списка.

6. Добавьте больше блоков и узоров в свою библиотеку

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

Первый способ — через вашу тему. Многие темы блоков включают в себя собственные шаблоны, шаблоны блоков и блоки, которые доступны вам после установки. Например, тема Wabi включает шаблоны для форм подписки, проектов и заголовков. И Брикси имеет десятки готовых к использованию шаблонов, которые позволяют быстро и легко создавать макеты.

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

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

• Ultimate Blocks: фильтры контента, обзоры, обратный отсчет, ползунки и многое другое.
• Otter Blocks: аккордеоны, вкладки, карты, ценовые разделы и многое другое.
• CoBlocks: часто задаваемые вопросы, события, медиа-карты, возможности обмена в социальных сетях и многое другое.
• Блоки Kadence: значки, информационные окна, оглавление, расширенные параметры строк и многое другое.

7. Легко добавляйте контент из Google Docs или с вашего компьютера

Если вы часто пишете контент в Google Docs или работаете с кем-то, кто это делает, редактор блоков значительно сэкономит вам время. Вместо того, чтобы копировать и вставлять каждый абзац, изображение, ссылку и т. д. по отдельности, вы можете просто вставить весь документ Google в редактор блоков. WordPress автоматически преобразует документ в правильные блоки.

Если вы не используете Google Docs, вы все равно можете легко добавлять контент, например мультимедиа, в редактор блоков. Просто перетащите изображение прямо с вашего компьютера в редактор, и WordPress преобразует его в блок изображения.

8. Настройте циклы запросов

Блок Query Loop — это специальный инструмент, который позволяет отображать списки сообщений на основе определенного набора атрибутов, который вы определяете. Например, вы можете отобразить сетку продуктов, сгруппированных по цене. Или вы можете перечислить компании по местоположению в бизнес-каталоге. Возможности довольно безграничны.

Все, что вам нужно сделать, это найти блок Query Loop в инструменте вставки блоков, а затем добавить его на свою страницу или в сообщение. Затем вы увидите две опции: Choose и Start Blank .

Хотя вы, безусловно, можете создать свой собственный цикл запросов с нуля, для этого примера мы выберем «Выбрать». We went with a simple list style feed, then clicked the gear icon in the top right to open the Query Loop block settings.

Toggle Inherit query from template to display further customization options. There, you can choose a post type to display (posts, products, etc.), set an order, and decide whether to include sticky posts. If you click the + next to Filters, you can add options for narrowing down the content display, such as categories, authors, and keywords. This allows you to create a truly custom list.

Read our full guide to the Query Loop Block.

9. Utilize the theme.json file

The theme.json file takes the concept of global styles that we discussed earlier one step further. If you're a developer, this gives you a huge level of control over blocks and user preferences. You can find this file inside your theme directory, which you'll want to access via file transfer protocol (FTP) or through your host's cPanel.

Here are a few ways you can use the theme.json file:

• Create a default color palette
• Configure custom font sizes
• Remove the option for custom colors in the block editor
• Enable or disable the controls and options that are available to users for blocks

As you can see, you can use this file to make it easier for users or clients to utilize their site within the boundaries of a brand or style. Instead of being overwhelmed by options, they can see just the controls that they need.

Learn more about the theme.json file and see code examples.

10. Lock blocks for consistency and protection

If you have multiple users on your site, you may want to lock certain blocks that you don't want edited or moved. Or, this may simply keep you from accidentally making changes yourself! Either way, this is a helpful, easy-to-use feature of the block editor.

All you have to do is select the block, then choose three vertical dots at the right of the toolbar that appears. In the new dropdown menu, select Lock.

A new menu will appear that allows you to either disable movement, prevent removal, or both. Configure these settings and click Apply.

When you save your page, this block will be locked!

The core list of blocks

We've talked a bit about how to add blocks to your library. But which blocks are available by default? Let's take a look.

Text blocks:

• Paragraph: Add standard, text-based paragraphs
• List: Create bulleted or numbered lists
• Heading: Separate your content with headings
• Table: Add a table with multiple columns and rows
• Quote: Highlight sections of text and add attribution
• Classic: Use the Classic Editor in block form
• Code: Include formatted code on your site
• Preformatted: Add text that's displayed exactly how you type it
• Pull quote: Emphasize text in a more styled way than the Quote block
• Verse: Write and style poetry on your site

Media blocks:

• Image: Include images in your content
• Gallery: Create beautiful galleries of images
• Audio: Embed audio files into your content
• Cover: Add content blocks on top of a visual background
• File: Link to downloadable files
• Media & Text: Place media beside a block of text
• Video: Embed a video into your content

Design blocks:

• Buttons: Add one or more calls to action in button form
• Columns: Create visual columns and insert blocks inside each one
• Group: Group blocks together and customize them as you see fit
• Row: Arrange blocks side by side
• Stack: Arrange blocks on top of one another
• More: Display a “read more” link on archive pages
• Page Break: Add pagination to pages or posts
• Separator: Add a line between two blocks for visual separation
• Spacer: Include blank space between blocks

Widgets blocks:

• Архивы: Отображение архива ваших сообщений по дате.
• Календарь: показывайте свои сообщения в формате календаря.
• Категории: Список сообщений по категориям
• Пользовательский HTML: вставьте HTML-код на свою страницу или в сообщение.
• Последние комментарии: Показать ваши последние комментарии от читателей
• Последние сообщения: Отображение ваших последних сообщений в блоге.
• Список страниц: список всех ваших опубликованных страниц.
• RSS: показывать контент из RSS-канала любого сайта по своему усмотрению.
• Поиск: добавьте функцию поиска в любом месте вашего сайта.
• Шорткод: добавьте шорткоды WordPress в свой контент.
• Социальные значки: ссылки на ваши профили в социальных сетях.
• Облако тегов: добавьте облако тегов на свой сайт

Тематические блоки:

• Навигация: отредактируйте меню навигации вашего сайта.
• Логотип сайта: добавьте свой логотип на свой сайт
• Название сайта: Отображает название вашего сайта
• Слоган сайта: Отобразите слоган вашего сайта
• Цикл запросов: показ сообщений на основе определенных параметров
• Список сообщений: отображение сообщений с использованием интегрированных шаблонов.
• Аватар: включить аватар пользователя
• Ссылка для навигации по сообщениям: отображение ссылок на следующие и предыдущие сообщения.
• Комментарии: Показать комментарии к записи
• Форма комментариев к сообщениям: отображение формы комментариев.
• Вход/выход: разрешить пользователям щелкнуть и либо войти, либо выйти.
• Описание термина: показать описание таксономии на ее архивной странице.
• Заголовок архива: Показать имя таксономии на странице архива.
• Заголовок результатов поиска: отображение заголовка над результатами поиска.
• Часть шаблона: добавьте части шаблона на свои страницы и сообщения.

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

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

Остались вопросы? Давайте ответим на некоторые распространенные ниже.

Бесплатен ли редактор блоков на WordPress?

Да! Поскольку редактор блоков включен в установку WordPress по умолчанию, а сам WordPress бесплатен, то и редактор блоков полностью бесплатен.

Поставляется ли WordPress с редактором блоков по умолчанию?

Да, все установки WordPress включают редактор блоков автоматически.

Использует ли редактор продуктов WooCommerce редактор блоков?

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

Есть ли в редакторе блоков HTML-редактор?

Да, в редакторе блоков есть HTML-редактор. Чтобы получить к нему доступ, просто откройте страницу или сообщение, которое вы редактируете, и нажмите на три вертикальные точки в правом верхнем углу. Затем выберите Редактор кода . Теперь вы увидите содержимое страницы в виде HTML-кода и сможете вносить соответствующие изменения.

Чем редактор блоков отличается от классического редактора TinyMCE?

До выпуска редактора блоков WordPress использовал редактор TinyMCE, также известный как классический редактор. Но редактор блоков был создан и спроектирован так, чтобы быть более мощным и простым в использовании, чем предыдущее решение.

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

Чем редактор блоков WordPress отличается от конструкторов страниц?

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

Некоторые компоновщики страниц привязаны к определенным темам, поэтому, если вы решите переключиться, вам придется перестраивать большую часть, если не весь, ваш контент. Это не относится к редактору блоков. Пока вы используете тему, которая поддерживает редактор блоков, ваш контент в основном останется прежним, если вы переключитесь.

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

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