主机优惠
信息分享

给wordpress增加一些比较实用的短代码

wordpress目前是使用较多的博客建站程序之一,不管是主题、插件,还是各种优化、美化方面的教程还是比较多的,遇到问题也可以通过相关搜索到各种解答。现在小七收集到可以给wordpess增加一些比较实用的短代码,具体代码以及添加方法如下,如果有需求请做好模板数据备份在进行操作,以免出现问题可以快速恢复。

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’)–1px1pxno-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  
}

图像下载地址:图标下载

放在主题下面的img文件中!

说明:代码来源于网络,具体原创未知!

赞(0)
欢迎转载:VPS推荐网 » 给wordpress增加一些比较实用的短代码