您好！欢迎来到模板下载吧！本站资源24小时自动发货，请放心选购，一次付费，终身下载，售后请提交工单！
提交工单 快速入门 在线PS 发布资源赚 站长工具箱 领取优惠券荐

模板下载吧

模板下载吧 五周年

给wordpress评论处添加实用工具

半岛未凉 2019-02-09 快速入门 2458 已收录 本文共8698个字，预计阅读需要22分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

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>    

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

温馨提示：本文最后更新于2019年3月19日，已超过 2 年没有更新，如果文章内容或图片资源失效，请留言反馈，模板下载吧会及时处理，谢谢！

上一篇:

下一篇:

给wordpress评论处添加实用工具：等您坐沙发呢！
大牛，别默默的看了，快来点评一下吧！:)。

您必须登录后才能发表评论哦！:)

站内登录 QQ登录 微博登录
wordpress自适应高级图片shejigh主题

相关推荐

Hi, 如果你对这款模板有疑问，可以跟我联系哦！

联系作者

模板下载吧，累计帮助1000+用户成功建站，为草根创业提供助力！

立刻开启你的建站之旅
  • 微信公众号
  • 模板下载吧
  • 官方QQ群
  • 模版下载吧（群1）
  • 模版下载吧（群2）
  • 模版下载吧（群3）

模板下载吧精品模板

周一至周五 9:00-23:00
（其他时间勿扰）

在线咨询
Copyright ©2014-2020 模板下载吧 阿里云 本站安全防护由创宇云安全提供。
-查询158 耗时1.102 内存 34.75MB
商务合作: vip#mbxzb.com(#换成@)
现在加入模板下载吧，注册一个账号 或
账号登录
QQ登录
';

  • 模板下载吧拥有海量网站模板及源码，站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源，帮您更快的完成网站建设。

  • 每日更新模板资源，每日精品推荐，及时获取最新模板资源流行去向。

  • 完美的售后服务，帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏，建立自己的资源库，并与朋友分享。