如何解决WordPress WYSIWYG编辑器自定义字体与格式冲突并添加字号选择

问题根源 #

你之前的两段代码冲突，是因为各自单独使用tiny_mce_before_init钩子时，后执行的函数会直接覆盖前一个的配置数组，而非合并。要同时实现三个功能，必须把所有配置整合到同一个钩子函数里，避免覆盖。

完整解决方案代码 #

将以下代码添加到你的主题（推荐子主题）functions.php文件中，记得替换代码里的'your-cpt-slug'为你的自定义文章类型（CPT）的slug：

// 仅针对目标CPT加载自定义编辑器配置
function custom_cpt_tinymce_config($mce_init, $editor_id) {
    // 检查当前编辑的是否是目标CPT
    global $post;
    if (!isset($post) || $post->post_type !== 'your-cpt-slug') {
        return $mce_init;
    }

    // 1. 添加自定义格式选项
    $style_formats = array(
        array(
            'title' => '自定义标题1',
            'block' => 'h3',
            'classes' => 'custom-heading-1',
            'wrapper' => false,
        ),
        array(
            'title' => '强调文本',
            'inline' => 'span',
            'classes' => 'custom-highlight',
        ),
        // 可继续添加更多自定义格式
    );
    $mce_init['style_formats'] = json_encode($style_formats);
    $mce_init['style_formats_merge'] = true; // 合并默认格式，不覆盖

    // 2. 添加自定义字体选项
    $custom_fonts = array(
        'Arial, Helvetica, sans-serif',
        'Georgia, serif',
        'Courier New, monospace',
        '自定义字体1, sans-serif', // 替换为你的字体名称
        '自定义字体2, serif'
    );
    $mce_init['font_formats'] = implode('; ', $custom_fonts);

    // 3. 添加自定义字号选项
    $custom_font_sizes = array(
        '8px' => '8px',
        '10px' => '10px',
        '12px' => '12px',
        '14px' => '14px',
        '16px' => '16px',
        '18px' => '18px',
        '24px' => '24px',
        '32px' => '32px',
        '48px' => '48px'
    );
    $mce_init['fontsize_formats'] = implode(' ', array_map(function($key) use ($custom_font_sizes) {
        return $key . '=' . $custom_font_sizes[$key];
    }, array_keys($custom_font_sizes)));

    return $mce_init;
}
add_filter('tiny_mce_before_init', 'custom_cpt_tinymce_config', 10, 2);

// 为编辑器添加样式预览
function custom_cpt_tinymce_styles() {
    global $post;
    if (!isset($post) || $post->post_type !== 'your-cpt-slug') {
        return;
    }
    ?>
    <style type="text/css">
        .custom-heading-1 {
            font-size: 28px;
            color: #2c3e50;
            font-weight: 700;
            margin: 20px 0;
        }
        .custom-highlight {
            background-color: #fff3cd;
            padding: 2px 4px;
            border-radius: 3px;
        }
        /* 自定义字体编辑器预览样式 */
        .mce-content-body span[style*="font-family: '自定义字体1'"] {
            font-family: '自定义字体1', sans-serif;
        }
    </style>
    <?php
}
add_action('admin_head', 'custom_cpt_tinymce_styles');

// 前端样式（可选，让自定义格式在前端生效）
function custom_cpt_frontend_styles() {
    if (is_singular('your-cpt-slug')) {
        ?>
        <style type="text/css">
            .custom-heading-1 {
                font-size: 28px;
                color: #2c3e50;
                font-weight: 700;
                margin: 20px 0;
            }
            .custom-highlight {
                background-color: #fff3cd;
                padding: 2px 4px;
                border-radius: 3px;
            }
            /* 自定义字体前端样式 */
            body span[style*="font-family: '自定义字体1'"] {
                font-family: '自定义字体1', sans-serif;
            }
        </style>
        <?php
    }
}
add_action('wp_head', 'custom_cpt_frontend_styles');

// 确保格式按钮显示在编辑器工具栏
function custom_cpt_add_mce_buttons($buttons) {
    global $post;
    if (!isset($post) || $post->post_type !== 'your-cpt-slug') {
        return $buttons;
    }
    // 添加格式选择按钮到工具栏
    array_push($buttons, 'styleselect');
    // 若字体/字号按钮未显示，取消下面两行注释
    // array_push($buttons, 'fontselect');
    // array_push($buttons, 'fontsizeselect');
    return $buttons;
}
add_filter('mce_buttons', 'custom_cpt_add_mce_buttons');

代码说明 #

1. CPT定向生效：所有函数都加入了CPT类型判断，仅对目标CPT的编辑器生效，不影响其他文章类型或页面。
2. 配置合并逻辑：通过style_formats_merge = true确保自定义格式与默认格式合并，不会被覆盖；字体和字号配置可根据需求选择替换或保留默认选项。
3. 实时预览与前端显示：admin_head钩子添加编辑器内的样式预览，wp_head的样式保证自定义格式在前端正常显示。
4. 工具栏按钮控制：mce_buttons钩子确保格式选择按钮显示，字体/字号按钮默认已存在，若未显示可手动添加。

使用注意事项 #

• 替换所有your-cpt-slug为你的CPT实际slug（如portfolio）。
• 若使用自定义字体，需先确保字体已加载（如通过Google Fonts或本地文件），再同步修改样式中的字体名称。
• 测试前清空浏览器缓存，避免编辑器加载旧配置。

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