给wordpress增加一些短代码美化框和按钮的方法

1.编辑 WordPress 主题目录下的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');
/* 短代码信息框 完毕*/

2. 将下面的 CSS 代码添加到 style.css 文件中,或者直接在主题的自定义样式中添加

/*彩色信息框*/  
#sc_notice{  
color:#7da33c;  
background:#ecf2d6url(‘img/sc_notice.png’)–1px–1pxno-repeat;  
border:1pxsolid#aac66d;  
overflow:hidden;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_warn{  
color:#ad9948;  
background:#fff4b9url(‘img/sc_warn.png’)–1px–1pxno-repeat;  
border:1pxsolid#eac946;  
overflow:hidden;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_error{  
color:#c66;  
background:#ffeceaurl(‘img/sc_error.png’)–1px–1pxno-repeat;  
border:1pxsolid#ebb1b1;  
overflow:hidden;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_tips{  
color:#777;  
background:#eaeaeaurl(‘img/sc_tips.png’)–1px–1pxno-repeat;  
border:1pxsolid#ccc;  
overflow:hidden;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_blue{  
color:#1ba1e2;  
background:rgba(27,161,226,0.26)url(‘img/sc_blue.png’)–1px–1pxno-repeat;  
border:1pxsolid#1ba1e2;  
overflow:hidden;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_black{  
border-width:1px4px4px1px;  
border-style:solid;  
border-color:#3e3e3e;  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_xuk{  
border:2pxdashedrgb(41,170,227);  
background-color:rgb(248,247,245);  
margin:10px0;  
padding:15px15px15px35px;  
}  
#sc_lvb{  
margin:10px0;  
padding:10px15px;  
border:1pxsolid#e3e3e3;  
border-left:2pxsolid#05B536;  
background:#FFF;  
}  
#sc_redb{  
margin:10px0;  
padding:10px15px;  
border:1pxsolid#e3e3e3;  
border-left:2pxsolid#ED0505;  
background:#FFF;  
}  
#sc_organge{  
margin:10px0;  
padding:10px15px;  
border:1pxsolid#e3e3e3;  
border-left:2pxsolid#EC8006;  
background:#FFF;  
}

使用方法:

在文章编辑时插入以下代码即可,注意修改下括号

{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}

给后台文章文本编辑器添加按钮的方法:

如果添加提示框,每次都填写这么多代码的话,那不就既枯燥又麻烦死!那么怎么解决呢?

最简单的是通过在后台文本编辑器上面加上一些按钮来避免这种重复的输入。

好了,直接给出比较全的代码吧,在functions.php文件中加入以下代码,就可以在后台文本编辑器上面加上下面这些短代码了:

//添加HTML编辑器自定义快捷标签按钮  
add_action(‘after_wp_tiny_mce’,‘bolo_after_wp_tiny_mce’);  
functionbolo_after_wp_tiny_mce($mce_settings){  
?>  
<scripttype=“text/javascript”>  
QTags.addButton(‘v_notice’,‘绿框’,‘<divid=“sc_notice”>绿色提示框</div>n’,“”);  
QTags.addButton(‘v_error’,‘红框’,‘<divid=“sc_error”>红色提示框</div>n’,“”);  
QTags.addButton(‘v_warn’,‘黄框’,‘<divid=“sc_warn”>黄色提示框</div>n’,“”);  
QTags.addButton(‘v_tips’,‘灰框’,‘<divid=“sc_tips”>灰色提示框</div>n’,“”);  
QTags.addButton(‘v_blue’,‘蓝框’,‘<divid=“sc_blue”>蓝色提示框</div>n’,“”);  
QTags.addButton(‘v_black’,‘黑框’,‘<divid=“sc_black”>黑色提示框</div>n’,“”);  
QTags.addButton(‘v_xuk’,‘虚线’,‘<divid=“sc_xuk”>虚线提示框</div>n’,“”);  
QTags.addButton(‘v_lvb’,‘绿边’,‘<divid=“sc_lvb”>绿边提示框</div>n’,“”);  
QTags.addButton(‘v_redb’,‘红边’,‘<divid=“sc_redb”>红边提示框</div>n’,“”);  
QTags.addButton(‘v_orange’,‘橙边’,‘<divid=“sc_orange”>橙边提示框</div>n’,“”);  
functionbolo_QTnextpage_arg1(){  
}  
</script>  
<?php  
}

代码讲解:

  1. QTags.addButton( """" );

四对引号,分别表示按钮的 ID、按钮显示名、点一下输入内容、再点一下关闭内容(最后一对引号为空则一次输入全部内容),n 表示换行;

形象说明:QTags.addButton( ‘ 按钮 ID’, ‘按钮显示名’, ‘点一下输入内容’, ‘点一下关闭内容’ );

可以自定义添加多行 QTags.addButton(", ",", " );增加多个按钮!

图标下载:图标下载

赞(0)
分享到: 更多 (0)
广告位招租了啦!!!快来联系
此处应有广告

评论 抢沙发

评论前必须登录!

 



很高兴本文可以为您带来灵感和帮助!

支付宝扫一扫打赏

微信扫一扫打赏

QQ扫一扫打赏