如何为WordPress帖子设置默认结构及添加步骤按钮？

嘿，这个需求太实用了——批量创建结构一致的帖子，确实能省超多复制粘贴的功夫！我给你梳理两个落地的方案，从无代码到开发者级别的都有：

一、让「新建帖子」自动加载你的标准结构 #

方法1：Gutenberg原生块模板（零代码，新手友好） #

Gutenberg编辑器本身就自带自定义模板功能，几步就能搞定：

• 先手动建一篇符合要求的样板帖：把Summary、History、Requirements、Installation Instructions（带第一个左图右文的步骤）、Notes这些模块都搭好，样式也调好。
• 点击编辑器右上角的三个点菜单，选择「导出为模板」，给模板起个好记的名字（比如「产品安装指南模板」）。
• 以后新建帖子时，直接在编辑器顶部的「模板」下拉框里选这个模板，整套结构瞬间加载完成，不用再从头搭！

方法2：代码注册自定义模板（灵活可控，适合开发者） #

如果你想把这套结构强制应用到所有新帖子，或者需要适配自定义帖子类型，可以在主题的functions.php里加这段代码（注意：用子主题修改，避免主题更新丢失代码）：

function register_custom_install_guide_template() {
    $post_type = get_post_type_object( 'post' );
    // 定义模板的块结构
    $post_type->template = array(
        // Summary模块
        array( 'core/heading', array(
            'level' => 2,
            'content' => 'Summary（概述）',
        ) ),
        array( 'core/paragraph', array(
            'placeholder' => '在这里填写概述内容...',
        ) ),
        // History模块
        array( 'core/heading', array(
            'level' => 2,
            'content' => 'History（历史）',
        ) ),
        array( 'core/paragraph', array(
            'placeholder' => '在这里填写历史内容...',
        ) ),
        // Requirements模块
        array( 'core/heading', array(
            'level' => 2,
            'content' => 'Requirements（要求）',
        ) ),
        array( 'core/list', array(
            'placeholder' => '添加要求列表项...',
        ) ),
        // Installation Instructions模块
        array( 'core/heading', array(
            'level' => 2,
            'content' => 'Installation Instructions（安装说明）',
        ) ),
        // 示例步骤（左图右文结构）
        array( 'core/group', array(
            'className' => 'installation-step',
        ), array(
            array( 'core/image', array(
                'align' => 'left',
                'placeholder' => '上传步骤图片...',
            ) ),
            array( 'core/paragraph', array(
                'placeholder' => 'Step 1. 在这里填写步骤内容...',
            ) ),
        ) ),
        // Notes模块
        array( 'core/heading', array(
            'level' => 2,
            'content' => 'Notes（备注）',
        ) ),
        array( 'core/paragraph', array(
            'placeholder' => '在这里填写备注内容...',
        ) ),
    );
}
add_action( 'init', 'register_custom_install_guide_template' );

然后给步骤加个CSS样式（主题自定义CSS里添加），让图片左浮、内容对齐：

.installation-step img {
    float: left;
    margin-right: 20px;
    max-width: 300px; /* 根据需求调整宽度 */
}
.installation-step {
    overflow: hidden; /* 清除浮动 */
    margin-bottom: 25px;
}

二、一键添加新步骤的按钮 #

方法1：可复用块（简单快捷） #

• 选中你做好的单个步骤块（就是那个左图右文的group块），点击编辑器顶部的「创建可复用块」，命名为「安装步骤模板」。
• 以后要加新步骤时，点击编辑器左上角的「+」，在「可复用块」分类里找到这个模板，插入后修改步骤编号和内容就行，比复制粘贴快多了。

方法2：自定义编辑器按钮（自动化拉满） #

如果想更丝滑，比如直接在「Installation Instructions」标题旁边加个按钮，点击自动插入带编号的新步骤，可以这么做：

1. 在主题目录下创建add-step-button.js文件，内容如下：

wp.domReady( function() {
    // 监听编辑器状态变化
    wp.data.subscribe( function() {
        const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
        // 找到Installation Instructions的标题块
        const installHeadingIndex = blocks.findIndex( block => 
            block.name === 'core/heading' && block.attributes.content === 'Installation Instructions（安装说明）'
        );

        if ( installHeadingIndex !== -1 && !document.getElementById('add-step-btn') ) {
            // 创建按钮
            const addBtn = document.createElement('button');
            addBtn.id = 'add-step-btn';
            addBtn.className = 'components-button is-primary';
            addBtn.textContent = '添加步骤';
            addBtn.style.marginLeft = '10px';

            // 点击按钮插入新步骤
            addBtn.onclick = function() {
                // 统计已有的步骤数量
                const existingSteps = blocks.slice(installHeadingIndex + 1).filter( block => 
                    block.name === 'core/group' && block.attributes.className === 'installation-step'
                );
                const newStepNum = existingSteps.length + 1;

                // 插入新的步骤块
                wp.data.dispatch('core/block-editor').insertBlock(
                    wp.blocks.createBlock('core/group', {
                        className: 'installation-step',
                    }, [
                        wp.blocks.createBlock('core/image', {
                            align: 'left',
                            placeholder: `上传步骤${newStepNum}图片...`,
                        }),
                        wp.blocks.createBlock('core/paragraph', {
                            placeholder: `Step ${newStepNum}. 在这里填写步骤内容...`,
                        }),
                    ]),
                    installHeadingIndex + 1 + existingSteps.length
                );
            };

            // 把按钮加到标题旁边
            const headingElement = document.querySelectorAll('.wp-block-heading')[installHeadingIndex];
            if (headingElement) headingElement.appendChild(addBtn);
        }
    });
});

2. 在主题的functions.php里注册这个脚本：

function enqueue_install_step_button() {
    // 只在帖子编辑页面加载脚本
    if ( is_admin() && get_current_screen()->base === 'post' ) {
        wp_enqueue_script(
            'add-install-step-btn',
            get_stylesheet_directory_uri() . '/add-step-button.js',
            array('wp-blocks', 'wp-editor', 'wp-data', 'wp-dom'),
            filemtime(get_stylesheet_directory() . '/add-step-button.js'),
            true
        );
    }
}
add_action('admin_enqueue_scripts', 'enqueue_install_step_button');

现在打开帖子编辑器，「Installation Instructions」标题旁边会多出一个蓝色的「添加步骤」按钮，点击就自动插入带正确编号的步骤块，完全不用手动调整结构！

内容的提问来源于stack exchange，提问作者Emile