Поля произвольных данных (метабоксы) служат для добавления дополнительной информации к контенту вашего сайта. Эта информация, известная как метаданные, позволяет расширить функциональность и возможности вашего веб-ресурса. В этой статье мы рассмотрим как добавить метабоксы для Гутенберг.
Метаданные — это информация об информации. В контексте WordPress они связаны с записями, пользователями, комментариями и рубриками.
Благодаря многообразию метаданных в WordPress, ваши возможности практически безграничны. Вы можете создавать столько пользовательских полей, сколько вам требуется, и хранить в них практически любую информацию.
К сожалению, по умолчанию WordPress не предоставляет простой способ добавления и управления полями произвольных данных. В классическом редакторе они отображаются в блоке в нижней части страницы, под редактором текста.
![Как добавить метабоксы](https://genius.courses/wp-content/uploads/2024/02/custom-fields-classic-editor-1024x734.jpeg)
В Гутенберге поля произвольных данных отключены по умолчанию, но их можно отобразить, выбрав соответствующий пункт в настройках записи.
![Как добавить метабоксы](https://genius.courses/wp-content/uploads/2024/02/adding-custom-fields-to-the-block-editor-1024x658.jpeg)
Однако без использования плагина или написания кода невозможно отобразить метаданные на «фронтенде» сайта.
Для обычных пользователей существует множество отличных плагинов, которые возьмут эту задачу на себя. Но если вы разработчик и хотите по-настоящему раскрыть потенциал полей произвольных данных WordPress, бесшовно интегрировать их в блочный редактор и отобразить их на «фронтенде» вашего сайта с помощью специального блока Гутенберга, то вы на правильном пути.
Итак, если вы, как разработчик WordPress, задаетесь вопросом, какой лучший способ использовать поля произвольных данных в обоих редакторах — Гутенберге и классическом, — то быстрый ответ: «создание плагина, который работает как для классического редактора, так и для Гутенберга». Этим мы займемся в этой статье.
Минимальные требования
Эта статья предполагает, что вы знакомы с такими технологиями, как Node.js & npm, React и JavaScript. Также необходимы базовые знания разработки для WordPress.
Прежде чем приступить к чтению, рекомендуем:
- Ознакомиться с нашими предыдущими руководствами по разработке блоков Гутенберга, если вы новичок в этом деле:
- Если вам больше нравится видеоконтент, можете пройти наш бесплатный видеокурс по разработке пользовательских блоков Гутенберга, смотрите видео ниже:
Убедитесь, что на вашем компьютере установлена актуальная версия Node.js.
И с учетом сказанного, давайте начнем!
Создание плагина для блоков с помощью официального инструмента create-block
Первый шаг: создание нового плагина со всеми файлами и зависимостями, необходимыми для регистрации нового типа блока. Плагин блока позволит вам легко создавать пользовательский тип блока для управления и отображения пользовательских метаданных.
Для создания нового типа блока мы будем использовать официальный инструмент create-block. В терминале запустите следующую команду (важно: команду нужно выполнять находясь в папке с плагинами, т.e. /wp-content/plugins/
):
npx @wordpress/create-block
Когда будет предложено, введите следующие данные:
- Шаблон:
dynamic
- Идентификатор блока (также название выходной папки):
metadata-block
- Внутреннее пространство имен для названия блока:
meta-fields
(уникальное для ваших продуктов) - Заголовок блока:
Поля метаданных
- Краткое описание блока (необязательно):
Описание блока
- Dashicon (необязательно):
book
(книга) - Категория (для поиска блока):
widgets
(виджеты) - Настроить плагин WordPress?:
Да/Нет
Давайте рассмотрим эти детали и попробуем понять, где они используются.
- Идентификатор блока определяет название папки и текстовый домен плагина.
- Внутреннее пространство имен определяет внутреннее пространство имен блока и префикс функций, используемые во всем коде плагина.
- Заголовок блока определяет название плагина и название блока в интерфейсе редактора.
Настройка может занять несколько минут. По завершении процесса вы получите список доступных команд.
![](https://genius.courses/wp-content/uploads/2024/02/plugin-bootstrapped-1-1024x829.png)
Плагин блока успешно установлен.
Прежде чем переходить к следующему разделу, в командной строке перейдите в папку вашего плагина и выполните следующие команды. Выполняйте команду npm start
каждый раз при запуске среды разработки Gutenberg. Запуск npm start
запустит наблюдателя в терминале, который будет компилировать JS- и CSS-файлы после любых изменений.
cd metadata-block
npm start
Не забудьте активировать только что созданный плагин в админке. Этот плагин мы будем использовать для регистрации мета полей, и в этой статье будет рассмотрено 3 варианта реализации данного функционала.
Погрузитесь в увлекательный мир веб разработки и дизайна с моими эксклюзивными курсами на Udemy! Я их разработал с душой и учел все нюансы. Сейчас активированы скидки до 90%! Получите доступ к знаниям высокого качества от $9!
Руководство по метабоксам для Gutenberg в видео формате
Если вы предпочитаете видеоформат, то все три способа показанные ниже можно посмотреть в видеоформате:
Создание метаполя для блока на React/JavaScript
Согласно Руководству по блочному редактору, «мета-поле поста» — это «объект WordPress, используемый для хранения дополнительных данных о посте». Прежде чем использовать его, нам нужно зарегистрировать новое мета-поле.
Прежде чем регистрировать пользовательское мета-поле, необходимо убедиться, что тип записи, который будет его использовать, поддерживает пользовательские поля. Кроме того, при регистрации пользовательского мета-поля следует установить параметр show_in_rest в true.
Откройте индексный php файл плагина и добавите код регистрации мета:
function ale_register_metabox(){
register_post_meta('','_meta_field_title_one', array(
'show_in_rest' => true,
'type' => 'string',
'single' => true,
'sanitize_callback' => 'sanitize_text_field',
'auth_callback' => function(){
return current_user_can('edit_posts');
}
));
}
add_action('init','ale_register_metabox');
Функция register_post_meta
регистрирует ключ метаданных для указанных типов записей.
Теперь перейдите в папку wp-content/plugins/metadata-block/src
и откройте файл index.js
и добавьте следующий JavaScript код:
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import metadata from './block.json';
registerBlockType( metadata.name, {
edit: Edit,
} );
В случае статических блоков мы также увидели бы функцию save. В данном случае функция save отсутствует, поскольку мы установили динамический блок. Контент, отображаемый на фронтенде, будет генерироваться динамически с помощью PHP.
Перейдите в папку wp-content/plugins/metadata-block/src
и откройте файл edit.js
. Здесь добавите код для создания блока, который будет отображаться в редакторе:
import { __ } from '@wordpress/i18n';
import {
useBlockProps,
InspectorControls,
RichText,
} from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { TextControl, PanelBody, PanelRow } from '@wordpress/components';
import './editor.scss';
export default function Edit() {
const postType = useSelect(
( select ) => select( 'core/editor' ).getCurrentPostType(),
[]
);
const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
const titleOne = meta[ '_meta_field_title_one' ];
const updateTitleOne = ( val ) => {
setMeta( { ...meta, _meta_field_title_one: val } );
};
return (
<>
<InspectorControls>
<PanelBody title={ __( 'MetaFields' ) }>
<PanelRow>
<TextControl
label={ __( 'Title One' ) }
value={ titleOne }
onChange={ updateTitleOne }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...useBlockProps() }>
<RichText
tagName="h2"
onChange={ updateTitleOne }
allowedFormats={ [] }
value={ titleOne }
/>
</div>
</>
);
}
Рассмотрим код по частям. В первую очередь мы импортируем необходимые компоненты и функции
import { __ } from '@wordpress/i18n'; // Перевод строк
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor'; // Компоненты редактора блоков
import { useSelect } from '@wordpress/data'; // Получение данных из редактора
import { useEntityProp } from '@wordpress/core-data'; // Работа с мета-полями записей
import { TextControl, PanelBody, PanelRow } from '@wordpress/components'; // Компоненты интерфейса
import './editor.scss'; // Стили редактора блока
Объяснение некоторых функций импорта:
- useSelect: Специальный хук для получения данных из зарегистрированных селекторов. В данном случае он используется для получения текущего типа записи.
- useEntityProp: Специальный хук, позволяющий блокам получать и обновлять мета-поля записей. Он возвращает массив, где первый элемент — значение свойства, второй — функция обновления, а третий — полный объект данных из REST API, содержащий дополнительную информацию.
Далее мы используем полученные данные в функции Edit()
export default function Edit() {
const postType = useSelect(
(select) => select('core/editor').getCurrentPostType(),
[]
);
const [meta, setMeta] = useEntityProp('postType', postType, 'meta');
const titleOne = meta['_meta_field_title_one'];
const updateTitleOne = (val) => {
setMeta({ ...meta, _meta_field_title_one: val });
};
// ... (остальная часть кода функции Edit())
}
Объяснение использования данных:
postType
— переменная, хранящая текущий тип записи.meta
— объект, содержащий все мета-поля текущей записи.titleOne
— переменная, хранящая значение мета-поля_meta_field_title_one
.updateTitleOne
— функция-обработчик события изменения значения мета-поля_meta_field_title_one
.
Следующим шагом будет создание JSX-кода, возвращаемого функцией Edit().
return (
<>
<InspectorControls>
<PanelBody title={ __( 'MetaFields' ) }>
<PanelRow>
<TextControl
label={ __( 'Title One' ) }
value={ titleOne }
onChange={ updateTitleOne }
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...useBlockProps() }>
<RichText
tagName="h2"
onChange={ updateTitleOne }
allowedFormats={ [] }
value={ titleOne }
/>
</div>
</>
);
Осталось реализовать отображение блока на фронт части, и поскольку у нас динамический блок, мы будем делать это по средствам PHP. Переходим в индексный файл плагина и добавляем следующий код:
<?php
function ale_custom_render_meta($post){
wp_nonce_field('ale_save_custom_meta','ale_metafields_box_nonce' );
$title_one = get_post_meta($post->ID, '_meta_field_title_one', true);
?>
<div>
<h4>Title:</h4>
<p><input type="text" id="_meta_field_title_two" name="_meta_field_title_two" value="<?php echo $title_one; ?>" /></p>
</div>
<?php
}
function ale_blocks_ale_blocks_block_init() {
register_block_type( __DIR__ . '/build', array(
'render_callback' => 'ale_custom_metaboxes_render'
) );
}
add_action( 'init', 'ale_blocks_ale_blocks_block_init' );
В видео примере выше вы тай же можете найти другие способы использования мета данных, например привязать поля к всему посту а не к определенному блоку. Так же в видео рассмотрел как отображать его в отдельном сайдбаре и как показывать поля одновременно и в гутенберг и в классическом редакторе.
На моем YouTube канале так же доступно другое видео по метабоксам на территории плагинов, которое тоже будет вам полезным:
Заключение по уроку: Как добавить метабоксы?
В данной статье мы изучили как регистрировать и использовать метабоксы как для гутенберга так и для классического редактора (рассмотрели в видео уроках). Приглашаю вас изучить мои курсы на Udemy для более глубокого и детального изучения веб разработки.