租号玩代理申请
A-A+

在WordPress编辑器中自定义pre按钮标签的添加方法

2024年12月24日 建站相关 暂无评论 阅读 19 次

我们都知道，在 WordPress 中撰写文章时有两种模式可供选择：可视化模式和文本模式。如果我们需要在文章中展示代码，通常需要在可视化模式下粘贴代码，这样在切换到文本模式时会自动进行转义。如果直接在文本模式下粘贴代码，代码将会被直接运行，显示出来的将不是正常的代码。

自定义pre标签添加到编辑器

为了解决这个问题，我们可以使用下面的过滤器。这个过滤器可以让被 pre 标签包围的代码在文本模式下不会被直接运行，而在可视化模式下仍然保持正常状态。这样，每次粘贴代码时就不需要切换到可视化模式了，非常方便。

将以下代码添加到主题的functions.php文件中。

  /*
 * WordPress Pre 标签内的 html 不转义
 */
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
    return preg_replace_callback( '|<pre.*>(.*)</pre|isU' , 'convert_pre_entities', $content );
}
 
function convert_pre_entities( $matches ) {
    return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}

然后，在后面继续添加以下代码：

 //添加 HTML 编辑器自定义快捷标签 Pre 按钮
add_action('after_wp_tiny_mce', 'add_button_mce');
function add_button_mce($mce_settings) {
?>
<script type="text/javascript">
QTags.addButton( 'hr', 'hr', "\n<hr />\n", "" );
QTags.addButton( 'h1', 'h1', "\n ", " \n" );
QTags.addButton( 'h2', 'h2', "\n<h2>", "</h2>\n" );
QTags.addButton( 'h3', 'h3', "\n<h3>", "</h3>\n" );
QTags.addButton( 'pre', '代码高亮', '<pre class="prettyprint linenums">\n', "\n</1pre>" );
</script>
<?php
}

把上面中的/1pre 改为 /pre，因为我的代码是用2个Pre括一起的。

标签：