WordPress短代码:实现文章添加彩色美化框

之前在多个博客都看到这种彩色美化框,感觉好看,而且把文章分得很有层次感,体验方便,所以闲鱼也用上了,效果不错哦。代码样式是在微饭看到的,独乐了不如众乐乐,这里也分享给大家。

效果展示

绿色美化框

红色美化框

灰色美化框

黄色美化框

代码实现

①、编辑WordPress主题目录下的functions.php文件,添加如下代码并保存:

  1. /*短代码信息框 开始*/  
  2. function toz($atts$content=null){   
  3.     return '<div id="sc_notice">'.$content.'</div>';   
  4. }    
  5. add_shortcode('v_notice','toz');   
  6.    
  7. function toa($atts$content=null){   
  8.     return '<div id="sc_error">'.$content.'</div>';   
  9. }    
  10. add_shortcode('v_error','toa');   
  11.    
  12. function toc($atts$content=null){   
  13.     return '<div id="sc_warn">'.$content.'</div>';   
  14. }    
  15. add_shortcode('v_warn','toc');   
  16.    
  17. function tob($atts$content=null){   
  18.     return '<div id="sc_tips">'.$content.'</div>';   
  19. }    
  20. add_shortcode('v_tips','tob');   
  21. /* 短代码信息框 完毕*/  

②、 CSS美化代码:

  1. /*通知框*/  
  2. #sc_notice { color#7da33cbackground#ecf2d6 url('img/sc_notice.png') -1px -1px no-repeatborder1px solid #aac66doverflowhiddenmargin10px 0; padding15px 15px 15px 35px; }  
  3. #sc_warn, .post-password-form { color#ad9948background#fff4b9 url('img/sc_warn.png') -1px -1px no-repeatborder1px solid #eac946overflowhiddenmargin10px 0; padding15px 15px 15px 35px; }  
  4. #sc_error { color#c66background#ffecea url('img/sc_error.png') -1px -1px no-repeatborder1px solid #ebb1b1overflowhiddenmargin10px 0; padding15px 15px 15px 35px; }  
  5. #sc_tips {  
  6. color#777;  
  7. background#eaeaea url('img/sc_tips.png') -1px -1px no-repeat;  
  8. border1px solid #ccc;  
  9. overflowhidden;  
  10. margin10px 0;  
  11. padding15px 15px 15px 35px;  
  12. }  

PS:记得将代码中的图标素材地址改为你保存的目录地址。(素材在文章最后下载)

代码使用

在文章编辑时插入以下代码即可,注意括号修改下

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

素材下载

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:22   其中:访客  14   博主  8

    • 大侠 大侠 0 来自天朝的朋友 谷歌浏览器 Windows 10 河南省郑州市 联通

      博主 你这文章内容外的 鼠标滑动显示虚线框是怎么实现的

        • 闲鱼 闲鱼 【博主】 来自天朝的朋友 Safari浏览器 iPad OS 10_2 like Mac OS X) AppleWebKit 湖南省常德市 联通

          @大侠 右键,看css

        • 99八十一 99八十一 4 来自天朝的朋友 Safari浏览器 iPad OS 9_3 like Mac OS X 四川省成都市 电信

          相当不错,像博主说的,用了后文章页面既美观又有层次感。有人说用起来不太方便,集成到后台编辑器就好了 :mrgreen:

            • 闲鱼 闲鱼 【博主】 来自天朝的朋友 Safari浏览器 iPad OS 10_2 like Mac OS X 湖南省岳阳市 移动

              @99八十一 因为网上很多集成的方法,写的时候也就没补充这一块,找度娘就好啦

            • IGK小高 IGK小高 0 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

              不错,想问下博主,例如这篇文章的“效果展示”左侧的红色竖线以及下划长线怎么实现的,这样排版很不错

                • 闲鱼 闲鱼 【博主】 来自天朝的朋友 Safari浏览器 iPad OS 10_2 like Mac OS X 湖南省岳阳市 移动

                  @IGK小高 简单的c s s,你可以扒一下

                • 初夏 初夏 1 来自天朝的朋友 火狐浏览器 Windows 10 广东省东莞市 电信

                  短代码记不住呀

                  • 夏沐熙 夏沐熙 0 来自天朝的朋友 谷歌浏览器 Windows 10 大连理工大学 西山生活区20舍

                    非常有用!博主,请问素材解压密码是什么呀?

                      • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 Windows 7 湖南省常德市 电信

                        @夏沐熙 就是本站的网址www.macrr.com

                      • 蒸汽回收机 蒸汽回收机 0 来自天朝的朋友 谷歌浏览器 Windows 7 山东省泰安市 联通

                        学习了,非常有用,欢迎回访交流。
                        蒸汽回收机,欢迎回访交流:http://www.tatengyang.com

                        http://www.tahtld.com http://www.sdtengyang.cn

                        • 时刻业余兼职网 时刻业余兼职网 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省开封市 移动

                          这个美好很不错啊

                          • 明月登楼 明月登楼 6 来自天朝的朋友 谷歌浏览器 Windows 10 河南省南阳市 电信

                            最近喜欢上了CSS美化代码收藏了!

                            • 老七 老七 0 来自天朝的朋友 谷歌浏览器 Windows 10 江苏省苏州市 电信

                              站长能否分享下此评论框?

                                • 闲鱼 闲鱼 【博主】 来自天朝的朋友 QQ浏览器 iPhone iPhone OS 9_1 like Mac OS X) AppleWebKit 湖南省常德市 联通

                                  @老七 这个是主题自带的

                                • 我爱动感单车网 我爱动感单车网 2 来自天朝的朋友 谷歌浏览器 Windows XP 广西桂林市 电信

                                  效果挺不错的!

                                  • 成航先森 成航先森 4 来自天朝的朋友 谷歌浏览器 Windows 8.1 四川省成都市 电信

                                    这个不错

                                    • vultr vultr 0 来自天朝的朋友 火狐浏览器 Windows 10 江苏省苏州市 电信

                                      这个功能不错,适合有重要备注提示的内容使用。

                                        • 闲鱼 闲鱼 【博主】 来自天朝的朋友 搜狗浏览器 Windows 7 河南省洛阳市 联通

                                          @vultr 是的

                                        • 纯洁博客 纯洁博客 3 来自天朝的朋友 火狐浏览器 Windows 10 四川省成都市 电信

                                          666,就是缺这个东西啊

                                            • 闲鱼 闲鱼 【博主】 来自天朝的朋友 搜狗浏览器 Windows 7 河南省洛阳市 联通

                                              @纯洁博客 分享即是美德

                                            • 憧憬Licoy 憧憬Licoy 4 来自天朝的朋友 火狐浏览器 Windows 10 四川省成都市 电信

                                              你的滑动解锁貌似错位了

                                                • 闲鱼 闲鱼 【博主】 来自天朝的朋友 搜狗浏览器 Windows 7 河南省洛阳市 联通

                                                  @憧憬Licoy :???: 不清楚