WordPress主题美化 文章编辑器增加彩色边框代码

2019年7月21日13:52:54 发表评论 热度133 ℃

纯代码实现WordPress文章编辑器增加彩色边框代码,所有主题通用,效果图如下:

输入文字

输入文字

输入文字

输入文字

输入文字

输入文字

文章编辑器文本页面同时增加相应按钮WordPress主题美化 文章编辑器增加彩色边框代码
如何实现以上效果呢?两段代码搞定

1.将以下代码添加到主题根目录的functions.php里面

  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', '绿框', '<blockquote id="sc_notice">输入文字</blockquote>\n', "" );
  7. QTags.addButton( 'v_error', '红框', '<blockquote id="sc_error">输入文字</blockquote>\n', "" );
  8. QTags.addButton( 'v_warn', '黄框', '<blockquote id="sc_warn">输入文字</blockquote>\n', "" );
  9. QTags.addButton( 'v_tips', '灰框', '<blockquote id="sc_tips">输入文字</blockquote>\n', "" );
  10. QTags.addButton( 'v_blue', '蓝框', '<blockquote id="sc_blue">输入文字</blockquote>\n', "" );
  11. QTags.addButton( 'v_xuk', '虚线', '<blockquote id="sc_xuk">输入文字</blockquote>\n', "" );
  12. </script>
  13. <?php
  14. }

2.添加以下CSS到主题根目录的style.css里

此处为隐藏的内容!
发表评论并刷新,才能查看

大功告成!

资讯猿

发表评论

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