В WordPress можно создать кастомный блок (или "блоки Gutenberg") несколькими способами. Вот основные шаги, которые помогут вам создать свой уникальный блок:
### 1. Использование плагина
#### a. Установите плагин «Block Lab» или «Advanced Custom Fields (ACF)»
Эти плагины позволяют создавать кастомные блоки Gutenberg без необходимости программирования.
#### b. Создайте новый блок
После установки плагина вы сможете создать новый блок, заполнив необходимые поля и настройки.
### 2. Разработка с использованием JavaScript и PHP
Если вы хотите создать более сложный блок, вам потребуется кодить. Вот основные шаги:
#### a. Настройка среды разработки
1. **Создайте плагин или используйте тему**. Для начала вы можете создать новый плагин или использовать существующую тему.
2. **Добавьте необходимые файлы**. Создайте файл, например `my-custom-block.php`, для вашего плагина и добавьте в него следующий код:
```php
<?php
/**
* Plugin Name: My Custom Block
*/
function my_custom_block_register() {
wp_register_script(
'my-custom-block-editor-script',
plugins_url( 'block.js', __FILE__ ),
array( 'wp-blocks', 'wp-element', 'wp-editor' )
);
register_block_type( 'my-plugin/my-custom-block', array(
'editor_script' => 'my-custom-block-editor-script',
) );
}
add_action( 'init', 'my_custom_block_register' );
```
#### b. Создайте JavaScript файл
Создайте файл `block.js` в том же каталоге, что и ваш основной PHP файл. Этот файл будет содержать код для вашего блока:
```javascript
const { registerBlockType } = wp.blocks;
registerBlockType('my-plugin/my-custom-block', {
title: 'My Custom Block',
icon: 'smiley',
category: 'common',
edit: () => {
return <div>Hello, this is my custom block!</div>;
},
save: () => {
return <div>Hello, this is my custom block!</div>;
},
});
```
### 3. Активация плагина
После написания кода вам нужно активировать созданный плагин в админ-панели WordPress.
### 4. Использование блока в редакторе
Теперь, когда плагин активирован, вы сможете найти ваш кастомный блок в редакторе Gutenberg и использовать его на своих страницах или записях.
### 5. Дополнительные настройки
Вы можете добавлять атрибуты, стили и другие функции, такие как поля для ввода данных для более сложных блоков.
### Полезные ресурсы
- [Документация по созданию блоков WordPress](https://developer.wordpress.org/block-editor/tutorials/)
- [Gutenberg Handbook](https://github.com/WordPress/gutenberg/blob/trunk/docs/README.md)
Этот процесс может показаться сложным, но с практикой вы сможете создать свои кастомные блоки в WordPress.