全新的评论区体验

最近又折腾上了 WordPress 模板，把很久没有动过的评论输入框做了些修葺，看上去有些不一样了 😮

对以前评论过的人隐藏资料输入部分

这个功能在很多博客都可以看到，让常客不再重复看到资料输入框，需要的时候点击就可以展开修改。另外预先显示评论者自己的全球阿凡达，用回形针别在右上角。下面欢迎来自天鹅海的组合大城小爱里的，小爱同学 做群众演员：

新的评论输入框设计

js 隐藏代码参考了 享总的文章，另外多了个享总没有提到的细节，展开和收起按钮按下之后会把焦点放到相应的输入框内，也就是多执行一个 .focus(); 以下是“更改”按钮 onclick 时执行的 jQuery 脚本：

$('#author_info').slideDown('fast');
$('#author').focus();
$('#show_author_info').hide();
$('#hide_author_info').show();

如果访客 cookies 中有曾经评论过的 email 信息，则预先显示头像。在 comments.php 中合适的地方先判断是否存在 email, 如果有则输出一个头像。

<?php if ( $comment_author_email ) {
    echo '<a href="...">' . get_avatar(
    $comment_author_email, 40 ) . '</a>';
} ?>

为了看上去生动些，头像被旋转了 10 度，这是用 CSS 实现的，参考我那篇关于 CSS3 动画的文章。这有一些浏览器的局限性，比如 Chrome Windows 一直有个 bug, 在图像被旋转后，边缘不能反锯齿；Firefox 则一直不能对无 padding 的图像进行圆角，除非图像处在背景中。于是我把 Firefox 下链接的 border 圆角也一并拿掉了。

动态的输入框浮动

GluedIdeas Subtle 主题原来是有输入框浮动的，但使用的是 position: fixed; 现在改成 jQuery 来做，在页面滚动的时候浮动是动态的了，顺便还兼容了 IE. 代码来自 CSS-Tricks.

可展开的表情按钮栏

表情按钮栏

表情按钮收起来了，放在大输入框内，点击则展开。同样是由 jQuery 来执行的，按钮按下的时候做三件事情：焦点放到大输入框里去；用 jQuery .toggle() 脚本来展开或收起表情按钮；按钮本身切换一个 class, 在笑脸和关闭叉叉之间切换。

$('#comment').focus();
$('#smilies_toolbar').toggle('fast');
$('#toggle-smilies').toggleClass('close');

新的评论回复样式

回复评论

回复别人的评论时出现一个黄色的提示条，类似于博客界出名的 绿条禅，同时有个小箭头指向被回复的评论。

评论回复是基于枫叶的插件 WordPress Thread Comment, 经过了枫叶和我的一些修改，目前这样已经完全符合我的需要了。喜欢这个插件的朋友不妨去插件页进行捐助，支持开发。

评论列表

左侧评论列表也有一些小的变化，比如回复会比较小一些，编号字体换成了 Georgia, 以前我没有放上每条评论的链接，现在也放在了编号上，只不过颜色还是灰色的。

最后

如果出现显示问题可能需要刷新一下，避免使用浏览器缓存，最近的改动挺多的。另外如果您发现滚动很卡，可以回复我说一下浏览器和电脑配置 😛

更新

本文发布 3 小时，评论数达到 98 条，当然主要是几个朋友在疯狂灌水啦，除了我自己之外差不多就是：ELL Jimmy Xu Sunny lisker, 大家都在盖楼──往地下室盖。

WordPress Thread Comment 这个插件是限制回复层数的，但仅仅是在超过层数的时候不输出回复按钮，而数据发往服务器并不验证。之前在 @terryxxy （上面的 Sunny）博客上我就在说，改动很简单，只需要 Firebug, 或者 Safari, Chrome 上类似的自带调试工具。找到评论输入框下面用来发送相关数据的两个 <input type=”hidden”>:

<p>
    <input type="hidden" id="comment_reply_ID"
    name="comment_reply_ID" value="0" />
    <input type="hidden" id="comment_reply_dp"
    name="comment_reply_dp" value="0" />
</p>

在 value 里填入想要回复的评论 ID 和深度 dp 就可以了。这也是按了回复按钮之后会通过 javascript 修改的两个数值。这样就可以无限回复下去了。你猜最后回复到了地下多少层？B31! 以前我只在回复前标一个 “Re”, 今天为了大家盖楼方便，把地下楼层编号 B2 B3 也输出了 👿

然后新的问题出现了，每层回复都会在左边缩进，比如 margin-left: 20px; 算算地下 31 层得多少，早就撑破了。锲而不舍的 Jimmy Xu 同学不光一直往下破，而且还在截图 😮

于是呢，我在插件设置页加入了一点判断，当楼层数 $deep > 14 的时候多输出一个 class=”min-width”, 然后让它 margin-left: 0; 效果是在地下 14 层之后不再缩进。但 Jimmy 同学 觉得不满意，最后我的方案：

<?php echo ' style="margin-left: ' . ceil(30/sqrt($deep)) . 'px; "'; ?>

进行了 margin-left = 30除以(楼层数开平方)再取整，第一层回复 30px, 第四层 15px, 到第 25 层，margin-left 就只有 6px 了。于是呢，从线性变为弧线，看看最后的效果：

另外下面是 @terryxxy 在 70 条评论的时候的截图，点击查看完整全图 https://img.ly/z8O

相关文章

最新文章

更多 »

热门标签

Firefox Gmail Google Greasemonkey WordPress 创意 博客 地图 手机 扩展 美化 设计 黑莓

最新评论

  • fisio 可不，Google Reader 都去世十年了… Google Reader 的分享和效率
  • 轻重 天哪！今天整理Evernote，发现这条2010年的剪藏笔记，点击连接，原网站还在！12年了，中文互联网早已面目全非！ Google Reader 的分享和效率
  • 小波 重新改博客，看看以前的wp小伙伴的博客，发现绝大部分都关了，没想到你的还在，只是停在11年了 我为什么爱 Twitter
  • 心灵博客 当年有这个效果已经很不错哦 diy 山寨投影家庭影院
  • fisio 可不咋地！您也是老司机了 我为什么爱 Twitter

随机文章


发表您的评论

评论将回复给

😀🙂😯😁🙁😄😆😝😜👍🌈☕💖🎂

目前有 221 条评论

              2. 我google 了一下你的后花园。。。还后花园呢。。。明明是秘密花园。。。都有密码了。

                外加这个密码让我想到。。。http://yoursunny.com/

                                                                    1. 蜀黍。这个要根据年龄。和性别的不同加以区分。。外加我是拿英镑的。。蜀黍。。你不能亏待我的。 (；′⌒`)

  5. 报告一个chrome下面的bug，评论框移动过后，就一直看不到“发表评论”的按钮。
    不知道别人有没有碰到，还是确实不知道chrome。

      1. 是的，谢谢反馈，我也有时候遇到，那是页面在加载的时候滚动造成的 js offset 计算错误，刷新一般可以解决 8D

  29. 不知道是不是bug呢？
    在chrome下面，一直往网页最下边滑动，评论填表区也自动跟着下滑，就会出现一大片空白~~ 😛

    1. 嗯，这种事情会在两种情况下出现：

      窗口高度不够
      浮动框定位错误，不是固定在顶上数20px 而是从窗口中部开始

      第二个情况是js对窗口已滚动的距离计算错误，目前也没有什么好的解决办法，不过一般可以刷新解决 🙂

  61. 老肥能提供一份你的主题给我嘛。我对你博客的评论制作很感兴趣，想学学怎么制作出来的。可以的话，提供一份给我吧。实在不行的话，发一份评论模板与函数模板给我也可以，只是想研究一下你的模板制作。

    可以的话，发到我的邮箱：zqjilove@qq.com

    非常感谢了

    1. 博主你好 有空帮我看看我站里改的有没有不对的地方，指点我一下！特别是评论这一块。谢谢 忘记给地址了：http://zhuangweb.com/

  98. 博主，怎么把评论框搞得浮动的呀。学习来了。求教呀，是不是按照这个教程，可以修改别的模板吗。谢谢了，急等回复哟 😛 👍

  102. 可爱的网站，像你的用心致敬，一个bug：邮箱不填会弹出对话框里的提示，接着弹出wordpress的提示，而且提示是英文的。