Как пользоваться новым редактором Вордпресс

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

Общее мнение о редакторе Gutenberg

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

код старого редактора

Старый редактор

Код нового редактора

Новый редактор, пустые строки.

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

Николай Прокопьев

«Мне непривычно, честно) Загружал, пробовал. Много чего скрыто. Просто так с наскока не освоишь. Но зато к нему программисты визуального редактора Elementor уже разработали специальные блоки. Для лендингов, думаю, вообще шикарно. А по функционалу — надо ещё разбираться)) Пока до этого не дошел) Но чувствую, придется, потому что типа хотят сделать его по умолчанию.»

Еще одно мнение в группе, посвященной WordPress.

Отзыв

Эмоциональный отзыв в группе

Как использовать

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

Плагин Гутенберг

Плагин в админке

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

Открываем «новую запись». Вот как выглядит новый редактор. По центру находится поле редактора. Справа инструменты для настройки. На скриншоте помечены основные моменты.

  1. Настройки видимости. Они стандартны.
  2. Выбор рубрик. Теперь они находятся в выпадающем списке.
  3. Метки. Как и раньше можно выбрать имеющиеся или добавить новые.
  4. Изображение записи. Тут можно установить изображение, которое будет главным для вашей статьи.
  5. Отрывок. Это небольшой текст-превью. Выводится обычно в виде анонса.
  6. Обсуждение. Можно включить/выключить комментарии.
  7. Рабочее поле редактора Вордпресс.
  8. Панель инструментов. Ее разберем чуть позже.
Новый редактор

Внешний вид редактора

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

Блоки текста

Статья вставлена

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

цвета в вордпресс

Дополнительные настройки блока

Если не понравился цвет, можно нажать на «сброс». Фон и цвет шрифта вернется к исходному. Тут можно выбрать размер шрифта.

настройки блоков

Выбор цвета заливки и шрифта

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

Инструменты Гутенберг

Все возможные инструменты в блоке

Вот как выглядит блок в режиме «редактирование html».

Редактор блока html

Правка кода

При необходимости можно добавить любой блок. Достаточно кликнуть на +.

варианты блоков

Как добавить блок

Если кликнуть на выбор блоков (+) в верхнем левом углу редактора можно выбрать блоки в расширенном формате. Как это выглядит можно увидеть на скриншоте.

расширенные возможности Гутенберг

Выбор дополнительно блока

Для большего удобства имеется навигация по блокам. Правда, эта функция работает кривовато. Переход осуществляется только на заголовки.

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

Быстрый выбор фрагмента

Работа с изображениями и обложками

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

  • изображение;
  • галерея;
  • обложка.

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

Для начал выберем изображение, как это указано на скриншоте.

Работа с изображением

Выбор рисунка

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

  • загрузить файл с компьютера;
  • добавить из библиотеки;
  • вставить с сайта.

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

интерфейс блока картинки

Выбираем источник фото

Если изначально ошиблись при выборе блока, его можно легко преобразовать.

изменить блок

как поменять блок

Добавим картинку из библиотеки. Выбираем нужную картинку, кликаем по ней. Справа можно добавить подпись, описание и alt. После этого нажимаем «выбрать». Ничего сложного тут нет.

работа с изображением в Вордпресс

выбор фото

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

блок с изображением

Изменять размер можно перетягиванием

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

  1. Можно изменить alt, если вы ошиблись при первоначальном выборе.
  2. Выбираем размер изображения. Тут предлагается несколько стандартных размеров, отталкивающихся от исходного размера картинок.
  3. Возможно настроить ширину вручную. Я рекомендую делать этот параметр не более 590px, если сделать больше Гугл будет ругаться, считая страницу непригодной для мобильных устройств. Это такая особенность WordPress.
  4. Высота. Ее тоже можно настроить, но четких рекомендаций, кроме здравого смысла тут нет.
  5. Настройки ширины в зависимости от размеров экрана. Указываются в процентах к ширине экрана.
настройки размера изображений Гутенберг

Инструменты работы с картинками

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

обложка вордпресс

Выбор обложки статьи

Вот такое изображение появилось. Тут есть дополнительная возможность добавить текст прямо на картинку.

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

Редактируем обложку

Что я собственно и сделаю. Помимо самого текста можно добавить и ссылку.

изображение статьи

Надпись на обложке

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

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

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

настройки редактора

Выбор отображаемых инструментов

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

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

Статья на вордпресс

Готовая статья на сайте

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

А вы уже пробовали новый редактор? Какие впечатления?

2 thoughts on “Как пользоваться новым редактором Вордпресс

  1. Александр

    Очень интересно. А я с обновлениями ещё не знаком. Вордпресс уже довольно давно не обновлял. Нужно будет на днях выделить для этого время.

    Reply
    1. roman tarasov Post author

      А еще на всякий случай проверить версию PHP на сервере. С середины декабря, обновления безопасности для версий ниже 7,2 больше выпускаться не будут.

      Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *