给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>

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

点赞

发表评论

: 北京pk10开奖结果 北京pk10开奖官网 北京赛车开奖历史 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖记录 北京赛车pk10开奖结果 北京pk10历史开奖记录 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖结果 秒速赛车开奖直播 北京pk10历史开奖记录 北京赛车pk10开奖记录 北京赛车pk10开奖结果 pk10开奖记录 pk10开奖结果 北京赛车开奖历史 北京赛车开奖记录 北京赛车开奖结果 北京pk10历史开奖记录 江苏快三开奖结果 江苏快三走势图表 江苏快三遗漏 江苏快三开奖结果走势 北京赛车pk10开奖结果 北京赛车pk10开奖记录 北京pk10历史开奖记录 秒速赛车开奖结果 秒速赛车开奖记录 秒速赛车历史记录 秒速赛车开奖直播 秒速飞艇开奖记录 秒速飞艇历史记录 秒速飞艇开奖结果 秒速飞艇开奖直播 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 pc蛋蛋预测 pc蛋蛋幸运28 北京赛车开奖结果 北京赛车开奖记录 pk10开奖结果 澳门百家乐 澳门百家乐网址 澳门百家乐官方网站 百家乐官网 澳门网上百家乐 一肖中特免费公开资料 白小姐中特网 香港马会资料大全 北京赛车开奖结果 北京赛车开奖记录 北京赛车历史记录 北京赛车开奖 幸运飞艇开奖记录 幸运飞艇历史记录 幸运飞艇开奖结果 幸运飞艇开奖直播