Блоки WordPress: подробное руководство
Опубликовано: 2021-10-02Блоки WordPress являются основным компонентом системы редактирования WordPress для веб-сайтов методом перетаскивания Gutenberg.
Самый простой способ научиться использовать блоки - это практика, но понимание того, что такое блоки и что они могут для вас сделать, может сделать создание страниц более эффективным и даже увлекательным.
Независимо от того, являетесь ли вы новичком в создании сайтов WordPress или хотите развить некоторые продвинутые навыки, это руководство научит вас больше о том, что такое блоки, какие общие блоки используют люди, как их использовать, и другую информацию, которая может улучшить ваш сайт.
Узнать больше: Дизайн веб-сайтов на WordPress: как создать веб-сайт на WordPress с нуля
Что такое блоки WordPress?
Блоки WordPress - это незаметные элементы текста, мультимедиа или пользовательского кода, которые вы можете добавить в сообщение в блоге или на страницу веб-сайта с помощью системы редактирования WordPress Gutenberg.
Большинство людей сосредотачиваются на использовании его для блогов, но он хорошо работает для большинства других страниц на многих веб-сайтах.
Блоки WordPress существуют для упрощения создания сообщений и страниц, которые хорошо выглядят для читателей, за счет устранения необходимости кодировать каждый элемент вручную. Вместо этого вы можете перетащить и переставить каждый блок, чтобы настроить внешний вид своей страницы.
Каждый блок функционально является автономным элементом на странице, поэтому изменение одного блока не повлияет на другие.
Это не единственная блочная система редактирования на рынке. Некоторые конкурирующие сервисы, такие как Ghost, также имеют надежные редакторы, которые можно использовать для создания веб-сайтов.
Однако Ghost - это в основном платформа для ведения блогов, и ее редактор ориентирован на это, в то время как редактор WordPress также полезен для создания страниц, не относящихся к блогам, на вашем веб-сайте.
Эти блоки также отличаются от Drupal, другой системы управления контентом.
Drupal фокусируется на блоках, которые могут появляться в нескольких частях веб-сайта, тогда как WordPress фокусируется на отдельных частях одной страницы.
Вы можете достаточно легко дублировать контент, но сами блоки не связаны и не все изменятся при редактировании одного.
Подробнее: Дизайн целевой страницы: 10 вдохновляющих целевых страниц с высокой конверсией
История Гутенберга
Гутенберг - текущий редактор WordPress.
Первоначально запущенная в 2018 году, с тех пор она превратилась в более зрелую систему, способную обеспечивать быстрое и эффективное редактирование веб-страниц и сообщений в блогах.
Это все еще не сделано, потому что разработчики хотят использовать его для полного редактирования сайта, но сейчас он имеет значительно больше функций, чем при запуске.
Gutenberg существует потому, что многие пользователи WordPress хотели иметь более чистый и простой способ ведения блога без редактирования кода, чтобы все выглядело хорошо.
Здесь важно понимать, что WordPress привлекает множество случайных пользователей, многие из которых плохо разбираются в программировании.
Это резкое отличие от первых лет Интернета, когда у вас даже не было бы веб-сайта, если бы вы не обладали относительно продвинутыми знаниями в области программирования для того времени. Другими словами, WordPress хочет поддержать рынок казуальных игр, где процессы щелчка и перетаскивания имеют больше смысла.
Второстепенным фактором для Гутенберга является то, как и где люди ведут блог.
Некоторые владельцы веб-сайтов используют системы преобразования текста в речь вместо того, чтобы писать текст вручную, в то время как система редактирования с перетаскиванием упрощает создание веб-сайтов на смартфонах, планшетах и других устройствах.
Однако некоторые люди по-прежнему предпочитают старую систему редактирования. Это неудивительно, потому что он по-прежнему предлагает гораздо больше контроля и поддержки для пользователей, способных управлять его кодом.
Гутенберг - мощный редактор , но по необходимости он ограничивает некоторые возможности пользователей. Нет ничего более гибкого, чем чистое кодирование, но Gutenberg быстрее и проще для большинства нужд.
Подробнее: Оптимизация коэффициента конверсии: полное руководство
Переключение между классическим редактором и редактором блоков
WordPress знает, что гибкость обычно лучше, чем принуждение всех использовать одну систему, и поэтому вы можете переключаться между его классической и блочной системами редактирования.
В большинстве случаев, чтобы переключаться между режимами редактирования, вам необходимо быть администратором сайта.
Однако после того, как вы вошли в систему с правильной учетной записью, вы можете изменить редактор на каждой странице, когда вы его изменяете, нажав кнопку в верхней части экрана.
Это все, что нужно знать большинству пользователей, но вы можете настроить дополнительные параметры.
Многие плагины WordPress позволяют создавать страницы с интерфейсом перетаскивания, например Gutenberg, но вы можете это предпочесть. Обычно они предлагают варианты редактирования, которых нет у Гутенберга.
Плагины, такие как Divi Builder, SeedProd и популярный, простой в использовании Elementor, предлагают системы редактирования, выходящие за рамки тех блоков, которые предоставляет Гутенберг.
Эти плагины обычно содержат инструменты изменения размера, компоненты, состоящие из нескольких частей, и расширенные шаблоны, которые еще больше сокращают процесс создания страниц.
Внешние плагины полезны для страниц, не относящихся к блогам, где Гутенберг часто немного отстает. Он может обрабатывать многие из этих страниц, но пока не с такой гибкостью, как другие системы.
Подробнее: Карта пути клиента: передовой опыт + готовые шаблоны
Как отключить Гутенберга
Можете ли вы отключить Гутенберг для определенных пользователей? Можно ли полностью отключить?
Ответ на оба вопроса - да. Есть несколько способов отключить Gutenberg, если вы не хотите использовать его на своем сайте.
Отключите Gutenberg, установив плагин
Первый метод, и для большинства пользователей лучший, - использовать плагин Classic Editor. Это официальный плагин от команды WordPress, на сайтах которого установлены буквально миллионы активных установок.
Классический редактор позволяет вам установить редактор по умолчанию для каждого пользователя, позволяет пользователям выбирать редактор и имеет несколько дополнительных функций, упрощающих работу.
Технически это не столько выводит из строя Гутенберга, сколько скрывает его, но практический результат тот же. Или, в другом смысле, установка Classic Editor является разумной, потому что она позволяет вам использовать любой редактор, который вы хотите, и это просто лучше, чем постоянно работать с одним редактором.
Альтернатива от сообщества использует плагин Disable Gutenberg, который не так популярен, как Classic Editor, но не требует официальной поддержки.
Это простой и практичный способ полностью отключить Gutenberg или отключить его для определенных страниц, типов сообщений, ролей или тем на сайте.
Чтобы установить любой плагин, выполните следующие действия:
- Войдите в свой интерфейс WordPress.
- Слева выберите "Плагины"
- На развернутом экране "Плагины" выберите "Новый".
- В поле поиска вверху введите название нужного плагина.
- Выберите нужный плагин из результатов и нажмите кнопку «Установить сейчас».
- По завершении нажмите «Активировать плагин».
Отключите Гутенберг, отредактировав functions.php
Наконец, вы можете изменить файл functions.php на своем сайте, чтобы отключить его напрямую.
Однако это может привести к поломке вашего сайта, если вы сделаете это неправильно, поэтому мы не рекомендуем это для случайных пользователей. Установить один из перечисленных выше плагинов проще и легко обратимо.
Если вы хотите отключить Gutenberg без плагина и вы новичок в коде WordPress, вы можете выполнить следующие действия. Этот метод отключает его для всех пользователей.
- Войдите в свой интерфейс WordPress (вы должны быть администратором)
- Найдите "Внешний вид" на левой боковой панели и наведите на него курсор.
- Выберите "Редактор тем".
- В списке файлов справа выберите functions.php.
- Сделайте копию файла functions.php перед тем, как сделать резервную копию, чтобы вы могли восстановить его, если что-то пойдет не так.
- Когда появится редактор, скопируйте в точности следующее и вставьте в файл: add_filter ('use_block_editor_for_post', '__return_false');
- Нажмите кнопку "Обновить файл" ниже.
Подробнее: объяснение тепловой карты + Как создать тепловую карту для веб-сайта
Распространенные типы блоков WordPress
Вот наиболее распространенные типы блоков, доступные в базовом редакторе WordPress.
До Гутенберга большинство людей кодировали эти блоки напрямую или с помощью инструментов форматирования текста и изображений в редакторе форматированного текста и при необходимости изменяли код для корректировки макета на странице.
Параграф
Это блок, который большинство людей используют больше, чем любой другой. Как следует из названия, он ориентирован на письменный контент.
Текстовый редактор преобразует каждый абзац в блок, чтобы вы могли перемещать и переставлять их после написания.
Изображение
Блоки встраивания изображений содержат отдельные изображения, которые можно перемещать по странице.
Они поставляются с различными вариантами выравнивания, включая изменение размера изображения или даже его полную ширину, сверх обычного предела из темы.
Вместе блоков абзацев и изображений достаточно, чтобы создать базовую веб-страницу, поэтому все остальное в конечном итоге просто необходимо для повторения и улучшения этих элементов, следуя основным принципам визуальной иерархии.
Заголовки
Блоки заголовков содержат негабаритный текст, чтобы разделить страницу на разделы и облегчить пользователям поиск контента. Редактор позволяет при необходимости настраивать размеры заголовков, форматирование, гиперссылки и другие элементы.
WordPress поддерживает до 6 уровней заголовков, включая h1 для заголовка страницы, но большинство людей редко выходят за пределы h4.
Галерея
Блок галереи - это расширенная версия базового блока изображений, позволяющая добавлять несколько изображений в заранее заданный макет.
Текущий редактор поддерживает максимум восемь столбцов для изображений, а также изменение размера, связывание и другие параметры форматирования для страницы.
Список
Блоки списков создают нумерованные или маркированные списки.
По сути, это просто применение блока абзаца, но разделение списков на отдельные компоненты позволяет избежать случайного изменения форматирования.
Цитировать
Блоки цитат - это специально отформатированные блоки абзацев, которые помогают выделить что-то особенно важное.
Большинство людей используют их для цитаты конкретного человека, но вы также можете использовать их для комментариев или иного выделения важной информации.
Аудио
Аудиоблоки относительно редки на веб-сайтах, но WordPress по-прежнему их поддерживает.
Они позволяют добавлять любые имеющиеся у вас аудиофайлы, включая такие функции, как автоматическое воспроизведение звука или его зацикливание.
Помните, что большинству пользователей не нравится звук, который воспроизводится автоматически, если они не хотят, чтобы это произошло, поэтому старайтесь не удивлять посетителей неожиданными шумами.
Обложка
Блоки обложек - это более продвинутый элемент форматирования. Этот блок позволяет вам выбрать изображение или видео, а иногда и текст, которые вы можете наложить на свою страницу.
Эти средства массовой информации могут плавать на заднем плане, повторяться или иным образом мгновенно привлекать внимание.
WordPress поддерживает отсутствие прозрачности наложения или полную прозрачность, но рекомендует умеренное количество, чтобы текст был легко читаем.
Файл
Блоки файлов позволяют вам предоставлять прямые ссылки на файлы на вашем веб-сайте, чтобы посетители могли их загружать.
Вы можете загрузить на свой сайт практически любой файл, но у вашего хостинг-провайдера могут возникнуть вопросы, если вы попытаетесь загрузить что-то слишком большое или получите слишком много загрузок для вашего плана.
Это хороший пример взаимосвязанности веб-разработки.
Вы, вероятно, не столкнетесь с ограничениями, если позволите людям загружать только базовые текстовые файлы, но поговорите с хостом вашего веб-сайта перед добавлением любых других файлов. Они могут рассказать вам, что разрешено в вашем плане, или при необходимости предложить альтернативы.
видео
Видеоблоки позволяют добавлять мультимедийный контент на свой сайт, загружая его напрямую или связывая контент на другом сайте.
Видео файлы, как правило, очень большие, поэтому вам обычно нужен хороший план хостинга, если вы хотите, чтобы файлы были на вашем сайте.
Внешний хостинг, например через YouTube, и использование встроенного YouTube, значительно проще. Гутенберг автоматически преобразует некоторые ссылки на видео в блоки другого типа, если это необходимо.
Как использовать блоки WordPress
Есть несколько способов добавить блок в редакторе Гутенберга. Вы можете добавить их прямо из верхней панели значков или нажав кнопку вставки.
Эта кнопка выглядит как кружок со знаком плюса и позволяет щелкнуть по типу блока, который нужно добавить.
Когда блоки окажутся на странице, вы можете перемещать их вверх и вниз, щелкая стрелки в левой части блока. Кроме того, вы можете щелкнуть сетку из шести точек и, удерживая кнопку мыши, перетащить блок в нужное место.
Чтобы отредактировать блоки, просто нажмите на их место. Это автоматически откроет информацию о блоке и позволит вам настроить компоненты по мере необходимости.
Вы можете использовать те же функции для изменения типа блока. Стрелки на панели управления можно использовать для раскрытия или закрытия разделов редактора, а кнопка X позволяет закрыть редактор блоков и сосредоточиться на других вещах.
Разница между блоками и виджетами WordPress
Блоки - это в первую очередь контент веб-страницы, включая текст и мультимедийные данные, такие как изображения и аудио. Итак, что такое виджет WordPress и чем он отличается от блока?
Виджеты WordPress, напротив, представляют собой контент, который вы можете поместить в специальные области, такие как боковые панели и нижние колонтитулы. Редактор Гутенберга в основном избегает этих областей, хотя вы можете включать вещи, похожие на виджеты, в свой основной контент, добавляя блоки кода.
Интерфейс блока обычно находится в правой части экрана, когда редактор страницы открыт. Редактор виджетов доступен в области « Внешний вид»> «Настройщик» и в меню администратора.
Виджеты обычно появляются на каждой странице веб-сайта, поэтому вы не можете редактировать их из того же места, где вы можете редактировать блоки.
Создание многоразовых шаблонов блоков WordPress
WordPress позволяет создавать шаблоны блоков многократного использования.
Это полезно для того, чтобы на вашем сайте был единый брендинг и дизайн, не создавая каждый раз точный макет. Это особенно полезно, если вы используете такое программное обеспечение, как Vectornator или Adobe Illustrator, для создания сложной векторной графики и макетов.
Создать сам шаблон просто. Все, что вам нужно сделать, это выбрать блок, щелкнуть три точки на появившейся панели инструментов, затем щелкнуть «Добавить в повторно используемые блоки».
Оттуда вы можете переименовать его во что-нибудь легко запоминающееся и вернуться к работе на странице.
Шаблоны блоков упрощают такие вещи, как логотипы, пользовательские кнопки, созданные в программном обеспечении для графического дизайна, элементы дизайна и все, что используется в брендинге веб-сайта.
Шаблон позволит легко добавить элемент в любом месте, где вы хотите, без необходимости переделывать определенный элемент брендинга или макет каждый раз, когда вы хотите его использовать.
Заключительные мысли о блоках WordPress
Хотя блоки WordPress не идеальны для всех, они являются мощной отправной точкой для создания страниц и организации контента в интуитивно понятном и удобном для пользователя виде.
Однако простого чтения о блоках недостаточно, чтобы освоить их использование.
Вместо этого перейдите на свой сайт WordPress и начните экспериментировать на одной странице. Получив некоторую практическую практику, вы сможете освоить их использование и начать создавать расширенные макеты на своем сайте.
Как и езда на велосипеде, блоки WordPress трудно забыть, когда вы их изучите, и они могут помочь вам создать практически любой стандартный дизайн страницы.