WordPress后台默认编辑器工具栏增加添加“pre”标签按钮，纯代码实现

要实现选中代码后，点击“<pre>”标签按钮可以自动将选中的代码包裹在“<pre>”标签中，您可以按照以下步骤进行操作：

1. 打开您的WordPress子主题的functions.php文件，并添加以下代码：

// 添加标签按钮到WordPress编辑器
function add_pre_tag_button() {
if (current_user_can('edit_posts')) {
add_filter('mce_buttons', 'register_pre_tag_button');
add_filter('mce_external_plugins', 'add_pre_tag_plugin');
}
}
add_action('init', 'add_pre_tag_button');

function register_pre_tag_button($buttons) {
array_push($buttons, 'pre');
return $buttons;
}

function add_pre_tag_plugin($plugins) {
$plugins['pre'] = get_stylesheet_directory_uri() . '/js/pre-tag.js';
return $plugins;
}

2. 在子主题文件夹中创建一个名为pre-tag.js的JavaScript文件，并将其保存到js文件夹中。在该文件中添加以下代码：

(function() {
tinymce.PluginManager.add('pre', function(editor, url) {
editor.addButton('pre', {
title: 'Pre Tag',
icon: 'code',
onclick: function() {
var selected_text = editor.selection.getContent({format: 'text'});
if(selected_text){
var pre_text = '<pre>'+selected_text+'</pre>';
editor.selection.setContent(pre_text);
}else{
editor.insertContent('<pre></pre>');
}
}
});
});
})();

3. 保存并上传该文件。

现在，当您选中代码并单击“<pre>”标签按钮时，它将自动将选定的代码包装在“<pre>”标记中。如果您没有选择任何文本，则会插入空的“<pre>”标记。