【WordPress 教程】WordPress文章编辑器增加彩色边框代码

2018年12月13日18:51:03 3 2,789
摘要

在很多博客都看到这种彩色美化框,非常好看,而且把文章分得很有层次感,体验大方,站长的博客也用上了,效果不错哦,这里也分享给大家。

效果展示:

文字
文字
文字
文字
文字

输入文字

输入文字

输入文字

输入文字

输入文字

使用方法

如何实现上面的编辑器添加这些彩色框插入标签按钮?

1.将以下代码添加到主题目录的function.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_black', '黑框', '<blockquote id="sc_black">输入文字</blockquote>\n', "" );
  12. QTags.addButton( 'v_xuk', '虚线', '<blockquote id="sc_xuk">输入文字</blockquote>\n', "" );
  13. QTags.addButton( 'v_lvb', '绿边', '<blockquote id="sc_lvb">输入文字</blockquote>\n', "" );
  14. QTags.addButton( 'v_redb', '红边', '<blockquote id="sc_redb">输入文字</blockquote>\n', "" );
  15. QTags.addButton( 'v_organge', '橙边', '<blockquote id="sc_organge">输入文字</blockquote>\n', "" );
  16. </script>
  17. <?php
  18. }

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

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

修改上面CSS里面的5个图片URL地址url('img/sc_error.png')

下载后把图标上传到主题目录下面的img文件夹就可以了,至此,你刷新下页面,就可以看到编辑器文本模式有这些彩色框标签添加按钮了。

文件下载 资源名称:图标素材 应用平台:WordPress 资源大小:2.90KB
下载密码:发表评论并刷新可见!
下载地址
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

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

目前评论:3   其中:访客  3   博主  0

    • 点点滴滴 点点滴滴 0

      看看看

      • 天空是黑的 天空是黑的 0

        学习看看

        • 赵斌自媒体 赵斌自媒体 2

          学习学习