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

20150620095041

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

  1. <div id="smiley">    
  2.     include(TEMPLATEPATH . '/smiley.php');        
  3.       
  4. </div>  
  5. "editor_tools">  
  6.     <div id="editor">  
  7. "javascript:;" id="comment-smiley"><b> 表情</b></a>  
  8.         <a href="javascript:SIMPALED.Editor.strong()"><b> 粗体</b></a>  
  9. "javascript:SIMPALED.Editor.em()"><b> 斜体</b></a>  
  10.         <a href="javascript:;" id="font-color"><b> 颜色</b></a>  
  11. "javascript:SIMPALED.Editor.quote()"><b> 引用</b></a>  
  12.         <a href="javascript:SIMPALED.Editor.ahref()"><b> 链接</b></a>  
  13. "javascript:SIMPALED.Editor.del()"><b> 删除线</b></a>  
  14.         <a href="javascript:SIMPALED.Editor.underline()"><b> 下划线</b></a>  
  15. "javascript:SIMPALED.Editor.code()"><b> 插代码</b></a>  
  16.         <a href="javascript:SIMPALED.Editor.img()"><b> 插图片</b></a>  
  17. </div>  
  18. "padding-top: 10px;"></div>  
  19. <div id="fontcolor">    
  20. "javascript:SIMPALED.Editor.red()" style="background-color: red"></a>  
  21.     <a href="javascript:SIMPALED.Editor.fuchsia()" style="background-color: fuchsia"></a>  
  22. "javascript:SIMPALED.Editor.purple()" style="background-color: purple"></a>  
  23.     <a href="javascript:SIMPALED.Editor.orange()" style="background-color: orange"></a>  
  24. "javascript:SIMPALED.Editor.yellow()" style="background-color: yellow"></a>  
  25.     <a href="javascript:SIMPALED.Editor.gold()" style="background-color: gold"></a>  
  26. "javascript:SIMPALED.Editor.olive()" style="background-color: olive"></a>  
  27.     <a href="javascript:SIMPALED.Editor.lime()" style="background-color: lime"></a>  
  28. "javascript:SIMPALED.Editor.aqua()" style="background-color: aqua"></a>  
  29.     <a href="javascript:SIMPALED.Editor.deepskyblue()" style="background-color: deepskyblue"></a>  
  30. "javascript:SIMPALED.Editor.teal()" style="background-color: teal"></a>  
  31.     <a href="javascript:SIMPALED.Editor.green()" style="background-color: green"></a>  
  32. "javascript:SIMPALED.Editor.blue()" style="background-color: blue"></a>  
  33.     <a href="javascript:SIMPALED.Editor.maroon()" style="background-color: maroon"></a>  
  34. "javascript:SIMPALED.Editor.navy()" style="background-color: navy"></a>  
  35.     <a href="javascript:SIMPALED.Editor.gray()" style="background-color: gray"></a>  
  36. "javascript:SIMPALED.Editor.silver()" style="background-color: silver"></a>  
  37.     <a href="javascript:SIMPALED.Editor.black()" style="background-color: black"></a>    
    1.   
    2. #smiley{  
    3.     padding-bottom: 10px;  
    4. #editor_tools{  
    5. width: 600px;  
    6.     height: 26px;  
    7. line-height: 26px;  
    8.     border: 1px #e0e0e0 solid;  
    9. border-radius: 2px 2px 0 0;  
    10.     overflow: hidden;  
    11. z-index: 99999;  
    12. }  
    13. #editor_tools a{  
    14.     color: #777;  
    15. display: inline-block;  
    16.     padding: 0 8px;  
    17. height: 26px;  
    18.     border-right: 1px solid #ddd;  
    19. #editor_tools a:hover{  
    20. color: #333;  
    21.     text-decoration: none;  
    22. #fontcolor{  
    23. width: 377px;  
    24.     height: 16px;  
    25. line-height: 20px;  
    26.     border: 2px #e0e0e0 solid;  
    27. z-index: 99999;  
    28.     padding: 2px 0px 2px 2px;  
    29. #fontcolor a{  
    30. display: inline-block;  
    31.     height: 16px;  
    32. width: 16px;  
    33. }  

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

  1. jQuery(function(){  
  2. "#smiley").hide(500);  
  3.     jQuery("#comment-smiley").click(function(){  
  4. "#smiley").toggle(500);  
  5.     });  
  6. jQuery(function(){  
  7. "#fontcolor").hide(500);  
  8.     jQuery("#font-color").click(function(){  
  9. "#fontcolor").toggle(500);  
  10.     });  
  11. jQuery(function(){  
  12. "#smiley").hide();  
  13.     jQuery("#comment").click(function(){  
  14. });  
  15. function(){  
  16.     jQuery("#fontcolor").hide();  
  17. "#comment").click(function(){  
  18.     });  
  19. jQuery(function() {  
  20. function addEditor(a, b, c) {  
  21.         if (document.selection) {  
  22.             sel = document.selection.createRange();  
  23.             a.focus()  
  24. else if (a.selectionStart || a.selectionStart == '0') {  
  25.             var d = a.selectionStart;  
  26. var e = a.selectionEnd;  
  27.             var f = e;  
  28.             c ? f += b.length + c.length: f += b.length - e + d;  
  29. if (d == e && c) f -= c.length;  
  30.             a.focus();  
  31.             a.selectionEnd = f  
  32. else {  
  33.             a.value += b + c;  
  34.         }  
  35.       
  36. var myDate = new Date();  
  37.     var mytime=myDate.toLocaleTimeString()  
  38.     var g = document.getElementById('comment') || 0;  
  39. var h = {  
  40.         strong: function() {  
  42.         },  
  43. function() {  
  44.             addEditor(g, '<i>', '</i>')  
  45.         del: function() {  
  47.         },  
  48. function() {  
  49.             addEditor(g, '<u>', '</u>')  
  50.         quote: function() {  
  52.         },  
  53. function() {  
  54.             var a = prompt('請輸入鏈接地址', 'http:  
  55. var b = prompt('請輸入鏈接內容', '');  
  56.             if (a) {  

  57. "' + a + '">' + b + '</a>', '')  

  58.             }  
  59.         img: function() {  
  60. var a = prompt('請輸入圖片地址', 'http:  
  61.             if (a) {  

  62. "' + a + '" />', '')  

  63.             }  
  64.         sign: function() {  

  65. '')  

  66.         },  
  67. function() {  
  68.             addEditor(g, '<pre>', '</pre>')  
  69.         red: function() {  

  70. "color: red">', '</span>')  

  71.         },  
  72. function() {  
  73.             addEditor(g, '<span style="color: fuchsia">', '</span>')  
  74.         purple: function() {  

  75. "color: purple">', '</span>')  

  76.         },  
  77. function() {  
  78.             addEditor(g, '<span style="color: orange">', '</span>')  
  79.         yellow: function() {  

  80. "color: yellow">', '</span>')  

  81.         },  
  82. function() {  
  83.         addEditor(g, '<span style="color: olive">', '</span>')  
  84.         lime: function() {  

  85. "color: lime">', '</span>')  

  86.         },  
  87. function() {  
  88.         addEditor(g, '<span style="color: maroon">', '</span>')  
  89.         aqua: function() {  

  90. "color: aqua">', '</span>')  

  91.         },  
  92. function() {  
  93.           addEditor(g, '<span style="color: teal">', '</span>')  
  94.         green: function() {  

  95. "color: green">', '</span>')  

  96.         },  
  97. function() {  
  98.             addEditor(g, '<span style="color: blue">', '</span>')  
  99.         navy: function() {  

  100. "color: navy">', '</span>')  

  101.         },  
  102. function() {  
  103.             addEditor(g, '<span style="color: gray">', '</span>')  
  104.         deepskyblue: function() {  

  105. "color: deepskyblue">', '</span>')  

  106.         },  
  107. function() {  
  108.             addEditor(g, '<span style="color: gold">', '</span>')  
  109. function() {  
  110.             addEditor(g, '<span style="color: silver">', '</span>')  
  111.         black: function() {  

  112. "color: black">', '</span>')  

  113.         }  
  114.     window['SIMPALED'] = {};  
  116. });  

调用这个 JS

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

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