如何通过短代码/编辑函数解决WordPress中Bootstrap与wpautop的冲突

我之前也碰到过一模一样的问题——WordPress自动插入的隐形<br>标签确实会打乱Bootstrap按钮的布局，把本该并排的按钮拆成每行一个。下面给你两种实用的解决方法，你可以根据自己的使用习惯选择：

方法一：用短代码生成Bootstrap按钮 #

短代码是WordPress里避开自动格式化的绝佳方式，系统不会对短代码输出的内容自动添加<br>或<p>标签。你可以在主题的functions.php文件中添加以下代码：

function bootstrap_button_shortcode($atts) {
    // 定义短代码的默认参数，可按需调整
    $atts = shortcode_atts(array(
        'text' => '默认按钮',
        'style' => 'btn-primary',
        'link' => '#'
    ), $atts);

    // 输出安全格式化后的Bootstrap按钮HTML
    return '<a href="' . esc_url($atts['link']) . '" class="btn ' . esc_attr($atts['style']) . '">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('bs_btn', 'bootstrap_button_shortcode');

添加完成后，你在文章或页面编辑器里直接用短代码就能生成行内按钮，比如：

[bs_btn text="首页" style="btn-primary" link="/"] [bs_btn text="关于我们" style="btn-secondary" link="/about"]

这样两个按钮就会自动并排显示，不会被<br>分隔开。

方法二：过滤自动换行，排除Bootstrap按钮 #

如果不想用短代码，也可以直接修改WordPress的自动格式化规则，让它不在Bootstrap按钮标签前后添加<br>。同样在主题的functions.php中添加这段代码：

function remove_br_around_btns($content) {
    // 移除Bootstrap按钮标签前后的<br>标签
    $content = preg_replace('/<br\s*\/?>?\s*(<a[^>]+class="[^"]*btn[^"]*"[^>]*>)/i', '$1', $content);
    $content = preg_replace('/(<\/a>)\s*<br\s*\/?>?/i', '$1', $content);
    return $content;
}
add_filter('the_content', 'remove_br_around_btns');

这个函数会扫描文章内容，精准清除<a class="btn...">标签前后的<br>，这样你直接在编辑器里写原生Bootstrap按钮HTML，它们也能正常行内排列：

<a href="/" class="btn btn-primary">首页</a> <a href="/about" class="btn btn-secondary">关于我们</a>

小提醒 #

• 修改functions.php前务必备份文件，避免出错导致网站无法访问；
• 如果使用子主题，一定要修改子主题的functions.php，不要改动父主题文件，否则主题更新后代码会丢失。

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