温馨提示：本文最后更新于2023-10-24 12:10:17，某些文章具有时效性，若有错误或已失效，请在文末留言。

WordPress的文章编辑器很多时候不能满足我们的要求，那就要靠我们自己去想办法来解决。

我们在浏览同行的其他站点的时候，发现有很多博客都在使用彩色文本框，感觉挺不错的，于是自己动手也在站点上增加了几个彩色文本框。下面给大家分享一下纯代码实现WordPress彩色文本框，有需要的朋友可以参考借鉴。

注意，这里说的是纯代码版，用插件 G-Shortcode 也是可以实现同样的功能，只不过站长有个习惯就是能不用插件就不用，因为插件使用太多托累网站速度。

实现方法

1、将下列代码放入你主题目录的functions.php文件中（请提前备份好所要修改的文件，以免主题报错）；

/*彩色文本框短代码 开始*/
function toz($atts, $content=null){
    return '<div id="sc_notice">'.$content.'</div>';
}
add_shortcode('v_notice','toz');
function toa($atts, $content=null){
    return '<div id="sc_error">'.$content.'</div>';
}
add_shortcode('v_error','toa');
function toc($atts, $content=null){
    return '<div id="sc_warn">'.$content.'</div>';
}
add_shortcode('v_warn','toc');
function tob($atts, $content=null){
    return '<div id="sc_tips">'.$content.'</div>';
}
add_shortcode('v_tips','tob');
function tod($atts, $content=null){
    return '<div id="sc_blue">'.$content.'</div>';
}
add_shortcode('v_blue','tod');
function toe($atts, $content=null){
    return '<div id="sc_black">'.$content.'</div>';
}
add_shortcode('v_black','toe');
function tof($atts, $content=null){
    return '<div id="sc_xuk">'.$content.'</div>';
}
add_shortcode('v_xuk','tof');
function tog($atts, $content=null){
    return '<div id="sc_lvb">'.$content.'</div>';
}
add_shortcode('v_lvb','tog');
function toh($atts, $content=null){
    return '<div id="sc_redb">'.$content.'</div>';
}
add_shortcode('v_redb','toh');
function toi($atts, $content=null){
    return '<div id="sc_orange">'.$content.'</div>';
}
add_shortcode('v_orange','toi');
/*彩色文本框短代码 完毕*/


/*添加HTML编辑器自定义标签按钮 开始*/
add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
function bolo_after_wp_tiny_mce($mce_settings) {
?>
    <script type="text/javascript">
QTags.addButton( 'v_notice', '绿框', '<div id="sc_notice">绿色提示框</div>n', "" );
QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>n', "" );
QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>n', "" );
QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>n', "" );
QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>n', "" );
QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>n', "" );
QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>n', "" );
QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>n', "" );
QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>n', "" );
QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>n', "" );
function bolo_QTnextpage_arg1() {
    }
    </script>
<?php
}
/*添加HTML编辑器自定义标签按钮 完毕*/

2、添加下面的CSS样式代码到你的主题style.css文件中，或者直接在你的主题后台自定义CSS样式中添加。

3、现在，在文章编辑器中插入以下彩色文本框短代码即可使用，如下图；

[ v_notice]绿色提示框[/v_notice]
[ v_error]红色提示框[/v_error]
[ v_warn]黄色提示框[/v_warn]
[ v_tips]灰色提示框[/v_tips]
[ v_blue]蓝色提示框[/v_blue]
[ v_black]黑色提示框[/v_black]
[ v_xuk]虚线提示框[/v_xuk]
[ v_lvb]绿边提示框[/v_lvb]
[ v_redb]红边提示框[/v_redb]
[ v_orange]橙边提示框[/v_orange]

为了避免代码被正常解析，我在 [v_ 中间加了一个空格。

4、若觉得上一步每次添加彩色文本框时输入短代码太麻烦，我们还可以通过文本编辑器上面的按钮来避免这种手工输入代码，先把编辑器切换到文本，如下图。

5、然后，使用快捷按钮插入对应的文本框即可。

6、效果展示。

7、如果想要显示文本美化框前面的图标，我们还需要点击下面的素材图标保存到本地，然后再把图片上传到主题的img文件夹中，没有就自己新建一个文件夹。

8、同时，还需要将第2步CSS样式代码中的“img/sc_notice.png”等5个图片改成图片的网址即可正常显示。

9、最终，文本美化框前面带图标效果展示。