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

  • A+
所属分类:站点建设

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

WordPress教程:丰富编辑

 

改造步骤:

1、复制下面代码粘贴至主题 functions.php 文件中,保存

  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、复制下面代码粘贴至主题 style.css 文件中,保存

单击:展开

  1. #sc_notice {
  2.     color#7da33c;
  3.     background#ecf2d6 url('img/sc_notice.png') -1px -1px no-repeat;
  4.     border1px solid #aac66d;
  5.     overflowhidden;
  6.     margin10px 0;
  7.     padding15px 15px 15px 35px;
  8. }
  9. #sc_warn {
  10.     color#ad9948;
  11.     background#fff4b9 url('img/sc_warn.png') -1px -1px no-repeat;
  12.     border1px solid #eac946;
  13.     overflowhidden;
  14.     margin10px 0;
  15.     padding15px 15px 15px 35px;
  16. }
  17. #sc_error {
  18.     color#c66;
  19.     background#ffecea url('img/sc_error.png') -1px -1px no-repeat;
  20.     border1px solid #ebb1b1;
  21.     overflowhidden;
  22.     margin10px 0;
  23.     padding15px 15px 15px 35px;
  24. }
  25. #sc_tips {
  26.     color#777;
  27.     background#eaeaea url('img/sc_tips.png') -1px -1px no-repeat;
  28.     border1px solid #ccc;
  29.     overflowhidden;
  30.     margin10px 0;
  31.     padding15px 15px 15px 35px;
  32. }
  33. #sc_blue {
  34.     color#1ba1e2;
  35.     background: rgba(27, 161, 226, 0.26) url('img/sc_blue.png') -1px -1px no-repeat;
  36.     border1px solid #1ba1e2;
  37.     overflowhidden;
  38.     margin10px 0;
  39.     padding15px 15px 15px 35px;
  40. }
  41. #sc_black {
  42.     border-width1px 4px 4px 1px;
  43.     border-stylesolid;
  44.     border-color#3e3e3e;
  45.     margin10px 0;
  46.     padding15px 15px 15px 35px;
  47. }
  48. #sc_xuk {
  49.     border2px dashed rgb(41, 170, 227);
  50.     background-colorrgb(248, 247, 245);
  51.     margin10px 0;
  52.     padding15px 15px 15px 35px;
  53. }
  54. #sc_lvb {
  55.     margin10px 0;
  56.     padding10px 15px;
  57.     border1px solid #e3e3e3;
  58.     border-left2px solid #05B536;
  59.     background#FFF;
  60. }
  61. #sc_redb {
  62.     margin10px 0;
  63.     padding10px 15px;
  64.     border1px solid #e3e3e3;
  65.     border-left2px solid #ED0505;
  66.     background#FFF;
  67. }
  68. #sc_organge {
  69.     margin10px 0;
  70.     padding10px 15px;
  71.     border1px solid #e3e3e3;
  72.     border-left2px solid #EC8006;
  73.     background#FFF;
  74. }

最后可以在编辑界面 => 文本 中,看到添加的代码。

WordPress教程:丰富编辑

 

有兴趣的可以在下面,保存我收集的几个图标。改下大小和名字,覆盖就可以了。

WordPress教程:丰富编辑

 

提示框展示:

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

 

 

下载信息 “块引用(blockquote)” 图标 WordPress 531 KB
下载地址 查看演示
  • 扫扫关注公众号
  • weinxin
  • 扫扫体验小程序
  • weinxin
亦枫

发表评论

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

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

    • avatar en 0

      666!很好

        • avatar 亦枫 4

          @en 谢谢,有帮助就好

        • avatar 趣知识 0

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

          • avatar 西枫里博客 1

            很棒~~