[WordPress][转载]给WordPress评论框添加实用的小工具

2016年1月8日 0 条评论 1.12k 次阅读 2 人点赞

前面说博主修改了下博客的评论功能,这里就来分享下方法吧!

注意:这是转载文章,代码引用自畅想资源博客,有少量修改,原博文链接:http://www.arefly.com/wordpress-comment-tool-bar/

首先让大家看看本博修改后的效果吧:

254

嗯,那个红叉大家不要在意,这是我博客主题自带的两个功能,我没舍得去掉,怕让大家误会所以叉掉了。

上面看效果是不是很不错?下面我来分享下修改方法吧!

 

一、添加框架

1、打开你的主题文件夹下的评论模板(comments.php)

2、在你想要使用此功能的地方加上如下代码(具体粘贴位置还请根据自己评论模板的设置自行选择):

 

  1. <div id="smiley">
  2.  <?php
  3.   include(TEMPLATEPATH . '/smiley.php'); //你主題引用表情的文件
  4.   /* 如果你使用「Custom Smilies」外掛,請刪除上面那行,並且去除下面這行的注釋 */
  5.   //cs_print_smilies();
  6.  ?>
  7. </div>
  8. <div id="editor_tools">
  9.  <div id="editor">
  10.  <a href="javascript:;" id="comment-smiley"><b>表情</b></a>
  11.  <a href="javascript:SIMPALED.Editor.strong()"><b>粗体</b></a>
  12.  <a href="javascript:SIMPALED.Editor.em()"><b>斜体</b></a>
  13.  <a href="javascript:;" id="font-color"><b>颜色</b></a>
  14.  <a href="javascript:SIMPALED.Editor.quote()"><b>引用</b></a>
  15.  <a href="javascript:SIMPALED.Editor.ahref()"><b>链接</b></a>
  16.  <a href="javascript:SIMPALED.Editor.del()"><b>删除线</b></a>
  17.  <a href="javascript:SIMPALED.Editor.underline()"><b>下划线</b></a>
  18.  <a href="javascript:SIMPALED.Editor.code()"><b>插代码</b></a>
  19.  <a href="javascript:SIMPALED.Editor.img()"><b>插图片</b></a>
  20.  </div>
  21. </div>
  22. <div style="padding-top: 10px;"></div>
  23. <div id="fontcolor">
  24.  <a href="javascript:SIMPALED.Editor.red()" style="background-color: red"></a>
  25.  <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>
  26.  <a href="javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>
  27.  <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>
  28.  <a href="javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>
  29.  <a href="javascript:SIMPALED.Editor.gold()" style="background-color: gold"></a>
  30.  <a href="javascript:SIMPALED.Editor.olive()" style="background-color: olive"></a>
  31.  <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>
  32.  <a href="javascript:SIMPALED.Editor.aqua()" style="background-color: aqua"></a>
  33.  <a href="javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a>
  34.  <a href="javascript:SIMPALED.Editor.teal()" style="background-color: teal"></a>
  35.  <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>
  36.  <a href="javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>
  37.  <a href="javascript:SIMPALED.Editor.maroon()" style="background-color: maroon"></a>
  38.  <a href="javascript:SIMPALED.Editor.navy()" style="background-color: navy"></a>
  39.  <a href="javascript:SIMPALED.Editor.gray()" style="background-color: gray"></a>
  40.  <a href="javascript:SIMPALED.Editor.silver()" style="background-color: silver"></a>
  41.  <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>
  42. </div>

注意代码开头部分的/smiley.php这个,它说的表情文件smiley.php是指依照教程(用代码实现)修改WordPress自带表情时产生的文件,它具体所在的路径请根据自己修改时存放的地方修改。比如你的是在你使用的主题所在目录下的include文件夹中,那么你应该把/smiley.php改成/include/smiley.php。

 

二、添加CSS样式

请将以下代码复制到你主题的style.css中:

 

  1. /** 評論工具 **/
  2. #smiley{
  3.   padding-bottom10px;
  4. }
  5. #editor_tools{
  6.   width600px;
  7.   height26px;
  8.   displaytable-header-group;
  9.   line-height26px;
  10.   border1px #e0e0e0 solid;
  11.   border-radius: 2px 2px 0 0;
  12.   z-index: 99999;
  13. }
  14. #editor_tools a{
  15.   color#777;
  16.   padding: 0 8px;
  17.   height26px;
  18.   border-right1px solid #ddd;
  19. }
  20. #editor_tools a:hover{
  21.   color#333;
  22.   text-decorationnone;
  23. }
  24. #fontcolor{
  25.   width377px;
  26.   height16px;
  27.   displaytable-header-group;
  28.   line-height20px;
  29.   border2px #e0e0e0 solid;
  30.   z-index: 99999;
  31.   padding2px 0px 2px 2px;
  32. }
  33. #fontcolor a{
  34.   displayinline-block;
  35.   height16px;
  36.   width16px;
  37. }

PS:这个和原代码有细微不同,有几个地方是我自己乱折腾修改的,也不知道对不对。修改的原因是因为原代码虽然在电脑上体验良好,但是我在手机上看的时候发现工具栏会“越界”,导致你要向左边滑动页面才能看到完整的工具栏,所以我就自己改了下,使它在手机上不会导致横向滚动条的出现,效果如本博手机界面。当然,其实我是什么也不懂的,所以虽然我在自己的博客上试验有效果,但靠不靠谱就不清楚了,如果你担心出问题,可以到原博去看代码。

 

三、添加最重要的JS代码

1、在你的主题目录下新建一个js文件夹(名字随便,建js是为了方便,如果有此文件夹则跳过这步)

2、新建一个js文件,名字随意,只要你记得

3、复制如下代码到该文件中(请不要用系统自带的记事本来操作,以防万一)

代码:

 

  1. jQuery(function(){
  2.  jQuery("#smiley").hide(500);
  3.  jQuery("#comment-smiley").click(function(){
  4.  jQuery("#smiley").toggle(500);
  5.  });
  6. });
  7. jQuery(function(){
  8.  jQuery("#fontcolor").hide(500);
  9.  jQuery("#font-color").click(function(){
  10.  jQuery("#fontcolor").toggle(500);
  11.  });
  12. });
  13. jQuery(function(){
  14.  jQuery("#smiley").hide();
  15.  jQuery("#comment").click(function(){
  16.  });
  17. });
  18. jQuery(function(){
  19.  jQuery("#fontcolor").hide();
  20.  jQuery("#comment").click(function(){
  21.  });
  22. });
  23. jQuery(function() {
  24.   function addEditor(a, b, c) {
  25.   if (document.selection) {
  26.  a.focus();
  27.  sel = document.selection.createRange();
  28.  c ? sel.text = b + sel.text + c: sel.text = b;
  29.  a.focus()
  30.  } else if (a.selectionStart || a.selectionStart == '0') {
  31.   var d = a.selectionStart;
  32.   var e = a.selectionEnd;
  33.   var f = e;
  34.  c ? a.value = a.value.substring(0, d) + b + a.value.substring(d, e) + c + a.value.substring(e, a.value.length) : a.value = a.value.substring(0, d) + b + a.value.substring(e, a.value.length);
  35.  c ? f += b.length + c.length: f += b.length - e + d;
  36.   if (d == e && c) f -= c.length;
  37.  a.focus();
  38.  a.selectionStart = f;
  39.  a.selectionEnd = f
  40.  } else {
  41.  a.value += b + c;
  42.  a.focus()
  43.  }
  44.  }
  45.   var myDate = new Date();
  46.   var mytime=myDate.toLocaleTimeString()
  47.   var g = document.getElementById('comment') || 0;
  48.   var h = {
  49.  strong: function() {
  50.  addEditor(g, '<b>', '</b>')
  51.  },
  52.  em: function() {
  53.  addEditor(g, '<i>', '</i>')
  54.  },
  55.  del: function() {
  56.  addEditor(g, '<del>', '</del>')
  57.  },
  58.  underline: function() {
  59.  addEditor(g, '<u>', '</u>')
  60.  },
  61.  quote: function() {
  62.  addEditor(g, '<blockquote>', '</blockquote>')
  63.  },
  64.  ahref: function() {
  65.   var a = prompt('請輸入鏈接地址', 'http://');
  66.   var b = prompt('請輸入鏈接內容', '');
  67.   if (a) {
  68.  addEditor(g, '<a href="' + a + '">' + b + '</a>', '')
  69.  }
  70.  },
  71.  img: function() {
  72.   var a = prompt('請輸入圖片地址', 'http://');
  73.   if (a) {
  74.  addEditor(g, '<img src="' + a + '" />', '')
  75.  }
  76.  },
  77.  sign: function() {
  78.  addEditor(g, '今天簽到啦!時間:' + mytime, '')
  79.  },
  80.  code: function() {
  81.  addEditor(g, '<pre>', '</pre>')
  82.  },
  83.  red: function() {
  84.  addEditor(g, '<span style="color: red">', '</span>')
  85.  },
  86.  fuchsia: function() {
  87.  addEditor(g, '<span style="color: fuchsia">', '</span>')
  88.  },
  89.  purple: function() {
  90.  addEditor(g, '<span style="color: purple">', '</span>')
  91.  },
  92.  orange: function() {
  93.  addEditor(g, '<span style="color: orange">', '</span>')
  94.  },
  95.  yellow: function() {
  96.  addEditor(g, '<span style="color: yellow">', '</span>')
  97.  },
  98.  olive: function() {
  99.  addEditor(g, '<span style="color: olive">', '</span>')
  100.  },
  101.  lime: function() {
  102.  addEditor(g, '<span style="color: lime">', '</span>')
  103.  },
  104.  maroon: function() {
  105.  addEditor(g, '<span style="color: maroon">', '</span>')
  106.  },
  107.  aqua: function() {
  108.  addEditor(g, '<span style="color: aqua">', '</span>')
  109.  },
  110.  teal: function() {
  111.  addEditor(g, '<span style="color: teal">', '</span>')
  112.  },
  113.  green: function() {
  114.  addEditor(g, '<span style="color: green">', '</span>')
  115.  },
  116.  blue: function() {
  117.  addEditor(g, '<span style="color: blue">', '</span>')
  118.  },
  119.  navy: function() {
  120.  addEditor(g, '<span style="color: navy">', '</span>')
  121.  },
  122.  gray: function() {
  123.  addEditor(g, '<span style="color: gray">', '</span>')
  124.  },
  125.  deepskyblue: function() {
  126.  addEditor(g, '<span style="color: deepskyblue">', '</span>')
  127.  },
  128.  gold: function() {
  129.  addEditor(g, '<span style="color: gold">', '</span>')
  130.  },      silver: function() {
  131.  addEditor(g, '<span style="color: silver">', '</span>')
  132.  },
  133.  black: function() {
  134.  addEditor(g, '<span style="color: black">', '</span>')
  135.  }
  136.  };
  137.  window['SIMPALED'] = {};
  138.  window['SIMPALED']['Editor'] = h
  139. });

复制完记得保存哦!

 

四、引用该JS文件

将以下代码加入到你主题目录下的header.php或footer.php中:

 

  1. <script src="<?php bloginfo('template_directory'); ?>/js/comments.js"></script>

注意上面代码中的文件路径:/js/comments.js,这里要改成你上面建的那个js文件所在路径。

 

OK!到此完成,马上去测试下效果吧!

12点半

Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that.

文章评论(0)