当前位置:首页 > CMS教程 > WordPress > 列表

给wordpress评论处添加表情及工具

发布:smiling 来源: PHP粉丝网  添加日期:2015-10-15 15:51:35 浏览: 评论:0 

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-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-index99999;   
  13. }   
  14. #editor_tools a{   
  15.     color#777;   
  16.     display: inline-block;   
  17.     padding0 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-index99999;   
  31.     padding2px 0px 2px 2px;   
  32. }   
  33. #fontcolor a{   
  34.     display: inline-block;   
  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.        
  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.         }  //phpfensi.com 
  138.     };   
  139.     window['SIMPALED'] = {};   
  140.     window['SIMPALED']['Editor'] = h   
  141. });   

调用这个JS:

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

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

Tags: wordpress表情 wordpress评论

分享到: