WordPress 短代码:实现文章添加彩色美化框引用框体特效

2017-04-10 16:35 • 代码审计 • 阅读 5675

以前用的主题都自带有简码，也在多个博客都看到这种彩色美化框，感觉好看，而且把文章分得很有层次感、突出内容等…

现在老D把它分享给大家

Table of Contents

效果展示

[v_notice]
绿色提示框
[/v_notice]
[v_error]
红色提示框
[/v_error]
[v_warn]
黄色提示框
[/v_warn]
[v_tips]
灰色提示框
[/v_tips]

代码实现

一、编辑WordPress主题目录下的functions.php文件，添加如下代码并保存:

[cc lang=”php”]
/*短代码信息框开始*/
function toz($atts, $content=null){
return ‘

‘.$content.’

‘;
}
add_shortcode(‘v_notice’,’toz’);

function toa($atts, $content=null){
return ‘

‘.$content.’

‘;
}
add_shortcode(‘v_error’,’toa’);

function toc($atts, $content=null){
return ‘

‘.$content.’

‘;
}
add_shortcode(‘v_warn’,’toc’);

function tob($atts, $content=null){
return ‘

‘.$content.’

‘;
}
add_shortcode(‘v_tips’,’tob’);
/* 短代码信息框完毕*/
[/cc]

二、CSS美化代码：
添加到CSS中，或者直接在在主题设置——自定义代码——自定义CSS样式中加入

[cc lang=”php”]
/*通知框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url(‘img/sc_notice.png’) -1px -1px no-repeat; border: 1px solid #aac66d; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }
#sc_warn, .post-password-form { color: #ad9948; background: #fff4b9 url(‘img/sc_warn.png’) -1px -1px no-repeat; border: 1px solid #eac946; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }
#sc_error { color: #c66; background: #ffecea url(‘img/sc_error.png’) -1px -1px no-repeat; border: 1px solid #ebb1b1; overflow: hidden; margin: 10px 0; padding: 15px 15px 15px 35px; }
#sc_tips {
color: #777;
background: #eaeaea url(‘img/sc_tips.png’) -1px -1px no-repeat;
border: 1px solid #ccc;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}
[/cc]

图标素材：链接：https://eyun.baidu.com/s/3pLoDYK7 密码：laod

三、代码使用：

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