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

Пошаговое руководство по построителю Gutenberg для WordPress

2 490

Думаю, вы согласитесь, когда я скажу: вся эта история с Гутенбергом сбивает с толку.

Во-первых, сложно ли использовать новый редактор блоков или что? Я имею в виду, вы не знаете, куда делись все ваши любимые инструменты. Теперь, наверное, вам понадобилось больше времени, чтобы создать сообщение, не так ли?

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

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

Что ж, не волнуйся больше; Не так давно я был в вашем точном положении, но теперь я нахожу Гутенберга трепетом. Да, есть кривая обучения, но к концу сегодняшнего поста вы будете думать о Гутенберге по-другому.

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


Пошаговое руководство по построителю Gutenberg для WordPress

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

Если вы используете WordPress 5.0 и выше, вы, должно быть, встречали новый блестящий редактор WordPress, известный как Gutenberg.

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

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

Итак, вы быстро вернулись к классическому редактору, который, кстати, нас устраивает. Просто имейте в виду, что WordPress не будет поддерживать классический редактор после 2022 года. Кроме того, вы упускаете все дополнительные полезности, которые предлагает Гутенберг.

Что касается функциональности, Classic Editor и Gutenberg делают то же самое; вы знаете, оба инструмента помогают создавать контент без программирования.

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

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

Gutenberg – новый редактор WordPress по умолчанию. Это не похоже на традиционный визуальный / текстовый редактор; Гутенберг использует блоки контента так же, как и многие современные конструкторы страниц.

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

А с парой надстроек Gutenberg может выгодно конкурировать с признанными разработчиками страниц WordPress, такими как Brizy, Elementor и Divi.

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

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

Вы готовы? Если да, давайте создадим этот пост WordPress.

Как создать сообщение WordPress с помощью Гутенберга

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

Чтобы не мешать, перейдите в «Сообщения»> «Добавить новый», как показано на скриншоте ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Это приведет вас прямо к редактору Гутенберга, показанному ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Довольно аккуратно, да? А теперь давайте засучим рукава и приступим к делу.

Добавление заголовка


Пошаговое руководство по построителю Gutenberg для WordPress

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

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

Нужно отредактировать постоянную ссылку? Вы можете легко сделать это в блоке заголовка, нажав кнопку «Изменить», как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

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

Добавление нового абзаца


Пошаговое руководство по построителю Gutenberg для WordPress

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

Пошаговое руководство по построителю Gutenberg для WordPress

Ноты. Вы можете:

  1. Преобразуйте новый блок абзаца в любой другой блок, например изображение, заголовок, обложку, галерею, WooCommerce, форму и т.д.
  2. Используйте ярлык, чтобы превратить блок абзаца в блок изображения
  3. Измените блок абзаца на блок заголовка, т. Е. H2, H3 и H4.
  4. Преобразуйте блок абзаца в блок изображения обложки

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

Пошаговое руководство по построителю Gutenberg для WordPress

Благодаря панели инструментов форматирования вы можете:

  • Превратите абзац в стих, цитату, заголовок, список, код и предварительно отформатированный текст
  • Жирный, Курсив ,~зачеркивание~и подчеркивать содержимое
  • Выровнять текст по левому, правому краю, по центру и по ширине
  • Добавьте ссылку, которая также может открываться в новой вкладке
  • Вставьте встроенное изображение (да, оно существует!)
  • Скрыть настройки блока
  • Дублируйте блок
  • Вставьте блок до или после текущего блока (в нашем случае это первый абзац, поэтому мы не добавляем ничего раньше, а только после). Вы можете добавить блок изображения обложки перед первым абзацем, если хотите, потому что он выглядит так хорошо
  • Отредактируйте блок как HTML
  • Добавьте текущий блок в повторно используемые блоки, чтобы вы могли использовать его в других сообщениях
  • Удалить блок полностью

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

Пошаговое руководство по построителю Gutenberg для WordPress

Несколько примечаний к изображению выше:

  1. Выберите здесь вкладку Блок, чтобы просмотреть все параметры и настройки блокировки.
  2. Выберите размер шрифта и активируйте буквицу здесь
  3. Добавьте цвет фона к вашему абзацу. Я установил синий цвет для иллюстрации. Вы также можете настроить цвет текста. В обоих случаях вы можете добавлять неограниченное количество пользовательских цветов.
  4. Здесь вы можете добавить собственный класс CSS, что означает, что вы можете добавить дополнительные стили CSS в свой блок.
  5. Синий фон и буквица уже применены в редакторе Гутенберга.

Вкладка Документ на боковой панели

В боковом меню есть еще одна вкладка; документа вкладка, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Вот примечания к изображению выше:

  1. Щелкните здесь, чтобы переключиться на вкладку Документ
  2. Здесь вы можете запланировать публикацию, установить видимость частной или общедоступной, установить для публикации статус «Ожидает проверки», выбрать формат публикации и создать прикрепленную публикацию.
  3. Раздел позволяет редактировать вашу постоянную ссылку
  4. Здесь вы можете выбрать или создать новые категории
  5. Добавьте теги к своему сообщению
  6. Установить избранное изображение
  7. Создать выдержку из руководства
  8. Разрешить комментарии, пингбеки и трекбэки

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

После первого абзаца снова нажмите клавишу ENTER, чтобы создать новую строку (или блок абзаца). Теперь давайте добавим изображение под первым абзацем.

Добавление изображений в Гутенберге


Пошаговое руководство по построителю Gutenberg для WordPress

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

Когда вы нажали клавишу ENTER несколько минут назад, вы запустили новый блок абзаца. Поскольку Гутенберг интуитивно понятен, вы можете добавить изображение, щелкнув значок плюса (+), изображения или обложки, как мы выделяем на изображении ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Пара замечаний:

  1. Вы можете добавить изображение с помощью значков плюса (+)
  2. Здесь вы можете легко добавить изображение
  3. Эта опция позволяет вам добавить изображение обложки (они обычно больше, чем другие фотографии. Кроме того, вы можете добавить текст на изображения обложки, кстати)

Продолжайте и щелкните любой из значков плюса (+). Затем щелкните вкладку Изображение, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Щелчок по вкладке Image загружает блок изображения, показанный на скриншоте ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Блок изображения позволяет загружать изображение или добавлять его из URL-адреса или библиотеки мультимедиа. В процессе вы можете добавить замещающий текст (важный для SEO), заголовок и описание с помощью настроек экрана мультимедиа или боковой панели блокировки, как показано на следующих изображениях.

Обычные настройки мультимедиа…

Пошаговое руководство по построителю Gutenberg для WordPress

… И настройки блока изображения.

Пошаговое руководство по построителю Gutenberg для WordPress

Вы здесь чему-то учитесь? Я надеюсь, что это так. Давайте двигаться дальше.

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

Как добавить загружаемые файлы, например PDF, изображения, видео и т.д.

Gutenberg позволяет невероятно просто добавлять загружаемые файлы в вашу запись или страницу WordPress.

В новом блоке абзаца щелкните значок плюса (+), перейдите к разделу «Общие блоки» и нажмите вкладку «Файл », как мы выделяем ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

При этом запускается следующий блок:

Пошаговое руководство по построителю Gutenberg для WordPress

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

Пошаговое руководство по построителю Gutenberg для WordPress

Вы можете поиграть с опциями. Например, вы можете отредактировать / удалить заголовок «Контрольный список Free Gutenberg PDF », а также кнопку «Загрузить». Вы можете добавить в блок класс CSS и стилизовать его по своему желанию.

Добавление цитаты в Гутенберге

Затем давайте добавим цитату, потому что они очаровательны, запоминаются и помогут вам понять суть. В новой строке щелкните знак плюса (+), перейдите к Common Blocks и перейдите на вкладку Quote, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Это добавляет ЦЕНУ блок в вашем посте, как мы выделим в Screengrab ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Обратите внимание на настройки блока цитат на правой боковой панели выше?

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

Пошаговое руководство по построителю Gutenberg для WordPress

Выглядит невероятно, правда?

Добавление медиа-встраиваний в Gutenberg

Gutenberg поставляется с несколькими блоками для встраивания видео и других медиафайлов с 30+ сайтов, таких как YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare и так далее.

Чтобы встроить контент, щелкните значок плюса (+), перейдите к «Встраивать» и выберите сайт. Например, я хотел YouTube, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Затем скопируйте и вставьте URL-адрес видео YouTube и нажмите кнопку «Вставить», как показано на изображении ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

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

Пошаговое руководство по построителю Gutenberg для WordPress

Плавное плавание на всем пути. Теперь давайте добавим отдельную кнопку, которая идеально подходит для создания призыва к действию (CTA).

Как добавить кнопку в Gutenberg

На этом этапе вам не составит труда добавить блоки. Просто нажмите на плюс (+) и выберите свой блок. Нет ничего проще.

Итак, как нам добавить кнопку?

В новой строке (или блоке) щелкните значок плюса (+), перейдите к элементам макета и щелкните вкладку «Кнопка », как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Это приведет вас к блоку кнопок, как описано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

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

Вот что я получил после пары кликов.

Пошаговое руководство по построителю Gutenberg для WordPress

Кстати, если вы используете трудночитаемые цветовые комбинации на своих кнопках, Гутенберг незамедлительно сообщит вам об этом. Как мило?

Как добавить столбцы в Гутенберге

С красивой кнопкой на месте добавим несколько столбцов. Я добавлю две колонки, поэтому внимательно следите за ними.

Вот что надо делать. Щелкните значок плюса (+), перейдите к элементам макета и щелкните вкладку «Столбцы », как показано на изображении ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

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

Пошаговое руководство по построителю Gutenberg для WordPress

Что меня понимает:

Пошаговое руководство по построителю Gutenberg для WordPress

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

Есть ли блок для этого? Да, есть!

Как добавить изображение рядом с текстом в Gutenberg

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

Как обычно, щелкните значок плюса (+), перейдите к элементам макета и щелкните «Медиа и текст», как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Вы должны увидеть блок Media & Text, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Затем загрузите свое изображение / видео / медиа или добавьте его из медиатеки. После этого добавьте текст рядом с носителем, как показано на изображении ниже.

Я поигрался с блоком Media & Text и пришел к следующему. Имейте в виду; Мне тоже удалось зажать там кнопку ?

Пошаговое руководство по построителю Gutenberg для WordPress

О, это же бэкэнд! Позвольте мне показать вам интерфейс. Вот:

Пошаговое руководство по построителю Gutenberg для WordPress

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

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

Разработчики WordPress стремятся сделать темы и плагины совместимыми с редактором Gutenberg. Несколько примеров включают WooCommerce, Jetpack и Yoast SEO.

Например, вы можете добавить блоки WooCommerce в свой пост WordPress. Во-первых, вы должны установить и активировать WooCommerce.

Затем в новой строке щелкните значок плюса (+), перейдите к WooCommerce и выберите нужный блок, как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

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

Другие примечательные блоки

У нас уже более 2000 слов, и если мы будем продолжать в том же духе, мы напишем целую электронную книгу. Я молюсь, чтобы теперь вы могли использовать Гутенберг без каких-либо сбоев.

В общем, вот список других доступных блоков.

  • Виджеты – вы можете добавлять контент из своих виджетов в сообщения блога.
  • Шорткоды – вы все еще можете использовать собственные шорткоды WordPress.
  • Классический – отличный блок, в котором хранится ваш старый контент
  • Подробнее – блок ранее назывался тегом Подробнее
  • Разрыв страницы, разделители, разделители
  • Пользовательский HTML, цитата, таблица
  • Галерея и аудио / видео HTML5
  • И многое другое в зависимости от тем и плагинов, которые вы используете

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

Быстрые хаки Гутенберга и сочетания клавиш

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

Вы даже можете выбрать конкретный блок, набрав заголовок блока после обратной косой черты (/), например, набрав «/ image», этот блок изображения появится среди других блоков, связанных с изображением. См. Изображение ниже для получения более подробной информации.

Пошаговое руководство по построителю Gutenberg для WordPress

Сочетания клавиш: чтобы просмотреть все доступные сочетания клавиш, нажмите SHIFT + ALT + H в Windows и OPT + CTRL + H в Mac.

В верхней части документа вы можете увидеть структуру документа, щелкнув значок (i), как показано ниже.

Пошаговое руководство по построителю Gutenberg для WordPress

Ницца. Чрезвычайно гладко.

Да, кстати, ошибка «Ошибка обновления» обычно возникает из-за нестабильного интернет-соединения ?


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

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

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

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

Источник записи: https://www.wpexplorer.com

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