WordPress文章添加彩色美化框及彩色按钮教程

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

将下列代码放在你主题目录的functions.php

/*添加文本编辑自定义快捷标签按钮开始***/
 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_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', "" );
 function bolo_QTnextpage_arg1() {
 }
 </script>
 <?php
 }
 /*添加文本编辑自定义快捷标签按钮结束*/

以上是添加的自定义按钮。如下图：

把一下代码放到你的主题style.css里，有些主题不是默认的style.css

/*彩色文本框开始*/
#sc_black {
 border-width: 1px 4px 4px 1px;
 border-style: solid;
 border-color: #3e3e3e;
 margin: 10px 0;
 padding: 15px 15px 15px 35px;
}
#sc_xuk {
 border: 2px dashed rgb(41, 170, 227);
 background-color: rgb(248, 247, 245);
 margin: 10px 0;
 padding: 15px 15px 15px 35px;
}
#sc_lvb {
 margin: 10px 0;
 padding: 10px 15px;
 border: 1px solid #e3e3e3;
 border-left: 2px solid #05B536;
 background: #FFF;
}
#sc_redb {
 margin: 10px 0;
 padding: 10px 15px;
 border: 1px solid #e3e3e3;
 border-left: 2px solid #ED0505;
 background: #FFF;
}
/*彩色文本框结束*/

样式图：