- A+
所属分类：WordPress
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 美化代码：
- /*通知框*/
- #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}
素材下载
蓝奏云：https://pan.lanzou.com/i0f3azi
