Loading
0

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;
}
/*彩色文本框结束*/

样式图:

文章声明:
1、本站文章来源于互联网,仅供学习交流使用,严禁用于商业用途,因此造成的一切法律后果自行承担。
2、本站不对文章内容的完整性和安全性负责,请自行辨别,如发现有问题,请及时联系我们进行处理。
3、若文章中有侵权或不适当内容,请留言告知我们,本站会第一时间进行处理。