В WordPress 5.0 классический редактор контента был заменен совершенно новым блочным редактором, известным как Гутенберг. С тех пор несколько наших читателей попросили нас создать всеобъемлющее руководство по использованию блочного редактора Гутенберга в WordPress.
Редактор блоков WordPress – это совершенно новый и отличный способ создания контента в WordPress. В этом уроке мы покажем вам, как использовать новый редактор блоков WordPress, и освоите его для создания потрясающих постов и страниц блога.^
Прежде чем мы углубимся в новый редактор, давайте сначала сравним и поймем различия между блок-редактором Гутенберга и классическим редактором.
Вот как выглядел классический редактор в WordPress:^
Если вы обновитесь до WordPress 5.0, то вот так выглядит новый редактор блоков:^
Как видите, это два совершенно разных редактора для создания контента в WordPress.
Старый классический редактор представлял собой текстовый редактор с кнопками форматирования, очень похожими на Microsoft Word.
В новом редакторе используется совершенно другой подход, который называется «Блоки» (отсюда и название «Редактор блоков»).
Блоки – это элементы содержимого, которые вы добавляете на экран редактирования для создания макетов содержимого. Каждый элемент, который вы добавляете в свое сообщение или страницу, является блоком.
Вы можете добавить блоки для каждого абзаца, изображения, видео, галереи, аудио, списки и многое другое. Есть блоки для всех общих элементов контента, и другие могут быть добавлены плагинами WordPress.
Чем новый редактор блоков WordPress лучше классического редактора?
Новый редактор блоков WordPress предлагает простой способ добавления различных типов контента к вашим сообщениям и страницам.
Например, если раньше вы хотели добавить таблицу в свой контент, то вам нужен был отдельный плагин для таблиц.
С новым редактором вы можете просто добавить блок таблицы, выбрать столбцы и строки и начать добавлять содержимое.^
Вы можете перемещать элементы содержимого вверх и вниз, редактировать их как отдельные блоки и легко создавать мультимедийный контент.
Самое главное, новый редактор блоков WordPress прост в использовании и изучении.
Это дает огромное преимущество всем новичкам WordPress, которые только начинают свой первый блог или создают бизнес-сайт DIY.
При этом давайте посмотрим, как использовать новый редактор блоков WordPress в качестве профессионала для создания отличного контента.
Вот что мы рассмотрим в этом уроке Гутенберга:
Использование Гутенберга – новый редактор блоков WordPress
Создание нового сообщения в блоге или страницы
Как добавить блок в Гутенберге
Работа с блоками в новом редакторе
Сохранение и повторное использование блоков в Гутенберге
Настройки публикации и публикации в Гутенберге
Настройки плагина в новом редакторе
Добавление некоторых общих блоков в Гутенберге
Изучение некоторых новых блоков контента в Гутенберге
Бонусные советы по использованию Гутенберга как профессионала
Добавление большего количества блоков в редактор блоков Gutenberg
Часто задаваемые вопросы о Гутенберге
Готовы? Давайте погрузимся в.
Редактор блоков разработан, чтобы быть интуитивно понятным и гибким. Хотя он выглядит иначе, чем старый редактор WordPress, он по-прежнему выполняет все действия, которые вы могли выполнять в классическом редакторе.
Давайте начнем с рассмотрения основных вещей, которые вы делали в классическом редакторе, и как они выполняются в редакторе блоков.
Вы начнете создавать новый блог или пост, как обычно. Просто нажмите на Сообщения »Добавить новое меню в админке WordPress. Если вы создаете страницу, перейдите в меню «Страницы» «Добавить новое».^
Это запустит новый редактор блоков.
Первым блоком каждого поста или страницы является заголовок.
После этого вы можете использовать мышь для перемещения под заголовком или нажать клавишу табуляции на клавиатуре, чтобы перейти вниз и начать писать.^
По умолчанию следующим блоком является блок абзаца. Это позволяет пользователям начать писать прямо сейчас.
Однако, если вы хотите добавить что-то другое, вы можете нажать кнопку «Добавить новый блок» в верхнем левом углу редактора, под существующим блоком или в левой части блока.^
Нажатие на кнопку покажет меню добавления блоков с панелью поиска вверху и часто используемые блоки внизу.
Вы можете нажимать на вкладки для просмотра категорий блоков или вводить ключевое слово для быстрого поиска блока.^
Если вы не хотите использовать мышь для нажатия на кнопку, вы можете использовать сочетание клавиш, набрав / для поиска и добавления блока.^
Каждый блок имеет свою собственную панель инструментов, которая появляется в верхней части блока. Кнопки на панели инструментов будут меняться в зависимости от редактируемого вами блока.
Например, на этом снимке экрана мы работаем в блоке абзаца, который показывает основные кнопки форматирования, такие как: выравнивание текста, полужирный шрифт, курсив, вставка ссылки и зачеркивание.^
Помимо панели инструментов, у каждого блока также могут быть свои настройки блока, которые будут отображаться в правом столбце экрана редактирования.^
Вы можете перемещать блоки вверх и вниз простым перетаскиванием или нажимая кнопки вверх и вниз рядом с каждым блоком.^
Одна из лучших особенностей блоков заключается в том, что их можно сохранять и повторно использовать по отдельности. Это особенно полезно для блоггеров, которым часто нужно добавлять в свои статьи определенные фрагменты контента.
Просто нажмите на кнопку меню, расположенную в правом углу панели инструментов каждого блока. В меню выберите «Добавить в блоки многократного использования».^
Вам будет предложено указать имя для этого многоразового блока. Введите имя для вашего блока, а затем нажмите кнопку Сохранить.^
Редактор блоков теперь сохранит блок как повторно используемый блок.
Теперь, когда вы сохранили блок, давайте посмотрим, как добавить повторно используемый блок в другие записи и страницы WordPress на вашем сайте.
Просто отредактируйте сообщение или страницу, где вы хотите добавить повторно используемый блок. На экране редактирования сообщения нажмите кнопку «Добавить блок».
Вы найдете свой сохраненный блок на вкладке «Многоразовые». Вы также можете найти его, введя его имя в строке поиска.^
Вы можете навести на него курсор мыши, чтобы увидеть предварительный просмотр блока. Просто нажмите на блок, чтобы вставить его в свой пост или страницу.
Все блоки многократного использования хранятся в вашей базе данных WordPress, и вы можете управлять ими, нажав на ссылку «Управление всеми повторно используемыми блоками».^
Это приведет вас к странице менеджера блоков. Отсюда вы можете редактировать или удалять любые ваши блоки многократного использования. Вы также можете экспортировать повторно используемые блоки и использовать их на любом другом веб-сайте WordPress.^
Каждый пост WordPress содержит много метаданных. Это включает в себя такую информацию, как дата публикации, категории и теги, избранные изображения и многое другое.
Все эти параметры аккуратно размещены в правом столбце на экране редактора.^
Плагины WordPress могут использовать API-интерфейс редактора блоков, чтобы интегрировать свои собственные настройки на экране редактирования.
Некоторые популярные плагины уже доступны в виде блоков. Например, WPForms, лучший плагин для построения форм WordPress, позволяет добавлять формы в ваш контент с помощью блока виджетов.^
Вот как Yoast SEO позволяет редактировать настройки SEO в новом редакторе:^
WooCommerce также поставляется с блоками виджетов, которые вы можете легко добавить к любому из ваших постов и страниц WordPress.^
По сути, новый редактор может делать все, что делал классический редактор. Тем не менее, вы будете делать вещи быстрее и элегантнее, чем раньше.
1. Добавление изображения в новый редактор WordPress
В новом редакторе WordPress есть готовый блок изображений. Просто добавьте блок, а затем загрузите файл изображения или выберите его из медиатеки.^
Вы также можете перетаскивать изображения со своего компьютера, и редактор автоматически создаст для них блок изображения.
После добавления изображения вы сможете увидеть настройки блока, в которые можно добавить метаданные для изображения, такие как alt text, size и добавить ссылку на изображение.^
2. Добавление ссылки в новый блок Editor.
Редактор блоков поставляется с несколькими блоками, в которые вы можете добавлять текст. Наиболее часто используемым является блок абзаца, который поставляется с кнопкой вставки ссылки на панели инструментов.
Все другие часто используемые текстовые блоки также включают кнопку ссылки на панели инструментов.^
Вы также можете вставить ссылку с помощью сочетания клавиш, например Command + K для Mac и CTRL + K на компьютерах с Windows.
3. Добавление галереи изображений в Гутенберг
Блок галереи работает как блок изображения. Вы добавляете его, а затем загружаете или выбираете файлы изображений.^
4. Добавление шорткодов в посты WordPress с помощью Gutenberg
Все ваши шорткоды будут работать так же, как и в классическом редакторе. Вы можете просто добавить их в блок абзаца или использовать блок шорткода.^
Редактор Гутенберга обещает решить некоторые давние проблемы юзабилити в WordPress, введя несколько новых блоков.
Ниже приведены некоторые из фаворитов, которые, как мы полагаем, пользователи найдут очень полезными.
1. Добавление изображения рядом с текстом в WordPress
Используя старый редактор, многие из наших пользователей не смогли разместить изображение рядом с текстом. Вы можете сделать это сейчас с помощью блока Media & Text.^
Этот простой блок поставляется с двумя блоками, расположенными рядом, что позволяет легко добавить изображение и добавить текст рядом с ним.
2. Добавление кнопки в посты и страницы WordPress
Добавление кнопки к вашим сообщениям в блоге или страницам было еще одним раздражением в классическом редакторе. Вам либо пришлось использовать плагин, который создал шорткод для кнопки, либо вам пришлось переключиться в режим HTML и написать код.
Gutenberg поставляется с блоком кнопок, который позволяет быстро добавить кнопку к любому сообщению или странице.^
Вы можете добавить ссылку для своей кнопки, изменить цвета и выбрать один из трех стилей кнопки.
3. Добавление красивых изображений обложек в посты блога и целевые страницы
Еще одна интересная функция, которую вы, возможно, захотите попробовать – это блок «Обложка», который позволяет добавлять изображения обложек в ваши сообщения и страницы.
Изображение обложки – это более широкое изображение, часто используемое в качестве обложки для нового раздела на странице или начала истории. Они выглядят красиво и позволяют создавать привлекательные макеты контента.
Просто добавьте блок обложки и затем загрузите изображение, которое вы хотите использовать. Вы можете выбрать цвет наложения для обложки или сделать его фиксированным фоновым изображением, чтобы создать эффект параллакса, когда пользователи прокручивают страницу вниз.^
4. Создание таблиц внутри статей
У классического редактора не было кнопки для добавления таблиц в ваши посты WordPress. Вы должны были использовать плагин или создать таблицу для написания пользовательских CSS и HTML.
Новый редактор Gutenberg поставляется с блоком таблиц по умолчанию, который позволяет очень легко добавлять таблицы в ваши записи и страницы. Просто добавьте блок, а затем выберите количество столбцов и строк, которые вы хотите вставить.^
Теперь вы можете пойти дальше и начать добавлять данные в строки таблицы. Вы всегда можете добавить больше строк и столбцов, если это необходимо. Есть также два основных варианта стиля.
5. Создание мультиколоночного контента
Создание контента из нескольких столбцов было еще одной проблемой, которую классический редактор вообще не решал. Редактор блоков позволяет добавить блок «Столбцы», который в основном добавляет два столбца блоков абзаца.^
Этот блок столбцов довольно гибкий. Вы можете добавить до 6 столбцов в ряд и даже использовать другие блоки внутри каждого столбца.^
Глядя на новый редактор блоков, вы можете задаться вопросом, будете ли вы тратить больше времени на добавление и настройку блоков, чем на создание реального контента?
Что ж, новый редактор невероятно быстр, и даже очень простое использование в течение нескольких минут позволит вам мгновенно добавлять блоки, даже не задумываясь.
Довольно скоро вы поймете, насколько быстрее ваш рабочий процесс станет с этим новым подходом.
Для опытных пользователей, вот несколько бонусных советов, которые помогут вам работать еще быстрее с новым редактором WordPress.
1. Переместите панель инструментов блока вверх.
Как вы могли заметить на скриншотах, есть панель инструментов, которая появляется в верхней части каждого блока. Вы можете переместить эту панель инструментов в верхнюю часть редактора.
Просто нажмите на кнопку с тремя точками в верхнем правом углу экрана и выберите опцию Top Toolbar.^
2. Используйте сочетания клавиш
Gutenberg поставляется с несколькими удобными ярлыками, которые сделают ваш рабочий процесс еще лучше. Первый, который вы должны начать использовать сразу же, это /.
Просто введите /, а затем начните вводить текст, и он покажет вам соответствующие блоки, которые вы можете сразу добавить.
Для получения дополнительных сочетаний клавиш щелкните трехточечное меню в верхнем правом углу экрана и выберите «Сочетания клавиш».^
Это вызовет всплывающее окно со списком всех сочетаний клавиш, которые вы можете использовать. В списке будут разные ярлыки для пользователей Windows и Mac.
3. Перетащите медиа для автоматического создания медиа блоков
Гутенберг позволяет вам просто перетаскивать файлы в любое место на экране и автоматически создает блок для вас.
Вы можете удалить одно изображение или видео файл, и он создаст для вас блок. Вы также можете удалить несколько файлов изображений, чтобы создать блок галереи.^
4. Добавление YouTube, Twitter, Facebook, Vimeo и других вставок
Гутенберг вводит новые блоки для встраивания в редактор блоков. Существует блок для всех поддерживаемых типов встраивания, включая YouTube, Twitter, Facebook и другие.^
Однако вы можете просто скопировать и вставить URL-адрес для вставки в любой момент, и он автоматически создаст для вас блок.
Например, если вы добавили URL-адрес видео YouTube, он автоматически создаст блок вставки YouTube и отобразит видео.(это видео)
Новый редактор блоков в WordPress позволяет разработчикам создавать свои собственные блоки. Есть несколько отличных плагинов для WordPress, предлагающих наборы блоков для нового редактора.
Вот несколько из них:
Advanced Gutenberg поставляется с несколькими блоками для популярных элементов контента, таких как слайдер продуктов WooCommerce, отзывы, карты, счетчик, вкладки, аккордеоны и многое другое.
Это также дает вам расширенный контроль над тем, какие пользователи могут получать доступ к блокам в зависимости от их пользовательских ролей. Вы можете создавать профили пользователей и выбирать, какие блоки они могут добавить.
Stackable – Gutenberg Blocks – это коллекция красиво оформленных блоков Gutenberg, которые вы можете использовать на своем веб-сайте. Он включает в себя блоки для контейнера, сообщения, функциональную сетку, аккордеон, поле изображения, список значков, призыв к действию и многое другое.
Редакторские блоки – это еще одна аккуратная коллекция блоков Гутенберга, которую вы можете использовать. Он поставляется с полезными блоками, такими как профиль автора, изображение героя, таблица цен, бренды, функции и многое другое.
С тех пор, как Гутенберг стал новым редактором WordPress, у нас появилось много вопросов. Вот ответы на некоторые из наиболее часто задаваемых вопросов о Гутенберге.
1. Что происходит с моими старыми постами и страницами? Могу ли я их редактировать?
Ваши старые посты и страницы полностью защищены и не подвержены влиянию Гутенберга. Вы по-прежнему можете редактировать их, и Гутенберг автоматически откроет их в блоке, содержащем классический редактор.^
Вы можете редактировать их в старом редакторе или конвертировать старые статьи в блоки и использовать новый редактор блоков.
2. Могу ли я продолжать использовать старый редактор?
Да, вы все еще можете использовать старый редактор. Просто установите и активируйте плагин Classic Editor.
После активации он отключит редактор блоков, и вы сможете продолжить использовать классический редактор.
Обратите внимание, что классический редактор будет поддерживаться до 2022 года.
3. Что делать, если новый редактор не работает с плагином или темой, которую я использую?
Проект Гутенберга находился в разработке в течение длительного времени. Это дало авторам плагинов и тем достаточно времени, чтобы протестировать их код на совместимость.
Тем не менее, есть вероятность, что некоторые плагины и темы могут не работать с новым редактором. В этом случае вы можете установить классический плагин редактора, попросить разработчика добавить поддержку Гутенберга или просто найти альтернативный плагин или тему.
4. Как узнать больше советов и хитростей Гутенберга?
WPTec – лучшее место, чтобы узнать о новом редакторе блоков в WordPress. Мы являемся крупнейшим ресурсом WordPress в Интернете.
Мы будем публиковать новые статьи и обновлять наши старые ресурсы, чтобы помочь вам освоить новый редактор блоков.
Между тем, если у вас есть какие-либо вопросы, не стесняйтесь обращаться к нам, оставив комментарий или воспользовавшись контактной формой на нашем сайте.
Мы надеемся, что этот учебник Гутенберга помог вам узнать, как использовать новый редактор блоков WordPress. Вы также можете ознакомиться с нашим полным руководством по производительности WordPress для повышения скорости вашего сайта.
Если вам понравилась эта статья, пожалуйста, подпишитесь на наш канал YouTube для видеоуроков WordPress. Вы также можете найти нас в Twitter и Facebook.
Поскольку до крайнего срока соблюдения GDPR ЕС осталось всего 178 дней , многие владельцы сайтов…
Команда Gutenberg создаст станцию тестирования удобства использования в WordCamp US, где посетители смогут принять участие…
Сегодня компания 10up опубликовала предварительную версию своего плагина Distributor , нового решения для синдикации контента…
На этой неделе был выпущен Gutenberg 1.8 с несколькими заметными улучшениями, которые предоставят разработчикам плагинов…
На этой неделе был выпущен Gutenberg 15.5 с новыми функциями и улучшениями возможностей полнофункционального редактирования…
DesktopServer выпустил версию 3.8.4 своего программного обеспечения для локальной разработки. Эта версия включает в себя…