以前用的主题都自带有简码，也在多个博客都看到这种彩色美化框，感觉好看，而且把文章分得很有层次感、突出内容等... 分享给大家
效果展示
绿色提示框
红色提示框
黄色提示框
灰色提示框
代码实现
一、编辑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样式中加入
- 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;
- }
[url href=https://wp.cvps.top/%E5%9B%BE%E6%A0%87%E7%B4%A0%E6%9D%90.zip]图标素材下载[/url]
三、代码使用：
在文章编辑时插入以下代码即可，注意括号修改下
- 绿色提示框：{v_notice]输入文字[/v_notice}
- 红色提示框：{v_error]输入文字[/v_error}
- 黄色提示框：{v_warn]输入文字[/v_warn}
- 灰色提示框：{v_tips]输入文字[/v_tips}
公告 ： 本站提供的源码、模板、插件等等其他资源，不包含技术服务请大家谅解。赞助本站VIP会员免费提供技术服务以及远程协助 。
说明： 教程版权归原作者所有,本站只是负责搜集整理，不承担任何技术及版权问题。在本站下载任何教程仅提供学习参考，不得用于商业用途，请在下载后在24小时内删除。
须知： 本网站资源来源于网络收集，如有侵权，请联系站长进行删除处理。分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
声明：本站提供的教程（文章）均为网上搜集或本站原创，如果该程序涉及或侵害到您的版权可联系我们进行处理。