[站长经验]为WordPress后台编辑器添加些常用框与按键

为WordPress后台编辑器添加些常用框与按键。

今天在Wordpress的优质主题B2售后群中，发现了一份“WordPress后台编辑器添加些常用框与按键”的教程。

正好，无言还在发愁文章直接放链接不美观，这份教程刚好解决了无言的难题。

本教程来自：纸工场

演示效果

创建文本框 代码写入 functions.php

/*彩色文本框 闪光按钮 开始 */
//绿框
function toc($atts, $content=null){
return '<div id="sc_warn">'.$content.'</div>';
}
add_shortcode('v_warn','toc');
//蓝框
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_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 sg_blue($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
) , $atts));
return '<a class="sgbtn_blue" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_blue', 'sg_blue');

/*红色闪光按钮*/
function sg_red($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
) , $atts));
return '<a class="sgbtn_red" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_red', 'sg_red');

/*橙色闪光按钮*/
function sg_orange($atts, $content = null) {
extract(shortcode_atts(array(
"href" => 'http://'
) , $atts));
return '<a class="sgbtn_orange" href="' . $href . '" target="_blank" rel="nofollow">' . $content . '</a>';
}
add_shortcode('sgbtn_orange', 'sg_orange');
/*彩色文本框 闪光按钮 结束 */

短代码按键 代码写入 functions.php

PS:实际安装时，请将按钮处的s gbtn中的空格去除

function appthemes_add_quicktagss() {
?>
<script type="text/javascript">
//提示框
QTags.addButton( 'v_warn', '□ 黄框', '<div id="sc_warn">黄色提示框</div>n', "" );
QTags.addButton( 'v_blue', '□ 蓝框', '<div id="sc_blue">蓝色提示框</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( 'sgbtn_blue', '■ 蓝闪', "[s gbtn_blue href='']蓝色按钮", "[/sgbtn_blue]re" );
QTags.addButton( 'sgbtn_red', '■ 红闪', "[s gbtn_red href='']红色按钮", "[/sgbtn_red]r" );
QTags.addButton( 'sgbtn_orange', '■ 黄闪', "[s gbtn_orange href='']黄色按钮", "[/sgbtn_orange]r" );
</script>
<?php

CSS样式，写入style.css

/*彩色文本框样式 开始 */
/*黄色*/
#sc_warn {
color: #ad9948;
background: #fff4b9 url('https://paper.tv/pic/sc_notice.png') -1px -1px no-repeat;
border: 1px solid #eac946;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
/*蓝色*/
#sc_blue {
color: #1ba1e2;
background: rgba(27, 161, 226, 0.26) url('https://paper.tv/pic/sc_blue.png') -1px -1px no-repeat;
border: 1px solid #1ba1e2;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
/*虚线*/
#sc_xuk {
border: 1px 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;
}
/*彩色文本框样式 结束 */

/*闪光按钮样式 开始*/
[class*=sgbtn]
{display:inline-block;text-indent:0;position:relative;color:#fff;padding:0 10px 0 10px;min-width:160px;height:38px;line-height:38px;opacity:.8;text-align:center;font-family:Ubuntu,sans-serif;font-size:15px;text-decoration:none;border-radius:2px;overflow:hidden;-webkit-transition:all .15s ease-in;transition:all .15s ease-in}[class*=sgbtn]:before{content:'';position:absolute;background:#fff;width:25px;height:50px;top:0;left:-45px;opacity:.3;-webkit-transition:all .25s ease-out;transition:all .25s ease-out;-webkit-transform:skewX(-25deg);transform:skewX(-25deg)}[class*=sgbtn]:hover{opacity:.65}[class*=sgbtn]:hover:before{width:45px;left:205px}
.sgbtn_blue{color:#fff;background:#1cb2f5}.sgbtn_red{color:#fff;background:#C00}
.sgbtn_orange{color:#fff;background:#F90}a[class*=sgbtn]{color:#fff}a[class*=sgbtn]:hover{color:#fff}
/*闪光按钮样式 结束 */

代码下载