为WordPress增加Ctrl+Enter快捷回复功能

在 2009-04-07 发布于 网站相关 下以来已有12,684人读过本文 | 26条评论 发表评论

可能是朋友们在使用QQ进行聊天中已经养成了这样的习惯,在论坛和博客上进行评论时也想要这样的方便。国内目前的主流论坛程序,如Discuz!,都内置了这样的快捷回复;但遗憾的是,来自海外本地化不够彻底的WordPress程序却仍然不支持这一功能。

不过这并没有什么,实现这样的功能只需在WordPress主题中对应的文件里添加上一段JavaScript代码。不过因为不同的主题可能需要修改不同的地方,本文中,月夜以常见的几种情况来逐一为你做下介绍,希望能为朋友们,尤其是新手,提供一些帮助。

1.“提交评论”链接没有显示在按钮上的主题

有些主题中,“提交评论”的链接只是几个文字,没有显示在按钮上,比如大名鼎鼎的Pixeled主题,其“Leave comment(提交评论)”链接的显示方式如下:

在这种方式下,为主题添加Ctrl+Enter支持最为容易。首先在主题文件夹下comments.php文件的末端找到形如

</form>
</div>
<?php endif; ?>

的代码部分(注意:可能有些主题缺少三行中的一行,但通常会有其中两行),在如上代码的<?php endif; ?>之前(其实,这个位置很随意,也可以放到</form>之前,等等)添加上如下JavaScript代码:

<script type=”text/javascript”>
document.getElementById(“comment”).onkeydown = function (moz_ev)
{
var ev = null;
if (window.event){
ev = window.event;
}else{
ev = moz_ev;
}
if (ev != null && ev.ctrlKey && ev.keyCode == 13)
{
document.getElementById(“submit”).click();
}
}
</script>

随后,继续在comments.php文件中查找如下所示的代码行:

<p><input name=”submit” type=”submit” id=”submit” class=”submitbutton” tabindex=”5″ value=”Leave comment” />

当然,不同的主题可能会有所区别,但大致该行会包含有submit关键词。找到之后,可以看到在value值中是要显示的内容,将其修改为Leave comment(Ctrl+Enter)。接着,我们将comments.php文件保存,这样,我们就为该主题成功添加了Ctrl+Enter回复评论支持。

可以看出,对以不在按钮中的链接形式显示“提交评论”的主题,只需修改comments.php一个文件,即可方便地为我们的主题添加该功能;但对于在按钮上显示链接的主题,就不这么轻松了。

2.在按钮上显示“提交评论”链接的主题

很多主题,为了美观,将提交评论链接显示在了一个按钮上,比如月夜使用的由菠菜提供的默认主题:

如上图,这样的主题在未添加Ctrl+Enter字样时,按钮可能比较短;而添加上之后,按钮可能会被字符撑破,影响美观。所以,为了完整的做好这项工作,一方面,我们需要像1中那样,修改comments.php中的字符,添加JavaScript代码;另一方面,我们还需要修改按钮对应的CSS代码,使其显示美观。

首先按照1中的方法,在comments.php中找到如下代码:

<p id=”but_submit”><input name=”submit” type=”submit” id=”submit” tabindex=”5″ value=”提交评论(Ctrl+Enter)” />

将其中的提交评论修改为提交评论(Ctrl+Enter);接着在文件中的适当位置添加上1中的JavaScript代码,然后保存文件。

随后,我们来修改主题文件夹下style.css文件中与按钮对应的CSS代码,首先根据上面的代码找到but_submit和submit部分:

#but_submit{ margin-left:72px;}
#submit{ width:220px; height:32px; font-size:18px; font-weight:bold; color:#FFFFFF; letter-spacing:3px; border:1px solid #006666; background: url(images/icon.gif) repeat-x -2px -270px;}

接着修改其中控制按钮宽度的参数,如修改width:220px,以使其适合按钮上的字符。当然,有时为了美观,你可能还会修改其他地方,比如月夜就将上面代码中的font-weight:bold; 删掉了,因为粗体显示的英文看起来不太好。修改完成之后,将其保存,这样,我们就成功地为“提交评论”链接显示在按钮上的主题添加了Ctrl+Enter快捷键。

3.iNove等特殊主题

这类特殊主题可能比较多,月夜不可能面面俱到,在此,我们就以iNove为例,来讲述一下如何为iNove主题添加Ctrl+Enter评论回复快捷键。

iNove主题的提交评论链接同样显示在了按钮上:

和1、2中其他主题一样,首先还是在comments.php文件中的适当位置添加JavaScript代码。不过需要说明的是,因为iNove主题使用了语言文件,所以不能直接修改comments.php中如下代码的Submit Comment部分来为按钮添加Ctrl+Enter:

<input name=”submit” type=”submit” id=”submit” class=”button” tabindex=”5″ value=”<?php _e(‘Submit Comment’, ‘inove’); ?>” />

我们需要修改iNove主题的语言文件,按照前面iNove主题本地化的几点经验(二)中第10部分所述的方法,打开iNove主题文件夹下languages子文件夹中的zh_CN.po文件,将其中的Submit Comment项的对应汉语修改为“提交评论(Ctrl+Enter)”:

修改完毕之后,保存,然后用PO2MO工具,将修改后的po文件编译转换为mo文件,如此,即成功在iNove主题的提交评论按钮上添加了Ctrl+Enter字符。至此,我们成功为iNove主题回复评论添加了快捷键。如果是其他主题,则可能还需要修改CSS文件style.css,以防添加的文字撑破了按钮,但iNove主题的按钮好像打开了按钮宽度自适应文字长度的功能,从而使得我们无需修改CSS文件,也可保持按钮的美观。

在为你详细讲述了为WordPress主题添加Ctrl+Enter快捷回复功能之后,月夜最后还要特别说明一点,在以上所有修改代码文件的过程中,如果添加了汉字,都需要将文件的编码方式修改为UTF-8,不然,在网页中会出现乱码。

好了,今天,月夜通过以上三个例子,为你介绍了为WordPress主题添加Ctrl+Enter快捷回复的三种情况,希望能对朋友们有所帮助;当然,如果你有什么经验,欢迎留言与月夜分享;或者有什么问题,也欢迎留言说明。在此,月夜先谢谢朋友们。

26条评论

  1. 杨董
    2010/10/02 11:06:38

    太复杂了 当初用inove算是失误了

    回复评论

  2. 倡萌
    2010/09/19 21:01:29

    我其好似很需要这样的功能,呵呵,改天自己弄弄,谢谢分享

    回复评论

  3. 326
    2009/09/05 17:55:35

    回复评论

  4. admin
    2009/06/28 15:36:39

    疯了,莫名其妙的感觉啊。
    楼上那个应该是有人冒用帐号吧。

    回复评论

  5. admin
    2009/06/28 15:36:10

    囧rz,你怎么了啊?呵呵。

    回复评论

    wulinfo 说:

    Email被冒用的感觉,是一个问题

    回复评论

评论分页: 1 2

发表评论

您的昵称 *

您的邮箱 *

您的网站