博客簿

给wordpress评论处添加实用工具

时间:1个月前   阅读:4551

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

直接给教程吧,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-bottom: 10px;  

  4. }  

  5. #editor_tools{  

  6.     width: 600px;  

  7.     height: 26px;  

  8.     line-height: 26px;  

  9.     border: 1px #e0e0e0 solid;  

  10.     border-radius: 2px 2px 0 0;  

  11.     overflow: hidden;  

  12.     z-index: 99999;  

  13. }  

  14. #editor_tools a{  

  15.     color: #777;  

  16.     display: inline-block;  

  17.     padding: 0 8px;  

  18.     height: 26px;  

  19.     border-right: 1px solid #ddd;  

  20. }  

  21. #editor_tools a:hover{  

  22.     color: #333;  

  23.     text-decoration: none;  

  24. }  

  25. #fontcolor{  

  26.     width: 377px;  

  27.     height: 16px;  

  28.     line-height: 20px;  

  29.     border: 2px #e0e0e0 solid;  

  30.     z-index: 99999;  

  31.     padding: 2px 0px 2px 2px;  

  32. }  

  33. #fontcolor a{  

  34.     display: inline-block;  

  35.     height: 16px;  

  36.     width: 16px;  

  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.       

  46.     var myDate = new Date();  

  47.     var mytime=myDate.toLocaleTimeString()  

  48.       

  49.     var g = document.getElementById('comment') || 0;  

  50.     var h = {  

  51.         strong: function() {  

  52.             addEditor(g, '<b>', '</b>')  

  53.         },  

  54.         em: function() {  

  55.             addEditor(g, '<i>', '</i>')  

  56.         },  

  57.         del: function() {  

  58.             addEditor(g, '<del>', '</del>')  

  59.         },  

  60.         underline: function() {  

  61.             addEditor(g, '<u>', '</u>')  

  62.         },  

  63.         quote: function() {  

  64.             addEditor(g, '<blockquote>', '</blockquote>')  

  65.         },  

  66.         ahref: function() {  

  67.             var a = prompt('請輸入鏈接地址', 'http://');  

  68.             var b = prompt('請輸入鏈接內容', '');  

  69.             if (a) {  

  70.                 addEditor(g, '<a href="' + a + '">' + b + '</a>', '')  

  71.             }  

  72.         },  

  73.         img: function() {  

  74.             var a = prompt('請輸入圖片地址', 'http://');  

  75.             if (a) {  

  76.                 addEditor(g, '<img src="' + a + '" />', '')  

  77.             }  

  78.         },  

  79.         sign: function() {  

  80.             addEditor(g, '今天簽到啦!時間:' + mytime, '')  

  81.         },  

  82.         code: function() {  

  83.             addEditor(g, '<pre>', '</pre>')  

  84.         },  

  85.         red: function() {  

  86.             addEditor(g, '<span style="color: red">', '</span>')  

  87.         },  

  88.         fuchsia: function() {  

  89.             addEditor(g, '<span style="color: fuchsia">', '</span>')  

  90.         },  

  91.         purple: function() {  

  92.         addEditor(g, '<span style="color: purple">', '</span>')  

  93.         },  

  94.         orange: function() {  

  95.             addEditor(g, '<span style="color: orange">', '</span>')  

  96.         },  

  97.         yellow: function() {  

  98.         addEditor(g, '<span style="color: yellow">', '</span>')  

  99.         },  

  100.         olive: function() {  

  101.         addEditor(g, '<span style="color: olive">', '</span>')  

  102.         },  

  103.         lime: function() {  

  104.         addEditor(g, '<span style="color: lime">', '</span>')  

  105.         },  

  106.         maroon: function() {  

  107.         addEditor(g, '<span style="color: maroon">', '</span>')  

  108.         },  

  109.         aqua: function() {  

  110.         addEditor(g, '<span style="color: aqua">', '</span>')  

  111.         },  

  112.         teal: function() {  

  113.           addEditor(g, '<span style="color: teal">', '</span>')  

  114.         },  

  115.         green: function() {  

  116.         addEditor(g, '<span style="color: green">', '</span>')  

  117.         },  

  118.         blue: function() {  

  119.             addEditor(g, '<span style="color: blue">', '</span>')  

  120.         },  

  121.         navy: function() {  

  122.             addEditor(g, '<span style="color: navy">', '</span>')  

  123.         },  

  124.         gray: function() {  

  125.             addEditor(g, '<span style="color: gray">', '</span>')  

  126.         },  

  127.         deepskyblue: function() {  

  128.             addEditor(g, '<span style="color: deepskyblue">', '</span>')  

  129.         },  

  130.         gold: function() {  

  131.             addEditor(g, '<span style="color: gold">', '</span>')  

  132.         },      silver: function() {  

  133.             addEditor(g, '<span style="color: silver">', '</span>')  

  134.         },  

  135.         black: function() {  

  136.             addEditor(g, '<span style="color: black">', '</span>')  

  137.         }  

  138.     };  

  139.     window['SIMPALED'] = {};  

  140.     window['SIMPALED']['Editor'] = h  

  141. });  

调用这个JS

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

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

上一篇:wordpress评论字数限制

下一篇:从SEO角度出发,我们应该禁止搜索引擎对网站分页的抓取

请发表您的评论