温馨提示:这篇文章已超过747天没有更新,请注意相关的内容是否还可用!
博客中大多数人都在用WordPress,主要是因为自由度高及插件丰富,是很多店长建站的首选软件,今天就跟大家分享一下文章中带彩色文本框的教程,废话不多说先看效果
现在跟大家分享下教程:
一、编辑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'); /* 短代码信息框 完毕*/
二、CSS美化代码:
添加到CSS中,或者直接在在主题设置——自定义代码——自定义CSS样式中加入
/*通知框*/ #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; }
三、代码使用:
在文章编辑时插入以下代码即可,注意括号修改下(“{“修改为”[“)
绿色提示框:{v_notice]输入文字[/v_notice}
红色提示框:{v_error]输入文字[/v_error}
黄色提示框:{v_warn]输入文字[/v_warn}
灰色提示框:{v_tips]输入文字[/v_tips}
好了按照以上操作大家试试看效果吧。
还没有评论,来说两句吧...