TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

Редактор Gutenberg WordPress – обзор

18

WordPress – это первоклассная платформа для ведения блогов и публикаций для многих из нас. Но более серьезная проблема – это технические ноу-хау, необходимые для работы сайта WordPress. В противном случае вам нужно будет потратить много времени и денег на изменение основных вещей. Даже простая задача создания и публикации сообщения или страницы в WordPress не так проста, чтобы иметь разные макеты и столбцы. Это приводит к росту сотен компаний и веб-сайтов, предлагающих услуги конструкторов страниц. Хорошие примеры включают Visual Composer, SiteOrigin Page Builder, Beaver Page Builder и т.д. Эти конструкторы страниц стали популярными только по той причине, что WordPress по умолчанию имеет неуклюжий редактор.

Классический редактор сообщений WordPress

Классический редактор сообщений WordPress выглядит скучно и основан на простом тексте. Вы можете настроить очень минимальные вещи, например переключиться в режим «Текст» и добавить встроенный HTML / CSS. Невозможно добавить расположение столбцов или блоки. Например, если у вас есть текстовое поле, такое как предложение продукта или бесплатная загрузка электронной книги, вам необходимо вручную добавить одно и то же содержимое на все страницы. В противном случае вам может потребоваться изменить файлы PHP или написать собственный код, что не подходит для пользователей начального уровня.

Гутенберг – Путь в будущее

Если вы заметили, WordPress в версии 4.9.8 показывает уведомление для установки и тестирования редактора Gutenberg. На этом этапе вам нужно установить Gutenberg в качестве плагина для изменения редактора. Но вскоре, начиная с версии 5.0, в WordPress по умолчанию будет редактор Гутенберга. Если у вас есть проблемы с совместимостью или вы все еще хотите использовать старый редактор, вам необходимо установить плагин классического редактора, чтобы продолжить работу со старым редактором.

Поскольку макет редактора изменяется вместе с Gutenberg, все плагины и темы, которые используют метабоксы в редакторе сообщений / страниц, должны быть переработаны для работы с редактором Gutenberg. Такие плагины, как Yoast SEO, уже предлагают совместимую версию, и мы считаем, что все другие разработчики должны последовать их примеру, не оставив никаких других вариантов. Ниже показано всплывающее сообщение от WooCommerce для тестирования с редактором Gutenberg.

Редактор Gutenberg WordPress - обзор

Виджет WooCommerce Gutenberg

Что такое Гутенберг?

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

Использование Gutenberg может показаться длительным процессом для простых текстовых сообщений / страниц. Но для тех, кто хочет иметь разные макеты и многоразовые блоки на нескольких страницах, Gutenberg – простое решение.

Блоки Гутенберга

Вы можете добавить следующие блоки с помощью редактора Гутенберга:

Редактор Gutenberg WordPress - обзор

Блоки Гутенберга

  • Общие блоки – абзац, изображение, заголовок, галерея, список, цитата, аудио, изображение обложки, подзаголовок, видео.
  • Блоки форматирования – код, классический, настраиваемый HTML, предварительно отформатированный, цитата, таблица, стих.
  • Элементы макета – кнопка, столбцы, еще, разрыв страницы, разделитель, разделитель.
  • Виджеты – шорткод, архивы, категории, последние комментарии, последние сообщения.
  • Встраивание – встраивание практически из любой социальной сети, такой как Twitter, YouTube, Facebook, Instagram и т.д.
  • В разделе «Наиболее используемые блоки» перечислены наиболее часто используемые блоки для быстрого доступа.
  • Многоразовые блоки – как объяснялось выше, если вы хотите, чтобы один и тот же контент был частью многих страниц, сохраните его как повторно используемый блок.

Понимание макета редактора Гутенберга

Ниже показано, как будет выглядеть редактор Гутенберга, когда вы создадите сообщение.

Редактор Gutenberg WordPress - обзор

Редактор Гутенберга

  1. Первый элемент – это всегда заголовок вашего сообщения. Вы не можете удалить этот элемент.
  2. У вас есть область содержимого, где вы можете добавлять блоки.
  3. Нажмите кнопку + внутри редактора сообщений или в верхнем левом углу редактора, чтобы начать добавлять блоки.
  4. Переместите курсор влево от любого элемента, чтобы увидеть стрелки вверх и вниз. Щелкните стрелку, чтобы переместить весь элемент вверх или вниз.
  5. Наведите указатель мыши на правую часть элемента, чтобы увидеть кнопку с тремя точками, предлагающую дополнительные параметры. Щелкните по нему, чтобы отредактировать блок как HTML или просмотреть его снова визуально. Отсюда вы можете добавить блок в список многократного использования.
  6. Щелкните элемент блока, чтобы увидеть дополнительные встроенные параметры, такие как форматирование и выравнивание текстового содержимого.
  7. Верхняя панель содержит параметры высокого уровня, такие как – отменить, повторить, предварительный просмотр, опубликовать, сохранить черновик, показать или скрыть боковую панель, настройки для переключения визуального элемента и редактора кода и другие несколько параметров.
  8. Боковая панель состоит из двух разделов – один предназначен для уровня публикации как «Документ». Он имеет параметры для добавления избранного изображения, категории, тегов, формата сообщения, автора и т.д.
  9. Вкладка «Блок» содержит определенные параметры для выбранного элемента блока.

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

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

  • Добавьте заголовок в поле заголовка по умолчанию.
  • Щелкните, чтобы добавить собственный HTML и добавить контент.
  • Добавить элемент макета столбца добавить текст и цитату внутри двух столбцов.

Редактор Gutenberg WordPress - обзор

Добавление блоков и проверка статистики

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

Метабоксы

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

Дополнительные возможности

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

Улучшения

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

Резюме

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

Плюсы

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

Минусы

  • Теперь вам нужно дважды щелкнуть имя пользовательского интерфейса, что раньше делалось одним щелчком. Например, в классическом редакторе вы можете просто щелкнуть «Featured Image» и загрузить изображение. Теперь с Gutenberg вам сначала нужно щелкнуть раскрывающееся меню «Featured Image», а затем щелкнуть ссылку, чтобы загрузить изображение.
  • Мы не могли видеть «Параметры экрана» для настройки редактора. Похоже, вы должны взять то, что показано.
  • Новый редактор сделает все существующие руководства недействительными и потребует огромных усилий для документов от тысяч издателей и разработчиков.

Источник записи: www.webnots.com

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