Как создать собственный блок WordPress (простой способ)

Хотя WordPress поставляется с множеством базовых блоков для создания контента, вам может понадобиться что-то более индивидуальное для вашего сайта.

В этой статье мы покажем вам простой способ создания пользовательских блоков Gutenberg для вашего сайта WordPress.

Зачем создавать собственный блок WordPress?

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

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

Однако иногда вы можете захотеть создать свой собственный пользовательский блок, чтобы делать что-то конкретное, и не можете найти плагин блоков , который вам подходит.

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

Примечание . Эта статья предназначена для пользователей среднего уровня. Вам нужно быть знакомым с HTML и CSS , чтобы создавать собственные блоки Gutenberg.

Шаг 1: начните работу со своим первым пользовательским блоком

Во-первых, вам нужно установить и активировать плагин Genesis Custom Blocks . Для получения более подробной информации см. наше пошаговое руководство по установке плагина WordPress .

Этот плагин, созданный создателями популярных Genesis Theme Framework и StudioPress , предоставляет разработчикам простые инструменты для быстрого создания пользовательских блоков для своих проектов.

Ради этого урока мы создадим блок «Отзывы».

Сначала  перейдите на страницу « Пользовательские блоки »Добавить новую  » на левой боковой панели панели администратора.

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

Отсюда вам нужно дать имя вашему блоку.

В правой части страницы вы найдете свойства блока.

Здесь вы можете выбрать значок для своего блока, добавить категорию и добавить ключевые слова.

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

Теперь добавим несколько полей в наш блок.

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

Мы добавим 3 поля в наш настраиваемый блок отзывов: поле изображения для изображения рецензента, текстовое поле для имени рецензента и поле текстовой области для текста отзыва.

Нажмите кнопку  [+] Добавить поле  , чтобы вставить первое поле.

Это откроет некоторые опции для поля. Давайте посмотрим на каждый из них.

• Метка поля : вы можете использовать любое имя по вашему выбору для метки поля. Давайте назовем наше первое поле «Изображение рецензента».
• Имя поля : имя поля будет сгенерировано автоматически на основе метки поля. Мы будем использовать это имя поля на следующем шаге, поэтому убедитесь, что оно уникально для каждого поля.
• Тип поля : Здесь вы можете выбрать тип поля. Мы хотим, чтобы нашим первым полем было изображение, поэтому мы выберем  изображение  в раскрывающемся меню.
• Расположение поля : вы можете решить, хотите ли вы добавить поле в редактор или в инспектор.
• Текст справки : Вы можете добавить текст для описания поля. Это не обязательно, если вы создаете этот блок для личного пользования, но может быть полезно для блогов с несколькими авторами .

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

Следуя описанному выше процессу, давайте добавим 2 других поля для нашего блока отзывов, нажав кнопку  [+] Добавить поле  .

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

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

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

Шаг 2: Создайте собственный шаблон блока

Хотя вы создали собственный блок WordPress на последнем шаге, он не будет работать, пока вы не создадите шаблон блока .

Шаблон блока определяет, как информация, введенная в блок, будет отображаться на вашем сайте. Вы можете решить, как это будет выглядеть, используя HTML и CSS или даже PHP-код, если вам нужно запускать функции или выполнять другие сложные действия с данными.

Существует два способа создания шаблона блока. Если ваш блок выводится в формате HTML/CSS, вы можете использовать встроенный редактор шаблонов.

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

Способ 1. Использование встроенного редактора шаблонов

На экране редактирования пользовательского блока просто переключитесь на вкладку «Редактор шаблонов» и введите свой HTML-код на вкладке разметки.

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

Например, мы использовали следующий HTML-код для примера блока, который мы создали выше.

После этого переключитесь на вкладку CSS, чтобы настроить разметку вывода блока.

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

Способ 2. Ручная загрузка шаблонов пользовательских блоков

Этот метод рекомендуется, если вам нужно использовать PHP для взаимодействия с вашими пользовательскими полями блока.

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

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

Далее вам нужно создать файл с именем block.php с помощью текстового редактора. Здесь вы разместите часть HTML/PHP вашего шаблона блока.

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

Обратите внимание, как мы использовали block_field()функцию для извлечения данных из поля блока.

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

Не забудьте сохранить файл в созданной ранее папке.

Затем вам нужно создать еще один файл с помощью текстового редактора на вашем компьютере и сохранить его block.cssвнутри созданной вами папки.

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

Не забудьте сохранить изменения.

Папка шаблона вашего блока теперь будет содержать два файла шаблона.

После этого вам нужно загрузить папку с блоками на свой веб-сайт с помощью FTP-клиента или приложения «Диспетчер файлов » в панели управления вашей учетной записи хостинга WordPress .

После подключения перейдите в /wp-content/themes/your-current-theme/ папку.

Если в папке вашей темы нет блоков имен папок, создайте новый каталог и назовите его blocks.

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

Это все! Вы успешно создали файлы шаблонов вручную для своего пользовательского блока.

Шаг 3. Предварительный просмотр пользовательского блока

Теперь, прежде чем вы сможете просмотреть свой HTML/CSS, вам нужно предоставить некоторые тестовые данные, которые можно использовать для отображения образца вывода.

В административной области WordPress отредактируйте свой блок и перейдите на вкладку «Предварительный просмотр в редакторе». Здесь вам нужно ввести некоторые фиктивные данные.

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

Теперь вы можете переключиться на вкладку «Предварительный просмотр переднего плана», чтобы увидеть, как ваш блок будет выглядеть во внешнем интерфейсе (общедоступная область вашего веб- сайта WordPress ).

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

Шаг 4. Использование собственного блока в WordPress

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

Просто отредактируйте любой пост или страницу, где вы хотите использовать этот блок.

Нажмите на кнопку добавления нового блока и найдите свой блок, введя его имя или ключевые слова.

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

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

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

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

Вот как выглядит блок отзывов на нашем тестовом сайте.

Мы надеемся, что эта статья помогла вам научиться легко создавать собственные блоки Gutenberg для вашего веб-сайта WordPress.