如何在WordPress编辑器中添加Bootstrap网格选择或下拉菜单

一、这类需求很常见，不少开发者都做过 #

核心就是做轻量的自定义布局字段，避开Divi那种复杂builder的学习曲线，让编辑人员直接选行列、填内容就行，完全不用碰Divi的复杂设置。

二、必须做自定义插件，原因如下 #

• 安全可控：自己写的代码，没有第三方插件的冗余功能和潜在漏洞，完全符合你的安全要求。
• 批量部署方便：你们有30+网站，插件可以直接打包在所有站点安装，比改主题效率高太多，而且主题更新不会影响这个功能。
• 维护简单：后续要调整布局样式、加新的列选项，只需要更新插件代码就行，不用挨个改主题文件。

三、具体实现步骤（原生WP+Bootstrap） #

1. 后台加自定义元框 #

用WP原生函数创建后台字段，给编辑人员提供列数选择、每列的内容编辑器，不用依赖第三方工具，代码完全自己掌控：

// 注册布局元框
add_action('add_meta_boxes', 'bs_layout_meta_box');
function bs_layout_meta_box() {
    add_meta_box('bs-layout', 'Bootstrap 简易布局', 'bs_layout_meta_box_html', ['post', 'page'], 'normal', 'high');
}

// 元框内容渲染
function bs_layout_meta_box_html($post) {
    wp_nonce_field('bs_layout_save_nonce', 'bs_layout_nonce');
    $col_count = get_post_meta($post->ID, '_bs_col_count', true) ?: '2';
    ?>
    <div style="margin-bottom:15px;">
        <label for="bs-col-count">选择列数：</label>
        <select id="bs-col-count" name="bs_col_count">
            <option value="1" <? selected($col_count, '1') ?>>1列</option>
            <option value="2" <? selected($col_count, '2') ?>>2列</option>
            <option value="3" <? selected($col_count, '3') ?>>3列</option>
            <option value="4" <? selected($col_count, '4') ?>>4列</option>
        </select>
    </div>
    <?php
    // 根据选择的列数生成对应编辑器
    for ($i=1; $i<=$col_count; $i++) {
        $col_content = get_post_meta($post->ID, "_bs_col_{$i}_content", true);
        echo "<h4 style=\"margin:15px 0 5px;\">第{$i}列内容</h4>";
        wp_editor($col_content, "bs_col_{$i}_content", [
            'textarea_rows' => 6,
            'quicktags' => true,
            'tinymce' => [
                'toolbar1' => 'bold,italic,link,unlink,undo,redo', // 精简编辑器按钮，降低复杂度
                'toolbar2' => ''
            ]
        ]);
    }
}

// 保存元框数据
add_action('save_post', 'bs_layout_save_meta_data');
function bs_layout_save_meta_data($post_id) {
    // 验证权限和nonce
    if (!isset($_POST['bs_layout_nonce']) || !wp_verify_nonce($_POST['bs_layout_nonce'], 'bs_layout_save_nonce')) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;

    // 保存列数
    if (isset($_POST['bs_col_count'])) {
        update_post_meta($post_id, '_bs_col_count', sanitize_text_field($_POST['bs_col_count']));
        $count = intval($_POST['bs_col_count']);
        // 保存每列内容
        for ($i=1; $i<=$count; $i++) {
            if (isset($_POST["bs_col_{$i}_content"])) {
                update_post_meta($post_id, "_bs_col_{$i}_content", wp_kses_post($_POST["bs_col_{$i}_content"]));
            }
        }
    }
}

2. 前端渲染Bootstrap布局 #

在主题的single.php或page.php中，判断是否有布局数据，然后输出对应的Bootstrap行和列：

<?php
// 获取布局数据
$bs_col_count = get_post_meta(get_the_ID(), '_bs_col_count', true);
if ($bs_col_count) {
    $col_class = 'col-md-' . (12 / $bs_col_count);
    echo '<div class="bs-row row g-4">'; // 加自定义类bs-row避免和Divi样式冲突
    for ($i=1; $i<=$bs_col_count; $i++) {
        $col_content = get_post_meta(get_the_ID(), "_bs_col_{$i}_content", true);
        if ($col_content) {
            echo "<div class=\"{$col_class}\">{$col_content}</div>";
        }
    }
    echo '</div>';
}
?>

3. 加载Bootstrap资源 #

如果主题没引入Bootstrap，在插件里加这段代码加载：

// 加载Bootstrap资源
add_action('wp_enqueue_scripts', 'bs_layout_enqueue_assets');
function bs_layout_enqueue_assets() {
    // 用CDN加载，也可以把文件放到插件目录本地加载
    wp_enqueue_style('bootstrap-css', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', [], null, true);
}

四、和Divi兼容的小细节 #

• 可以在元框里加一个开关选项，让编辑人员选择是否启用这个Bootstrap布局，避免和Divi的布局冲突。
• 给Bootstrap的行/列加自定义前缀类（比如bs-row、bs-col），防止和Divi的默认CSS样式冲突，保证布局正常显示。

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