Oneiro 主题调试记录：评论区域的优化和邮件插件的更换

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 的组合，测试了几次发现表现不错。虽然不知道未来是否能保持稳定，但至少目前已经可以完美收工了。