Вы хотите создать собственный блок Гутенберга для своего сайта WordPress? После обновления WordPress 5.0 вам нужно использовать блоки для создания контента в новом редакторе блоков WordPress.
WordPress поставляется с несколькими полезными блоками, которые вы можете использовать при написании контента. Многие плагины WordPress также имеют свои собственные блоки, которые вы можете использовать.
Однако иногда вы можете захотеть создать свой собственный блок Гутенберга, чтобы сделать что-то конкретное.
Если вы ищете простое решение для создания пользовательских блоков Гутенберга для вашего сайта WordPress, то вы находитесь в правильном месте.
В этом пошаговом руководстве мы покажем вам простой способ создать собственный блок WordPress для Гутенберга.
^
Примечание. Эта статья предназначена для пользователей среднего уровня. Вы должны быть знакомы с HTML и CSS для создания пользовательских блоков Гутенберга.
Шаг 1: Начало работы
Первое, что вам нужно сделать, это установить и активировать плагин Block Lab.
Это плагин WordPress, который позволяет вам создавать пользовательские блоки из панели администратора без особых хлопот.
^
Чтобы установить плагин, вы можете следовать нашему руководству для начинающих о том, как установить плагин WordPress.
Как только плагин активирован, вы можете перейти к следующему шагу создания вашего первого пользовательского блока.
Шаг 2: Создайте новый блок
Для этого урока мы создадим блок «Отзывы».
Сначала зайдите в Block Lab »Add New на левой боковой панели вашей админ-панели.
На этой странице вам нужно дать название вашему блоку. Вы можете написать любое имя по вашему выбору в текстовом поле «Введите имя блока здесь».
^
Мы назовем наш пользовательский блок: Отзывы.
В правой части страницы вы найдете свойства блока. Здесь вы можете выбрать значок для вашего блока и выбрать категорию блока из выпадающего списка Категория.
Плагин будет автоматически заполнен в зависимости от названия вашего блока, поэтому вам не нужно его менять. Тем не менее, вы можете написать до 3 ключевых слов в текстовом поле Ключевые слова, чтобы ваш блок был легко найден.
^
Теперь давайте добавим несколько полей в наш блок. Вы можете добавлять различные типы полей, такие как текст, числа, электронная почта, URL, цвет, изображение, флажки, переключатели и многое другое.
Мы добавим 3 поля в наш пользовательский блок отзыва: поле изображения для изображения рецензента, текстовое поле для имени рецензента и поле textarea для текста отзыва.
Нажмите на кнопку + Добавить поле, чтобы вставить первое поле.
^
Это откроет некоторые варианты для поля. Давайте посмотрим на каждого из них.
Метка поля. Вы можете использовать любое имя по своему выбору для метки поля. Давайте назовем наше первое поле «Изображение рецензента».
Имя поля: имя поля будет сгенерировано автоматически на основе метки поля. Мы будем использовать это имя поля на следующем шаге, поэтому убедитесь, что оно уникально для каждого поля.
Тип поля: здесь вы можете выбрать тип поля. Мы хотим, чтобы нашим первым полем было изображение, поэтому мы выберем Изображение из выпадающего меню.
Расположение поля: вы можете решить, хотите ли вы добавить поле в редактор или инспектор.
Текст справки: Вы можете добавить текст для описания поля. Это не требуется, если вы создаете этот блок для личного использования.
Вы также можете получить некоторые дополнительные параметры в зависимости от типа выбранного поля. Например, если вы выберете текстовое поле, вы получите дополнительные параметры, такие как заполнитель текста и ограничение по количеству символов.
Вы можете нажать кнопку «Закрыть поле», как только вы закончите с полем изображения.
Следуя вышеописанному процессу, давайте добавим еще 2 поля для нашего блока отзывов, нажав кнопку + Добавить поле.
^
Если вы хотите изменить порядок полей, вы можете сделать это, перетаскивая их с помощью значка гамбургера с левой стороны каждой метки поля.
Чтобы редактировать или удалить конкретное поле, необходимо навести указатель мыши на метку поля, чтобы получить параметры редактирования и удаления.
Когда вы закончите, нажмите кнопку «Опубликовать», расположенную в правой части страницы, чтобы сохранить свой блок Гутенберга.
Шаг 3: Создайте шаблон блока
Хотя вы создали пользовательский блок WordPress на последнем шаге, он не будет работать, пока вы не создадите шаблон блока с именем block-testimonials.php и не загрузите его в папку текущей темы.
^
Файл шаблона блока расскажет плагину, как отображать поля блока внутри редактора. Плагин будет искать файл шаблона, а затем использовать его для отображения содержимого блока.
Если у вас нет этого файла, появится сообщение об ошибке «Файл шаблона block / block-testimonials.php not found».
Давайте создадим файл шаблона нашего блока.
Сначала создайте папку на рабочем столе и назовите ее «Блоки». Вы создадите файл шаблона блока внутри этой папки, а затем загрузите его в текущий каталог тем WordPress.
Чтобы создать файл шаблона, вы можете использовать простой текстовый редактор, такой как Блокнот.
Каждый раз, когда вы добавляете новое поле в свой пользовательский блок, вам нужно добавить следующий PHP-код в файл шаблона вашего блока:
^
Просто не забудьте заменить add-your-field-name-here на имя поля.
Например, наше первое поле называется reviewer-image, поэтому мы добавим следующую строку в файл шаблона:
^
Просто, не правда ли? Давайте сделаем то же самое для остальных наших полей:
^
Далее мы добавим некоторые HTML-теги в приведенный выше код для стилизации.
Например, вы можете обернуть изображение рецензента в тег img для отображения изображения. В противном случае WordPress будет отображать URL-адрес изображения, что не то, что вы хотите, верно?
Вы также можете добавить имена классов к своим HTML-тегам и обернуть свой код в контейнер div для стилизации содержимого вашего блока (что мы и сделаем на следующем шаге).
Итак, вот наш окончательный код для нашего блочного шаблона:
^
Наконец, назовите файл как block-testimonials.php и сохраните его в папке блоков.
Шаг 4: стиль вашего пользовательского блока
Хотите оформить свой собственный блок? Вы можете сделать это с помощью CSS.
Откройте простой текстовый редактор, например Блокнот, и добавьте следующий код:
^
После этого назовите файл как block-testimonials.css и сохраните его в папке блоков.
Шаг 5: Загрузить файл шаблона блока в папку тем
Теперь давайте загрузим папку блоков, содержащую наш пользовательский файл шаблона блока, в нашу папку тем WordPress.
Для этого вам необходимо подключиться к вашему сайту WordPress с помощью FTP-клиента. Для получения справки вы можете ознакомиться с нашим руководством о том, как загружать файлы на ваш сайт WordPress с помощью FTP.
После подключения перейдите в папку / wp-content / themes /. Отсюда вам нужно открыть вашу текущую папку темы.
^
Теперь загрузите папку блоков, содержащую файл шаблона блока и файл CSS, в каталог вашей темы.
После этого вы можете перейти к последнему шагу, чтобы проверить свой пользовательский блок.
Примечание: плагин Block Lab позволяет создавать тематические блоки. Если вы измените свою тему WordPress, то вам нужно скопировать папку блоков в каталог новой темы.
Шаг 6: Проверьте свой новый блок
Пришло время протестировать наш пользовательский блок отзывов. Вы можете сделать это, перейдя на Страницы »Добавить новую, чтобы создать новую страницу.
Затем нажмите на значок «Добавить блок (+)» и найдите блок «Отзывы». Как только вы найдете его, нажмите на него, чтобы добавить пользовательский блок в ваш редактор страниц.
^
Теперь вы можете добавить отзыв на эту страницу, используя свой пользовательский блок. Чтобы добавить больше отзывов, вы всегда можете вставить новые блоки отзывов.
Когда вы закончите, вы можете просмотреть или опубликовать страницу, чтобы проверить, работает ли она правильно или нет.
Это все! Вы успешно создали свой первый пользовательский блок WordPress для своего сайта.
Знаете ли вы, что вы можете сэкономить время с помощью многоразовых блоков в вашем редакторе? Ознакомьтесь с нашим руководством о том, как легко создавать повторно используемые блоки в редакторе блоков WordPress и использовать их на других сайтах.
Вы также можете ознакомиться с нашим руководством о том, как создать собственную тему WordPress без написания кода.
