给wordpress评论处添加实用工具

wordpress评论框仅仅只有昵称、邮箱、站点和评论内容的话,会不会显得太简单了?当然追求简洁的人来说,可能觉得站点都有点多余,然后,大叔要说的是给wordpress评论处添加实用工具,丰富起我们的评论框吧!
20150620095041

直接给教程吧,comments.php加入按钮

  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>

style.css内加入样式表:

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

增加一个js,例comments.js,期内代码如下:

  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

  1. <script src=“<?php bloginfo(‘template_directory’); ?>/js/comments.js”></script>

那么,在去看看你们的评论框吧,是不是碉堡了,恩,可能样式还需要修改修改,才能符合每个人不同的风格!

点赞

发表评论