• 欢迎访问微视觉网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入微视觉微视觉-影视后期交流
  • 本站全面支持自动充值,目的是更好的服务大家!
  • 本站全面开启SSL服务,请放心使用!
  • 如果您觉得本站对你非常有用,那么赶紧使用Ctrl+D 收藏吧

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

前沿资讯 Jason.w.wei 1年前 (2017-04-12) 868次浏览 已收录 0个评论

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

效果展示

绿色提示框

红色提示框

黄色提示框

灰色提示框

代码实现


一、编辑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;  
}

图标素材:链接:https://eyun.baidu.com/s/3pLoDYK7 密码:laod
三、代码使用:
在文章编辑时插入以下代码即可,注意括号修改下

绿色提示框:{v_notice]输入文字[/v_notice}
红色提示框:{v_error]输入文字[/v_error}
黄色提示框:{v_warn]输入文字[/v_warn}
灰色提示框:{v_tips]输入文字[/v_tips}


微视觉 , 版权所有丨如未注明 , 均为网络收集丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress 短代码:实现文章添加彩色美化框 引用框体特效
喜欢 (5)
[wuwei967@126.com]
分享 (0)

您必须 登录 才能发表评论!