WordPress编辑器添加彩色边框短代码

  • A+
所属分类:WordPress

对于文章的编辑有时候需要强调一些比较重要的内容就需要用到不同的颜色来突出其重要性,下面收集了一些不同颜色的强调内容的彩色框短代码,用在页面上显示的效果真的不错,看一看。

效果演示

WordPress编辑器添加彩色边框短代码

使用方式

1、将下列的代码添加到主题的function文件下

  1. //添加HTML编辑器自定义快捷标签按钮
  2. add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
  3. function bolo_after_wp_tiny_mce($mce_settings) {
  4. ?>
  5.     <script type="text/javascript">
  6. QTags.addButton( 'v_notice', '绿框', '<div id="sc_notice">绿色提示框</div>\n', "" );
  7. QTags.addButton( 'v_error', '红框', '<div id="sc_error">红色提示框</div>\n', "" );
  8. QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色提示框</div>\n', "" );
  9. QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色提示框</div>\n', "" );
  10. QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色提示框</div>\n', "" );
  11. QTags.addButton( 'v_black', '黑框', '<div id="sc_black">黑色提示框</div>\n', "" );
  12. QTags.addButton( 'v_xuk', '虚线', '<div id="sc_xuk">虚线提示框</div>\n', "" );
  13. QTags.addButton( 'v_lvb', '绿边', '<div id="sc_lvb">绿边提示框</div>\n', "" );
  14. QTags.addButton( 'v_redb', '红边', '<div id="sc_redb">红边提示框</div>\n', "" );
  15. function bolo_QTnextpage_arg1() {
  16.   }
  17.     </script>
  18. <?php
  19. }

PS:记得将代码中的图标素材地址改为你保存的目录地址。(素材在文章最后下载)
2、将以下css代码添加到style.css文件中,保存。

  1. /*彩色信息框*/
  2. #sc_notice {color#7da33c;background#ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;border1px solid #aac66d;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  3. #sc_warn {color#ad9948;background#fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;border1px solid #eac946;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  4. #sc_error {color#c66;background#ffecea url('img/sc_error.png') -1px -1px no-repeat;border1px solid #ebb1b1;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  5. #sc_tips {color#777;background#eaeaea url('img/sc_tips.png') -1px -1px no-repeat;border1px solid #ccc;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  6. #sc_blue {color#1ba1e2;background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;border1px solid #1ba1e2;overflowhidden;margin10px 0;padding15px 15px 15px 35px;}
  7. #sc_black {border-width1px 4px 4px 1px;border-stylesolid;border-color#3e3e3e;margin10px 0;padding15px 15px 15px 35px;}
  8. #sc_xuk {border2px dashed rgb(41, 170, 227);background-colorrgb(248, 247, 245);margin10px 0;padding15px 15px 15px 35px;}
  9. #sc_lvb {margin10px 0;padding10px 15px;border1px solid #e3e3e3;border-left2px solid #05B536;background#FFF;}
  10. #sc_redb {margin10px 0;padding10px 15px;border1px solid #e3e3e3;border-left2px solid #ED0505;background#FFF;}

实现效果

WordPress编辑器添加彩色边框短代码

素材下载

在编辑器中使用就很方便了,将需要强调使用的文字写在对应的块里就可以实现效果了。

代码的使用是灵活,其中的代码都可以根据自己的需求再去进行修改,以上的内容都只是一种参考,有时间和有兴趣可以去定制自己喜欢的风格。

weinxin
我的微信
分享和发布网站源码、免费软件下载和网站搭建技术教程,致力创造一个高质量网络资源教程的分享平台。

发表评论

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