为wordpress 添加一个“一键签到”快捷回复按钮

相信回复过本博的朋友都有发现,在评论框上部,有一个“签到”按钮。是的,起初是在快乐家园发现的,但由于他提供的评论编辑器本站的用户用的功能并不多,所以我只精简了“签到”功能,我觉得挺好玩的,然后就整合到本站了。

pl001

下面说说方法。

一、请确认你的主题已经加载jquery

如果没有加载,请在你的主题 header.php 或footer.php 文件适当位置加入一下代码

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> 

二、添加html代码到你的主题comments.php中

由于主题问题,请试着放到合适的地方。一般会放在评论框上部。

<div class="post-area">
<div class="comment-editor"><a href="javascript:SIMPALED.Editor.daka()">签到</a> ← 闲打字麻烦?那就一键签到好了。</div>
</div>

三、把以下样式文件加到主题的style.css中

/*################################
### 为wordpress 添加一个“一键签到”快捷回复按钮
### Ac 整理发布
### 2013年11月5日 13:21:42
### http://ikx.me/2429.html
##################################*/

.comment-editor,#smileys {
height:26px;
line-height:26px;
border-bottom:#d8d8d8 1px solid;
border-radius:2px 2px 0 0;
background-color:#fdfdfd;
box-shadow:0 2px 10px #eee,inset 0 -2px 10px #eee;
overflow:hidden
}
.comment-editor a {
font-family:microsoft yahei;
color:#777;
display:inline-block;
padding:0 8px;
height:26px;
border-right:1px solid #ddd
}
.comment-editor a:hover {
color:#333;
background-color:#FFF
}
/*签到结束*/

四、把以下样式文件加到主题的.js文件中

/*################################
### 为wordpress 添加一个“一键签到”快捷回复按钮
### Ac 整理发布
### 2013年11月5日 13:21:42
### http://ikx.me/2429.html
##################################*/
jQuery(document).ready(function($) {

  function addEditor(a, b, c) {
    if (document.selection) {
      a.focus();
      sel = document.selection.createRange();
      c ? sel.text = b + sel.text + c: sel.text = b;
      a.focus()
    } else if (a.selectionStart || a.selectionStart == '0') {
      var d = a.selectionStart;
      var e = a.selectionEnd;
      var f = e;
      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);
      c ? f += b.length + c.length: f += b.length - e + d;
      if (d == e && c) f -= c.length;
      a.focus();
      a.selectionStart = f;
      a.selectionEnd = f
    } else {
      a.value += b + c;
      a.focus()
    }
  }

  var myDate = new Date();
var mytime=myDate.toLocaleTimeString()

  var g = document.getElementById('comment') || 0;
  var h = {
    strong: function() {
      addEditor(g, '<strong>', '</strong>')
    },
    daka: function() {
      addEditor(g, '签到成功!签到时间:' + mytime, ',每日打卡,生活更精彩哦~')
    },

  };
  window['SIMPALED'] = {};
  window['SIMPALED']['Editor'] = h

  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
  ;

  var wait = 15,
  submit_val = $submit.val();

  function isie6() {
    if ($.browser.msie) {
      if ($.browser.version == "6.0") return true;
    }
    return false;
  }

});

为了方便自己以后修改,发文章标记一下。
文章来自:ikx.me



18 Thoughts on “为wordpress 添加一个“一键签到”快捷回复按钮

  1. 今天签到啦!时间:下午7:47:07

  2. 签到成功!签到时间:11:42:05,每日打卡,生活更精彩哦~

  3. 签到成功!签到时间:下午6:52:50,每日打卡,生活更精彩哦~我试用下哈

  4. 没看到按钮啊 ❓

  5. 每日签到,签到时间:下午7:40:38

发表评论

电子邮件地址不会被公开。 必填项已用*标注

文章导航

无觅相关文章插件,快速提升流量

返回顶部