Я думаю, вы согласитесь, когда скажете: весь этот бизнес Гутенберга сбивает с толку.
Во-первых, сложно ли использовать новый редактор блоков или как? Я имею в виду, вы не знаете, куда делись все ваши любимые инструменты. Теперь, возможно, вам понадобилось больше времени, чтобы создать сообщение, верно?
Возможно, добавление ссылки (партнерской или другой) вызвало у него большую кривизну, и он был разочарован. Возможно, у вас возникли проблемы с добавлением изображения рядом с вашим текстом.
Возможно, вы попытались добавить несколько столбцов, и все не работает должным образом. Если это не так, вы, возможно, не сможете легко добавить свои PDF-файлы или увидеть страшное сообщение «Ошибка обновления».
Ну, не волнуйся больше; Это было в его точном положении не так давно, но теперь я нахожу Гутенберга интересным для использования. Да, кривая обучения есть, но в конце сегодняшнего поста вы будете думать о Гутенберге иначе.
Что такое редактор Гутенберга?
Вы просматриваете Gutenberg, редактор блоков WordPress по умолчанию.
Если вы используете WordPress 5.0 и выше, вы наверняка сталкивались с великолепным новым редактором WordPress, известным как Gutenberg.
Как и многие другие пользователи, вы хотите использовать революционный редактор, но сомневаетесь, сложен ли Гутенберг.
Или, может быть, когда вы встретили Гутенберга, некоторые вещи не сработали. Ведь разработчики сделали и продолжают делать темы и плагины совместимыми с редактором блоков.
Итак, вы быстро вернулись к классическому редактору, что, кстати, нас устраивает. Просто помните, что WordPress не будет поддерживать Classic Editor после 2022 года. Кроме того, вы упускаете все дополнительные привилегии, которые предлагает Гутенберг.
С точки зрения функциональности Classic Editor и Gutenberg делают то же самое; Знаете, оба инструмента помогают создавать контент без кодирования.
Тем не менее, мы настолько привыкли к старому редактору WYSIWYG, что считаем странным адаптировать его к новому пользовательскому интерфейсу Гутенберга, если не совсем запутать. По крайней мере, я так думаю.
Но что именно Гутенберг?
Гутенберг – новый редактор WordPress по умолчанию. Это отличается от традиционного визуального / текстового редактора; Гутенберг использует блоки контента точно так же, как многие современные конструкторы страниц.
Он поставляется с более интуитивными функциями, чем классический редактор, что означает, что вы можете создавать мультимедийный контент на ходу. Теперь вы можете быстро создавать необычные макеты, если вы работаете с постами или страницами WordPress.
А с помощью нескольких плагинов Gutenberg может выгодно конкурировать с такими известными конструкторами страниц WordPress, как Brizy, Elementor и Divi.
Единственным недостатком является то, что разработчики страниц часто предлагают больше возможностей, потому что они в первую очередь построители страниц! В то же время Гутенберг еще очень молод, и он может только надеяться, что редактор блоков будет расти как на дрожжах.
В сегодняшнем посте мы с удовольствием создадим пост WordPress с редактором Гутенберга. Моя цель – раскрыть все мелочи и особенности, чтобы вы могли использовать Гутенберга для создания контента, такого как профессионалы.
Вы готовы Если так, давайте создадим этот пост WordPress.
Как создать пост WordPress с Гутенбергом
Если вы пользуетесь сайтом WordPress, вы, вероятно, создаете больше постов, чем страниц. В следующем разделе мы создали пост WordPress о Гутенберге с нуля. Надеюсь, тебе будет так же весело, как и мне, когда я попробовал Гутенберга.
Пусть это из пути, перейдите к Публикации> Добавить новый как мы выделяем на скриншоте ниже.
Это приведет вас прямо к редактору Гутенберга, показанному ниже.
Довольно аккуратно, а? Теперь, давайте засучим эти рукава и начнем работать.
Добавить заголовок
Вы не можете написать сообщение без твердого заголовка. Хорошо, что Гутенберг невероятно легко добавляет заголовок.
Первый блок, который вы видите, это название в верхней части документа, как показано на рисунке выше. Чтобы создать заголовок для вашего сообщения, введите внутри блока. Просто как A, B, C.
Нужно изменить постоянную ссылку? Вы можете легко сделать это в название заблокировать, нажав на редактировать кнопка, как показано ниже.
После добавления названия нажмите ENTER ключ, чтобы начать новую строку. О да, Гутенберг сохраняет родную навигацию, которую вы любили в классическом редакторе WordPress.
Добавить новый абзац
Хит ENTER ключ создает новый пункт блок, как показано выше. Прежде чем писать какой-либо текст, блок предлагает вам несколько вариантов. Смотрите пронумерованное изображение ниже для более подробной информации.
Примечания Вы можете:
- Преобразуйте новый блок абзаца в любой другой блок, например, изображение, заголовок, обложку, галерею, WooCommerce, форму и т. Д.
- Используйте ярлык, чтобы изменить блок абзаца в блок изображения
- Измените блок абзаца на блок заголовка, то есть H2, H3 и H4
- Превратить блок абзаца в блок изображения обложки
Для наглядности я оставлю за собой первый абзац для последующего введения. После добавления текста появляется панель инструментов форматирования, как показано ниже.
Благодаря панели инструментов форматирования вы можете:
- Преобразовать абзац в стих, цитату, заголовок, список, код и предварительно отформатированный текст
- жирный шрифт, Курсив, зачеркнутый и подчеркнутый контент
- Выровняйте текст влево, вправо, по центру и выровняйте
- Добавить ссылку, которая также может быть открыта в новой вкладке
- Вставьте изображение онлайн (да, оно существует!)
- Скрыть настройки блока
- Дублировать блок
- Вставьте блок до или после текущего блока (в нашем случае это первый абзац, поэтому мы ничего не добавляем до, только после). Если вы хотите, вы можете добавить блок изображения обложки перед первым абзацем, потому что это звучит хорошо
- Редактировать блок как HTML
- Добавьте текущий блок в блоки многократного использования, чтобы вы могли использовать его в других сообщениях
- Удалить блок полностью
Вы можете дополнительно настроить блок абзаца с помощью параметров, доступных в замок вкладка находится в боковом меню, как показано ниже.
Некоторые примечания на изображении выше:
- Выберите замок вкладка здесь, чтобы увидеть все параметры и настройки блокировки
- Выберите размер шрифта и активируйте Drop Cap здесь
- Добавьте цвет фона к вашему абзацу. Для иллюстрации я установил синий цвет. Вы также можете настроить цвет текста. В обоих случаях вы можете добавить неограниченное количество пользовательских цветов
- Вы можете добавить собственный класс CSS здесь, что означает, что вы можете добавить дополнительные стили CSS в свой блок
- Синий фон и Drop Cap уже применены в редакторе Гутенберга
Вкладка документа на боковой панели
В боковом меню есть еще одна вкладка; документ вкладка, как показано ниже.
Вот примечания к изображению выше:
- Нажмите здесь, чтобы переключиться на документ язык
- Здесь вы можете запланировать пост, установить видимость для частный или общественности, создает публикацию в Ожидание отзыва статус, выберите формат поста и создайте фиксированный пост
- Раздел позволяет редактировать вашу постоянную ссылку
- Вы можете выбрать или создать новые категории здесь
- Добавить теги к вашему сообщению
- Установить рекомендуемое изображение
- Создать ручную выписку
- Разрешить комментарии, пингбэки и трекбеки
Как вы можете видеть, у вас есть много вариантов для создания блока абзаца (и всего сообщения) так, как вы хотите. Кстати, разные блоки поставляются с разными настройками, как мы узнаем через минуту.
После первого абзаца нажмите ENTER снова нажмите клавишу, чтобы создать новую строку (или блок абзаца). Теперь давайте добавим изображение ниже первого абзаца.
Добавить изображения в Гутенберг
Они говорят, что изображение говорит больше, чем тысяча слов, а запись в блоге без изображений, ну, в общем, тусклая. Чтобы добавить изображение в ваш пост WordPress с помощью Gutenberg, у вас есть несколько вариантов.
Когда вы нажмете ENTER ключ несколько минут назад, активировал новый блок абзаца. Так как Гутенберг интуитивно понятен, вы можете добавить изображение, щелкнув по значку плюса (+), изображения или обложки, как мы выделяем на изображении ниже.
Пара заметок:
- Вы можете добавить изображение с помощью значков плюс (+)
- Здесь вы можете легко добавить изображение
- Эта опция позволяет вам добавить прикрыть изображения (они, как правило, больше, чем другие фотографии. Кроме того, вы можете добавить текст на изображениях обложки, кстати)
Идите вперед и нажмите на любой из значков плюс (+). Затем нажмите картина вкладка, как показано ниже.
Нажав на картина вкладка загружает картина Блок показан на скриншоте ниже.
картина Блок позволяет загрузить изображение или добавить его из URL-адреса или библиотеки мультимедиа. В процессе вы можете добавить альтернативный текст (важный для SEO), подписи и описание через настройки экрана мультимедиа или замок боковой панели, как показано на следующих изображениях.
Обычные настройки медиа …
… и картина Блокировка настроек.
Ты сегодня что-то изучаешь? Я надеюсь на это. Пойдем
После добавления своего изображения Гутенберг добавляет новый блок абзаца чуть ниже него. Вы можете добавить все, что хотите, но для иллюстрации я добавил текст, а затем кнопку под ним.
Как добавить загружаемые файлы, стр. PDF, изображения, видео и т. Д.
Gutenberg позволяет невероятно легко добавлять загружаемые файлы к вашей записи или странице WordPress.
В новом пункт блок, нажмите значок плюса (+), перейдите к Общие блоки и ударил архив Вкладка, как мы выделяем ниже.
Это запускает следующий блок:
Из архив Блок, вы можете загрузить новый файл или добавить его из вашей медиа-библиотеки. После добавления своего файла Гутенберг добавляет милый скачать Кнопка автоматически, как показано на рисунке ниже.
Вы можете играть с опциями. Например, вы можете редактировать / удалятьGutenberg Бесплатный PDF Контрольный список"Название, а также скачать кнопка. Вы можете добавить класс CSS в блок и стилизовать его так, как вам нравится.
Добавить цитату по Гутенбергу
Далее, давайте добавим цитату, потому что они милые, броские, и они помогают вам понять суть. На новой строке щелкните знак плюса (+), перейдите к Общие блоки и ударил котировка вкладка, как показано ниже.
Это добавляет котировка заблокируйте свой пост, как мы выделяем на скриншоте ниже.
Обратите внимание на настройку блока цитаты в правой боковой панели выше?
Чтобы добавить свой бюджет, напишите внутри блока. Вот мой результат.
Это выглядит потрясающе, верно?
Добавление медиа вкладок в Гутенберге
Гутенберг поставляется с различными блоками для вставки видео и других медиа с более чем 30 сайтов, таких как YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare и т. Д.
Чтобы вставить контент, нажмите значок плюса (+), перейдите к встроенные, и выберите сайт. Например, я хотел YouTube, как показано ниже.
Затем скопируйте и вставьте URL-адрес видео YouTube и нажмите встраивать Кнопка, как показано на рисунке ниже.
Как только я доберусь до встраивать Кнопка Гутенберг автоматически преобразует ссылку в видео, как показано ниже.
Плавная навигация до конца. Теперь давайте добавим отдельную кнопку, которая идеально подходит для создания призыва к действию (CTA).
Как добавить кнопку в Гутенберге
У вас не должно быть проблем с добавлением блоков в это время. Просто нажмите знак плюс (+) и выберите свой блок. Это не может быть проще, чем это.
Так как же добавить кнопку?
В новой строке (или блоке) щелкните значок плюс (+), перейдите к Элементы дизайна и нажмите кнопка вкладка, как показано ниже.
Это приведет вас к кнопка блок, как описано ниже.
Как вы можете видеть на изображении выше, вы можете отредактировать текст кнопки и добавить ссылку. Кроме того, вы можете настроить кнопку через боковое меню в правой части экрана.
После пары кликов вот что я получил.
Кстати, если вы используете трудно читаемые сочетания цветов на кнопках, Гутенберг немедленно уведомит вас, Как мило?
Как добавить столбцы в Гутенберге
С красивой кнопкой на месте, давайте добавим несколько столбцов. Я добавлю две колонки, так что будьте осторожны.
Это то, что вы должны сделать. Нажмите на значок плюс (+), перейдите к Элементы дизайна и нажмите столбцы Вкладка, как видно на рисунке ниже.
Гутенберг добавляет две колонки по умолчанию. Посмотрите на изображение ниже и помните, что я уже добавил контент в столбцы.
Что меня ловит:
Неплохо за несколько секунд работы. Но вы можете не захотеть создавать столбцы. Вы можете отобразить изображение рядом с текстом.
Есть ли блок для этого? Да, есть!
Как добавить изображение рядом с текстом в Гутенберге
Вы хотите добавить изображение рядом с текстом? Если это так, вам понравится следующий раздел.
Как обычно, нажмите на значок плюс (+), перейдите к Элементы дизайна и нажмите СМИ и текст Как показано ниже.
Вы должны увидеть СМИ и текст блок, как показано ниже.
Затем загрузите ваше изображение / видео / мультимедиа или добавьте его из библиотеки мультимедиа. После этого добавьте свой текст рядом с носителем, как показано на рисунке ниже.
Я играл с ним СМИ и текст блок, и мне пришло в голову следующее. Позаботься, мне тоже удалось нажать кнопку 🙂
О, это конец! Позвольте мне показать вам передний конец. здесь:
Это выглядит очень профессионально, верно? Вы, конечно, можете себе представить, сколько вы можете достичь с помощью редактора Гутенберга.
Сторонние блоки Гутенберга
Разработчики WordPress заинтересованы в том, чтобы темы и плагины были совместимы с редактором Гутенберга. Некоторые примеры включают WooCommerce, Jetpack и Yoast SEO.
Например, вы можете добавить блоки WooCommerce в свой пост WordPress. Прежде всего, вам необходимо установить и активировать WooCommerce.
Затем в новой строке щелкните значок плюса (+), перейдите к WooCommerce и выберите блок, который вы хотите, как показано ниже.
Вы знаете, что это значит? Это означает, что вы можете создавать мультимедиа и отличные посты и страницы за считанные минуты.
Другие известные блоки
У нас уже есть более 2000 слов, и если мы продолжим в том же духе, мы закончим писать полную электронную книгу. Я молюсь, чтобы вы теперь могли использовать Гутенберга без каких-либо проблем.
Вне списка вот список других доступных блоков.
- Виджеты – Вы можете добавлять контент из ваших виджетов в сообщения в блоге
- шорткоды – Вы все еще можете использовать собственные шорткоды WordPress
- классический – Большой блок, содержащий ваш предыдущий контент
- более – Блок ранее был известен как Читать дальше тег
- Разрыв страницы, разделители, проставки
- Пользовательский HTML, Pullquote, Таблица
- галерея и HTML5 аудио / видео
- И многое другое в зависимости от тем и аксессуаров, которые вы используете
в сторону: Создание страницы WordPress похоже на создание сохраненного поста с разницей в несколько минут, поэтому сегодня мы не будем углубляться в это.
Быстрые взломы Гутенберга и сочетания клавиш
Gutenberg поставляется с парой трюков и сочетаний клавиш, которые делают его еще проще. Например, если вы введете «/» внутри блока абзаца, появится список блоков.
Вы даже можете выбрать конкретный блок, введя заголовок блока после обратной косой черты (/), например, набрав "/ image", вы увидите блок изображения среди других связанных с изображением блоков. Смотрите изображение ниже для более подробной информации.
Сочетания клавиш: Чтобы увидеть все доступные ярлыки, нажмите SHIFT + ALT + H на Windows и OPT + CTRL + H на Mac
В верхней части документа вы можете увидеть структуру документа, щелкнув значок (i), как показано ниже.
Ницца. Необычайно гладко
Да, и, кстати, ошибка «Ошибка обновления» обычно возникает из-за нестабильного подключения к Интернету 🙂
Между нами, Гутенберг – фантастический редактор контента. Пока вы готовы изучать веревки; Вы можете многое пожинать от редактора WordPress будущего.
Гутенберг все еще относительно молод, и может ожидать его роста с точки зрения удобства использования и функциональности. Это будет серьезная сила, с которой придется считаться в ближайшие дни. Создатели страниц должны быть осторожны, иначе они закончатся business
Мы надеемся, что наше пошаговое руководство от редактора Гутенберга помогло вам понять ситуацию. Мы считаем, что теперь вы можете использовать редактор блоков для создания контента, как профессионал.
Поделитесь своими проблемами, мыслями и вопросами в разделе комментариев ниже.
