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. function toa($atts$content=null){
  7.     return '<div id="sc_error">'.$content.'</div>';
  8. }
  9. add_shortcode('v_error','toa');
  10. function toc($atts$content=null){
  11.     return '<div id="sc_warn">'.$content.'</div>';
  12. }
  13. add_shortcode('v_warn','toc');
  14. function tob($atts$content=null){
  15.     return '<div id="sc_tips">'.$content.'</div>';
  16. }
  17. add_shortcode('v_tips','tob');
  18. /* 短代码信息框 完毕*/

二、CSS美化代码:
添加到CSS中,或者直接在在主题设置——自定义代码——自定义CSS样式中加入

  1. color: #777;
  2. background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
  3. border: 1px solid #ccc;
  4. overflow: hidden;
  5. margin: 10px 0;
  6. padding: 15px 15px 15px 35px;
  7. }
[url href=https://wp.cvps.top/%E5%9B%BE%E6%A0%87%E7%B4%A0%E6%9D%90.zip]图标素材下载[/url]

三、代码使用:

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

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