在WordPress的TinyMCE编辑器添加自定义下拉菜单，为选中标题/段落加类

下面是适配当前WordPress版本的可行方案，直接按步骤将代码添加到主题文件即可完成需求：

步骤1：添加PHP代码到functions.php #

将以下代码粘贴到主题根目录的functions.php文件末尾：

// 注册TinyMCE自定义插件
function custom_tinymce_register_class_plugin( $plugins ) {
    $plugins['custom_class_dropdown'] = get_template_directory_uri() . '/js/tinymce-custom-class.js';
    return $plugins;
}
add_filter( 'mce_external_plugins', 'custom_tinymce_register_class_plugin' );

// 将下拉菜单按钮添加到TinyMCE第二行工具栏
function custom_tinymce_add_class_button( $buttons ) {
    array_push( $buttons, 'custom_class_dropdown' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'custom_tinymce_add_class_button' );

步骤2：创建TinyMCE插件JS文件 #

1. 在主题根目录下新建js文件夹（如果不存在）
2. 在js文件夹内创建tinymce-custom-class.js文件，粘贴以下代码：

tinymce.PluginManager.add('custom_class_dropdown', function(editor) {
    // 自定义样式选项，可根据需求修改类名和显示文本
    const styleOptions = [
        { text: '无自定义样式', value: '' },
        { text: '标题高亮样式', value: 'highlight-heading' },
        { text: '段落缩进样式', value: 'indented-paragraph' },
        { text: '段落强调样式', value: 'emphasized-paragraph' }
    ];

    // 添加下拉菜单按钮
    editor.addButton('custom_class_dropdown', {
        type: 'listbox',
        text: '应用自定义样式',
        icon: false,
        // 选中样式时应用到元素
        onselect: function() {
            const selectedClass = this.value();
            const selectedNode = editor.selection.getNode();

            // 仅允许标题(H1-H6)和段落(P)应用自定义类
            if (selectedNode.nodeName.match(/H[1-6]|P/)) {
                // 清除已有的自定义类（需和styleOptions里的value对应）
                selectedNode.classList.remove('highlight-heading', 'indented-paragraph', 'emphasized-paragraph');
                
                // 如果选中了样式类，添加到元素
                if (selectedClass) {
                    selectedNode.classList.add(selectedClass);
                }
            }
        },
        values: styleOptions,
        // 切换选中元素时自动匹配已应用的样式
        onPostRender: function() {
            const self = this;
            editor.on('NodeChange', function(e) {
                const currentNode = e.element;
                if (currentNode.nodeName.match(/H[1-6]|P/)) {
                    let activeClass = '';
                    styleOptions.forEach(opt => {
                        if (opt.value && currentNode.classList.contains(opt.value)) {
                            activeClass = opt.value;
                        }
                    });
                    self.value(activeClass);
                }
            });
        }
    });
});

步骤3：自定义CSS样式 #

在主题的style.css文件中添加对应类的样式，例如：

/* 标题高亮样式 */
.highlight-heading {
    color: #e74c3c;
    border-left: 4px solid #e74c3c;
    padding-left: 12px;
    margin-top: 1.5rem;
}

/* 段落缩进样式 */
.indented-paragraph {
    text-indent: 2em;
    margin-left: 1rem;
}

/* 段落强调样式 */
.emphasized-paragraph {
    background-color: #fef9e7;
    padding: 1rem;
    border-radius: 4px;
}

使用说明 #

1. 刷新WordPress后台的编辑器页面，就能在TinyMCE的第二行工具栏看到「应用自定义样式」的下拉菜单
2. 选中编辑器内的标题或段落，从下拉菜单中选择对应的样式，即可为元素添加指定的CSS类
3. 如果需要添加更多样式，只需修改JS文件中的styleOptions数组，并同步更新CSS样式和清除类的代码即可

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