WordPress美化:短代码实现提示框功能

微饭网官方微信

提示框演示

[v_notice]测试一下通知栏目
第二行[/v_notice]
[v_error]测试一下错误栏目
第二行[/v_error]
[v_warn]测试一下警告栏目
第二行[/v_warn]
[v_tips]测试一下提示栏目
第二行[/v_tips]

实现代码

在 模板函数 (functions.php) 适当位置插入

/*
* 短代码信息框美化 微Fan'天空
* http://www.weeiy.com/duan-tips.html
*/
/*短代码信息框 开始*/
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'); 
/* 短代码信息框 完毕*/

 CSS美化代码:

/*通知框*/
#sc_notice { color: #7da33c; background: #ecf2d6 url('images/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('images/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('images/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('images/sc_tips.png') -1px -1px no-repeat;
border: 1px solid #ccc;
overflow: hidden;
margin: 10px 0;
padding: 15px 15px 15px 35px;
}

 图片素材(上传到你所用主题的 images 目录,如果没有可以创建一个):

写文章时,插入短代码:

通知提示框:[v_notice]输入文字[/v_notice]
错误提示框:[v_error]输入文字[/v_error]
警告提示框:[v_warn]输入文字[/v_warn]
灰色提示框:[v_tips]输入文字[/v_tips]

 

Css样式转载自:Cuelog

发表评论

相关文章