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

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

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

注意:这是转载文章,代码引用自畅想资源博客,有少量修改,原博文链接: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)