WordPress主题开发中如何创建自定义区块，让你的主题更强大！-易模板

在 WordPress 主题开发 中，自定义区块（Custom Blocks）是现代化编辑体验的重要组成部分。随着 Gutenberg 编辑器（区块编辑器）的普及，传统的短代码（Shortcode）和自定义字段（Custom Fields）逐渐被更直观、可视化的区块替代。

那么，如何开发一个 WordPress 自定义区块，并将其集成到主题中呢？本文将带你了解完整的实现思路！

1. 为什么要使用自定义区块？

自定义区块相比传统的自定义字段或短代码，更加直观、用户友好，具备以下优势：

所见即所得：直接在编辑器中预览和调整内容，不需要切换到前端查看效果。
可重用：区块可以像组件一样多次使用，提高效率。
原生支持：WordPress 官方推荐方式，未来兼容性更好。

2. 创建 WordPress 自定义区块的基本步骤

在 WordPress 主题开发 中，你可以使用 JavaScript（React + JSX）或 PHP 来创建自定义区块。

第一步：注册区块脚本

在 functions.php 中注册区块脚本：

function my_custom_block_assets() {
    wp_register_script(
        'my-custom-block',
        get_template_directory_uri() . '/js/my-custom-block.js',
        array('wp-blocks', 'wp-editor', 'wp-components', 'wp-i18n', 'wp-element'),
        filemtime(get_template_directory() . '/js/my-custom-block.js')
    );
    
    register_block_type('mytheme/custom-block', array(
        'editor_script' => 'my-custom-block',
    ));
}
add_action('init', 'my_custom_block_assets');

第二步：创建 JavaScript 代码（React 编写区块）

在 js/my-custom-block.js 中添加：

const { registerBlockType } = wp.blocks;
const { RichText } = wp.blockEditor;

registerBlockType('mytheme/custom-block', {
    title: '自定义区块',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: { type: 'string', source: 'html', selector: 'p' }
    },
    edit: ({ attributes, setAttributes }) => {
        return (
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(content) => setAttributes({ content })}
                placeholder="输入你的内容..."
            />
        );
    },
    save: ({ attributes }) => {
        return <RichText.Content tagName="p" value={attributes.content} />;
    }
});