wordpress評論處就簡單的用戶名郵箱及網址的表單了,如果我們希望有表情或更多的工具我們可以參考下面方法來實現.

wordpress評論框僅僅只有昵稱、郵箱、站點和評論內容的話,會不會顯得太簡單了？當然追求簡潔的人來說,可能覺得站點都有點多余,然后,大叔要說的是給wordpress評論處添加實用工具,豐富起我們的評論框吧.

直接給教程吧,comments.php加入按鈕.

1. <div id="smiley">     
2.     <?php   
3.     include(TEMPLATEPATH . '/smiley.php');      //你主?引用表情的文件   
4.     /* 如果你使用「Custom Smilies」外?歟???h除上面那行，?K且去除下面?行的注? */   
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('??入?D片地址', 'http://');   
75.             if (a) {   
76.                 addEditor(g, '<img src="' + a + '" />', '')   
77.             }   
78.         },   
79.         sign: function() {   
80.             addEditor(g, '今天?到啦！?r?：' + 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.         }  //Vevb.com 
138.     };   
139.     window['SIMPALED'] = {};   
140.     window['SIMPALED']['Editor'] = h   
141. });   

調用這個JS:

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

那么,在去看看你們的評論框吧,是不是碉堡了,恩,可能樣式還需要修改修改,才能符合每個人不同的風格.