WordPress教程：丰富编辑 “块引用(blockquote)”

站点建设825.8K字数 3022阅读10分4秒阅读模式

对于wordpress编辑自带的 "块引用(blockquote)" ，还是满喜欢使用的，只不过样式丑了点，改成下面看着舒服多了。本来想有空丰富下样式，一拖就是几个月了。正好今天逛贴吧看到有个引子，所以来水一笔小站内容

WordPress教程：丰富编辑 “块引用(blockquote)”文章源自亦枫博客-https://yflad.cn/1741.html

 文章源自亦枫博客-https://yflad.cn/1741.html

改造步骤：

1、复制下面代码粘贴至主题 [code]functions.php[/code] 文件中，保存文章源自亦枫博客-https://yflad.cn/1741.html

  1. //块引用(blockquote)
  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_error', '红框', '<div id="sc_error">红色危险框</div>\n', "" );
  7.   QTags.addButton( 'v_warn', '黄框', '<div id="sc_warn">黄色警告框</div>\n', "" );
  8.   QTags.addButton( 'v_blue', '蓝框', '<div id="sc_blue">蓝色下载框</div>\n', "" );
  9.   QTags.addButton( 'v_notice', '绿框', '<div id="sc_notice">绿色提示框</div>\n', "" );
  10.   QTags.addButton( 'v_tips', '灰框', '<div id="sc_tips">灰色公告框</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.   QTags.addButton( 'v_orange', '橙边', '<div id="sc_orange">橙边提示框</div>\n', "" );
  16.   function bolo_QTnextpage_arg1() {
  17.       }
  18. </script>
  19. <?php
  20. }

2、复制下面代码粘贴至主题 [code]style.css[/code] 文件中，保存文章源自亦枫博客-https://yflad.cn/1741.html

单击：

展开收缩
文章源自亦枫博客-https://yflad.cn/1741.html
  1. #sc_notice {
  2.     color: #7da33c;
  3.     background: #ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
  4.     border: 1px solid #aac66d;
  5.     overflow: hidden;
  6.     margin: 10px 0;
  7.     padding: 15px 15px 15px 35px;
  8. }
  10. #sc_warn {
  11.     color: #ad9948;
  12.     background: #fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
  13.     border: 1px solid #eac946;
  14.     overflow: hidden;
  15.     margin: 10px 0;
  16.     padding: 15px 15px 15px 35px;
  17. }
  19. #sc_error {
  20.     color: #c66;
  21.     background: #ffecea url('img/sc_error.png') -1px -1px no-repeat;
  22.     border: 1px solid #ebb1b1;
  23.     overflow: hidden;
  24.     margin: 10px 0;
  25.     padding: 15px 15px 15px 35px;
  26. }
  28. #sc_tips {
  29.     color: #777;
  30.     background: #eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
  31.     border: 1px solid #ccc;
  32.     overflow: hidden;
  33.     margin: 10px 0;
  34.     padding: 15px 15px 15px 35px;
  35. }
  37. #sc_blue {
  38.     color: #1ba1e2;
  39.     background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
  40.     border: 1px solid #1ba1e2;
  41.     overflow: hidden;
  42.     margin: 10px 0;
  43.     padding: 15px 15px 15px 35px;
  44. }
  46. #sc_black {
  47.     border-width: 1px 4px 4px 1px;
  48.     border-style: solid;
  49.     border-color: #3e3e3e;
  50.     margin: 10px 0;
  51.     padding: 15px 15px 15px 35px;
  52. }
  54. #sc_xuk {
  55.     border: 2px dashed rgb(41, 170, 227);
  56.     background-color: rgb(248, 247, 245);
  57.     margin: 10px 0;
  58.     padding: 15px 15px 15px 35px;
  59. }
  61. #sc_lvb {
  62.     margin: 10px 0;
  63.     padding: 10px 15px;
  64.     border: 1px solid #e3e3e3;
  65.     border-left: 2px solid #05B536;
  66.     background: #FFF;
  67. }
  69. #sc_redb {
  70.     margin: 10px 0;
  71.     padding: 10px 15px;
  72.     border: 1px solid #e3e3e3;
  73.     border-left: 2px solid #ED0505;
  74.     background: #FFF;
  75. }
  77. #sc_organge {
  78.     margin: 10px 0;
  79.     padding: 10px 15px;
  80.     border: 1px solid #e3e3e3;
  81.     border-left: 2px solid #EC8006;
  82.     background: #FFF;
  83. }

文章源自亦枫博客-https://yflad.cn/1741.html

最后可以在编辑界面 => 文本 中，看到添加的代码。文章源自亦枫博客-https://yflad.cn/1741.html

WordPress教程：丰富编辑 “块引用(blockquote)”文章源自亦枫博客-https://yflad.cn/1741.html

 文章源自亦枫博客-https://yflad.cn/1741.html

有兴趣的可以在下面，保存我收集的几个图标。改下大小和名字，覆盖就可以了。文章源自亦枫博客-https://yflad.cn/1741.html

WordPress教程：丰富编辑 “块引用(blockquote)”文章源自亦枫博客-https://yflad.cn/1741.html

 文章源自亦枫博客-https://yflad.cn/1741.html

提示框展示：

红色危险框
黄色警告框
蓝色下载框
绿色提示框
灰色公告框
黑色提示框
虚线提示框
绿边提示框
红边提示框

 文章源自亦枫博客-https://yflad.cn/1741.html

 文章源自亦枫博客-https://yflad.cn/1741.html

下载信息 “块引用(blockquote)” 图标 WordPress 531 KB
最近更新2019-5-11
下载地址 查看演示
文章源自亦枫博客-https://yflad.cn/1741.html文章源自亦枫博客-https://yflad.cn/1741.html
继续阅读
扫扫关注公众号
weinxin
我的微信
扫扫体验小程序
weinxin
我的公众号
亦枫
  • 本文由 发表于 2018年2月8日 01:12:39
评论  8  访客  5  作者  3
    • 软件分享
      软件分享 1
      广东省东莞市 4F
      回复

      感谢分享，谢谢站长！！@绿软吧

      • en
        en 0
        广西 3F
        回复

        666!很好

        • 趣知识
          趣知识 0
          陕西省西安市 2F
          回复

          我那可爱的wp，更新不了，郁闷

          • 西枫里博客
            西枫里博客 1
            浙江省嘉兴市 1F
            回复

            很棒~~

          匿名

          发表评论

          匿名网友 填写信息

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

          确定