Note: 因为后来不再使用这个主题,内容仅供参考 orz。

@良心发现的主题Oneiro,据自称是"折腾html5的即兴之作",里面使用了大量的html新特性,里面有很多实验性的内容。一般情况下,作为在前端凑活过,希望付更多精力在后端的我,会无视掉这个主题才对,但实在太漂亮了,真的很不错。

于是下载过来主题,各种粗暴的修改了一堆设定后,就直接丢小站上上线了。之前一些修改都是属于“我喜欢这样”这种类型的,今天做了一些对白璧微瑕的修改。主要记录的是对评论部分的一些完善。

调回js控制“回复”

良心对评论的回复设置为flat样式,相比于逐渐流行的嵌套版本看起来似乎更和谐一些 ,而且如果做修改,我这个CSS苦手加审美天生缺陷的显然无法做的更好。所以flat格式保持。但问题是,在原有的设计中,a reply b的样子是,b在几层楼上,a在后面@一下上面的b,而且这个@还没有链接。这导致评论的交互就很有问题。而且,原作中虽然@了一下上面,但是comments的数据结构在后台也没有显示出其中的关系。所以以后如果修改主题,改为嵌套格式,这期间的一些对话组织就会很不理想。

检查后台代码,可以看到,这样的结构:

遍历comments list的时候,作者给每个comment item加上了"回复"的超链接,这个超链接调用了这样一个 js function

function to_reply(commentID,author) {
  var nNd='@'+author+':';
  ...
  var myField = document.getElementById('comment');
  ...
  if (document.selection) {
    sel = document.selection.createRange();
    sel.text = nNd;
    myField.focus();
  }
}

其实就是做了三件事情,找到comment的form,给它的textarea添加个内容,焦点定位过去。

根据需求,第一个修改就是给这个"添加点内容"加点料。因为commentID已经到手,所以直接修改nNd的值就可以。

前面第二行修改为

var nNd='<a href=\'#comment-'+commentID+'\'>@'+author+' </a>';

这样,每个评论@的对方看起来就有力多了,点击超链接可以直接到被评论的楼层去了。

之前我是直接把它修改为发一个post,然后用WP自带的方法解决的,显然这是不合适的。

评论的嵌套

wordpress的评论表单大致是如下这样的:

mysql> show columns from wp_comments;
+----------------------+---------------------+------+-----+---------------------+----------------+
| Field                | Type                | Null | Key | Default             | Extra          |
+----------------------+---------------------+------+-----+---------------------+----------------+
| comment_ID           | bigint(20) unsigned | NO   | PRI | NULL                | auto_increment |
| comment_post_ID      | bigint(20) unsigned | NO   | MUL | 0                   |                |
| comment_author       | tinytext            | NO   |     | NULL                |                |
| comment_author_email | varchar(100)        | NO   |     |                     |                |
| comment_author_url   | varchar(200)        | NO   |     |                     |                |
| comment_author_IP    | varchar(100)        | NO   |     |                     |                |
| comment_date         | datetime            | NO   |     | 0000-00-00 00:00:00 |                |
| comment_date_gmt     | datetime            | NO   | MUL | 0000-00-00 00:00:00 |                |
| comment_content      | text                | NO   |     | NULL                |                |
| comment_karma        | int(11)             | NO   |     | 0                   |                |
| comment_approved     | varchar(20)         | NO   | MUL | 1                   |                |
| comment_agent        | varchar(255)        | NO   |     |                     |                |
| comment_type         | varchar(20)         | NO   |     |                     |                |
| comment_parent       | bigint(20) unsigned | NO   | MUL | 0                   |                |
| user_id              | bigint(20) unsigned | NO   |     | 0                   |                |
| comment_mail_notify  | tinyint(4)          | NO   |     | 0                   |                |
+----------------------+---------------------+------+-----+---------------------+----------------+

其中comment_parent这个column其实就是被评论人的id,如果没有人,则为0。

良心的这款主题使用的是Willin Kan做的comments-ajax.php,检查这个php,可以看到,

$comment_parent = isset($_POST['comment_parent']) ? absint($_POST['comment_parent']) : 0;

所以只要ajax提交这个form中有就comment_parent可以了这个变量就可以了。

而wp的表单被提交的form中就含有comment_parent这个element

<input type='hidden' name='comment_parent' id='comment_parent' value='0' />

所以只要修改在刚才to_reply的function中修改掉它的值即可。

在to_reply的function中加一句

document.getElementById('comment_parent').value = commentID;

一句话解决问题。

回复邮件提醒

之前使用的是WP Mail SMTP和Mail to Commenter,WP Mail SMTP是一直都在使用并且很好用的,Mail to Commenter是主题制作人良心官方推荐的。但是效果并不如人意。后来修改为Configure SMTP + Comment Reply Notification 的组合,测试了几次发现表现不错。虽然不知道未来是否能保持稳定,但至少目前已经可以完美收工了。

Categories: Code

Yu

Ideals are like the stars: we never reach them, but like the mariners of the sea, we chart our course by them.

12 Comments

tiandi · January 17, 2014 at 10:34

Google Chrome 27.0.1453.110 Google Chrome 27.0.1453.110 Windows 7 Windows 7

wp有个函数wp_mail()

    yu · January 18, 2014 at 00:02

    Google Chrome 32.0.1700.72 Google Chrome 32.0.1700.72 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

    @tiandi 我找找它的实现.如果我没有猜错的话,WP Mail SMTP这些插件就是为了在调用wp_mail()这个函数的时候,启用当前配置的smtp服务器,账号和口令的

tiandi · January 16, 2014 at 15:24

Google Chrome 27.0.1453.110 Google Chrome 27.0.1453.110 Windows 7 Windows 7

服务器不支持wp_mail???

    yu · January 17, 2014 at 08:59

    Google Chrome 32.0.1700.72 Google Chrome 32.0.1700.72 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

    @tiandi 你是说自带的mail?那样就不可以用smtp了说

欧美头像贴吧 · January 6, 2014 at 10:18

Google Chrome 21.0.1180.89 Google Chrome 21.0.1180.89 Windows XP Windows XP

htm5优越性啊。。

reizhi · January 2, 2014 at 09:26

Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows XP Windows XP

听说可以评论了,我来试试

    yu · January 2, 2014 at 15:40

    Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 GNU/Linux x64 GNU/Linux x64

    @reizhi 的确恢复了,不过为啥后台见一个杀一个呢。。。太冷酷的说

Leniy · December 16, 2013 at 09:52

Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows 7 Windows 7

Configure SMTP + Leniy Tweak飘过

    yu · December 16, 2013 at 12:11

    Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

    @Leniy 果然各种leniy tweak , 我使用过一段时间,表示不会用 TAT
    还有个关键问题:我的回复你邮件能收到么?

      Leniy · December 16, 2013 at 12:56

      rekonq rekonq GNU/Linux x64 GNU/Linux x64

      @Yu Jing 不会用?启用就可以了,没什么设置的。
      我没登录邮箱,不清楚。等一会儿我看看去

      Leniy · December 16, 2013 at 13:21

      Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows 7 Windows 7

      @Yu Jing 邮件收到了

        yu · December 16, 2013 at 13:30

        Google Chrome 31.0.1650.63 Google Chrome 31.0.1650.63 Windows 8.1 x64 Edition Windows 8.1 x64 Edition

        @Leniy 多谢

Leave a Reply to yu Cancel reply

Your email address will not be published. Required fields are marked *