WordPress 的四款酷炫 Ajax 插件

作者:Marco Fioretti

WordPress 可能是最流行的免费软件解决方案,用于发布和管理动态个人网站。它安装简易快捷,拥有大量扩展其功能的插件,并且几乎可以与地球上的所有 Web 托管提供商一起使用。Ajax(Asynchronous JavaScript and XML,异步 JavaScript 和 XML)是一种 Web 技术的混合体,用于构建能够更快、更流畅地响应用户输入的网站。结合 WordPress 和 Ajax 在几分钟内构建一个更灵敏的网站比乍一看要容易得多,但您需要仔细遵循说明以避免一些小陷阱。

本文讨论了四款 Ajax 插件,它们可以使您的基于 WordPress 的网站对访问者更具动态性、更友好和更有趣。唯一的前提条件是您已经拥有一个正常运行的 WordPress 安装(我们使用了 2.1 版本),当然,为了以防万一出现问题,还需要对其进行完整备份。

AjaxWp:提高速度限制

让我们从一个不会生成令人印象深刻的快照,但通过加快导航速度来使您的网站不那么无聊的插件开始。AjaxWp 通过一个相对简单的技巧提高了 WordPress 页面的响应速度;它使用 onclick() JavaScript 函数调用动态替换所有指向您网站其他部分的内部链接。

当访问者点击这些修改后的链接时,他们的浏览器会启动嵌入在 AjaxWp 代码中的脚本。然后,这些脚本会自行在后台请求新页面。与此同时,访问者的浏览器不会变为空白;页眉、页脚、侧边栏——基本上是您网站的每个部分,在当前页面和刚刚请求的页面中都是通用的——仍然完全可读。

要替换的部分,也只有这部分,会逐渐消失,并且新的内容块会在 AjaxWp 脚本准备就绪后立即取代其位置。在此阶段,为了表明它实际上正在执行某些操作,AjaxWp 会在它正在替换的区域叠加一个旋转轮子的动画 GIF。AjaxWp 从旧页面过渡到新页面的动画效果,由 Script.aculo.us 库提供,可以设置为出现、滑动或盲化。

这一切发生的速度取决于互联网连接速度、您的 Web 服务器负载以及访问者计算机的速度。如果出现问题,在可编程超时后,AjaxWp 只会让浏览器以标准模式加载页面。

AjaxWp 依赖于发行版中包含的一些 JavaScript 库。要使用此插件,请从主页下载最新的 tarball 文件,解压缩它,并将它的 JavaScript 文件夹、动画 GIF 和一个名为 ajax-wp.php 的 PHP 文件移动到您的 WordPress 安装中。然后,乐趣就开始了。

AjaxWp 可以以两种模式工作:快速模式,它更易于配置和使用;或优化模式。无论您选择哪种模式,主页和 README 文件都会详细描述安装过程的所有实际步骤,但我在此处总结要点。

在快速模式下,每个 AjaxWp 调用都会从服务器请求一个全新的页面,然后从中提取必须在浏览器窗口中刷新的单个区域。除了上述步骤之外,您只需要在 WordPress 主题的页眉文件中添加几行 PHP 代码即可开始使用快速 AjaxWp。

优化模式更快更高效,因为只有 必须 更改的页面部分才会从服务器请求,并在它们到达时放到浏览器窗口的正确部分。但是,要使此模式工作,您必须创建 AjaxWp 版本的您的主题——也就是说,将在线文档中描述的 PHP 代码片段添加到其每个页面。根据您的主题,这可能需要一些调整才能正确。

无论您设置哪种模式,一旦一切就绪,启用 JavaScript 的浏览器的用户将享受更快或至少更流畅的页面导航。未启用 JavaScript 的用户仍然能够以旧的、预 Ajax 的方式加载和阅读页面。

一些建议:保留所有原始 WordPress 文件的副本,如果您配置了快速 AjaxWp 并决定稍后切换到优化模式,请从这些副本重新开始。如果您在代码中混合或重复安装步骤或 JavaScript 调用,则会发生奇怪的事情。

无论您选择快速模式还是优化模式,都不要忘记花几分钟时间检查 AjaxWp 的配置变量,以使其适应您的口味,更重要的是,适应您的主题和常规 WordPress 设置。两个最重要的选项是 ajax_wp_blog_base_path,它是从您的 Web 服务器根目录到您的 WordPress 安装文件夹的相对路径,以及应正常加载而不是通过 AjaxWp 加载的页面列表 (ajax_wp_ignore_links)。

日历

WordPress 可以毫不费力地按时间顺序发布和存档作者的文章。对于您和您的读者来说,通过主页上的日历跟踪和检索此类文章通常是很自然的。WordPress 确实有一个内置日历,但如图 1 所示的基于 Ajax 的日历更具动态性,使用起来也更令人愉快。安装很简单,但并非没有一些问题。根据代码随附的 README 文件,您必须仅在 WordPress 插件文件夹中解压缩 tarball 文件,在管理页面中激活它,并在 WordPress 主题的 index.php 文件中,在您要放置日历的位置添加这三行代码

<div id="calendar">
<?php get_calendar(); ?>
</div>
Four Cool Ajax Plugins for WordPress

图 1. WordPress 的日历插件

保存文件后,您应该仅在“选项”→“AjaxCal”管理页面中配置插件。实际上,这可能取决于您的主题和 WordPress 版本。例如,您在本文的屏幕截图中看到的日历是通过将 get_calendar() 函数调用(不带开头和结尾的 <div> 标签)放在 sidebar.php 文件的侧边栏 div 元素内而出现的。

日历出现后,转到管理部分中的“选项”→“AjaxCal”页面进行配置。例如,您可以选择如何显示给定日期所有文章的链接,或者使整个日历的外观与网站的其余部分完全不同。除了美观之外,不要忘记根据您的偏好设置未来和草稿文章的显示。然而,日历最重要的选项很可能是“加载 prototype.js”复选框;这是一个 JavaScript 库,没有必要加载两次,以免混淆浏览器。因此,如果您在 PHP 代码中调用日历 之后 您的 WordPress 主题或其他插件已经加载了 prototype.js,请取消选中该框。

人们说了什么?

阅读博客或任何动态网站的乐趣在于能够为每个页面添加评论,或者更常见的是,阅读其他访问者的评论。通常的做法是点击链接到整个页面或其评论部分,但 Ajax 可以帮助加速甚至这项 WordPress 任务。

Inline Comments 插件使特定文章的所有评论在主页中出现或消失,具体取决于每个访问者的偏好。这以通常的 Ajax 方式发生——也就是说,不会冻结浏览器或使整个窗口空白。在您安装并激活此插件后,主页应如图 2 所示。点击“显示评论”链接会加载该文章的所有评论,并使它们在您想要的位置缓慢出现,如图 3 所示。之后,再次点击“隐藏评论”会将页面恢复到原始状态。该插件的优点是,一篇文章的所有评论都只下载一次并缓存在浏览器中。如果访问者隐藏了它们,然后决定再次阅读它们,它们会立即重新出现。评论的显示顺序(最新或最旧优先)可以在“插件”→“Inline Ajax Comments”页面中设置。与日历一样,评论框的 CSS 样式可以与主题的其余部分分开自定义。

Four Cool Ajax Plugins for WordPress

图 2. 此插件添加了“显示评论”链接。

Four Cool Ajax Plugins for WordPress

图 3. 您也可以隐藏评论。

要添加内联评论,请下载插件,将其所有文件放在 WordPress 安装的插件文件夹中,并在 WordPress 插件管理页面中激活此功能。之后,您需要在主题的 index.php 文件中添加两行新代码——一行创建打开或隐藏评论框的链接

<?php ajax_comments_link(); ?>

另一条指令需要放在评论框本身必须出现的位置

<?php ajax_comments_div(); ?>
让我们聊天!

WordPress 和所有其他流行的博客软件包都具有许多专门设计的功能,使作者和读者之间的对话尽可能容易。但是,如果您习惯于即时消息,您可能会认为没有什么比即时消息更适合快速在线对话了。不用担心;无需离开您心爱的 WordPress 主页即可进行此类对话。基于 Ajax 的 Wordspew/Shoutbox 插件为任何 WordPress 网站添加了实时聊天功能。安装可能是本文中描述的所有插件中最简单的:在 WordPress 插件目录中解压缩 tarball 文件,并在您希望它出现的主题部分中使用以下代码行调用 Shoutbox

<?php jal_get_shoutbox(); ?>

图 4 显示了结果。每当有人在“消息”输入字段中写入一些文本时,此时此刻正在访问主页的其他人都会看到它,无需执行任何操作,在 Shoutbox 区域下次刷新自身时,每个人都将能够以相同的方式回答。Shoutbox 用户还可以添加他们的姓名和主页 URL(如果他们选择的话),以及在消息文本中使用表情符号或链接。

Four Cool Ajax Plugins for WordPress

图 4. Shoutbox 让人们无需刷新页面即可聊天。

右侧的滚动条允许新手跟踪整个对话(图 5)。刷新间隔是可编程的。当它过期时,新帖子会以不同的颜色突出显示,然后在同样可编程的间隔后在背景中淡出。

Four Cool Ajax Plugins for WordPress

图 5. 您可以向后滚动以查看以前的聊天消息。

Shoutbox 中的几乎所有其他内容都是可配置的。您可以从“管理”→“Live Shoutbox”页面设置所有选项。此处的屏幕截图显示了原始版本,但您可以更改用户名、文本和所有评论背景的颜色。即使是一行输入区域也可以替换为更大的字段,但这显然会占用更多空间,并可能破坏页面的整体布局。您可能希望尽快禁用的一项 Shoutbox 功能是加载新消息时的声音警报。您不希望您的同事知道您正在浏览器中聊天,对吗?

注重安全的读者会立即发现这里的潜在滥用可能,但 Shoutbox 有两种可配置的机制来防止垃圾邮件发送者用垃圾信息填充它。一种是您可以在其中输入禁用词、URL 和句子的列表的位置(“选项”→“讨论”→“评论审核”)。该软件包包含一个示例词语列表;要添加新词语,只需在列表中的正确位置键入它们即可。尝试使用禁用词语的人将看到如图 6 所示的警报框。使用禁用词语列表的缺点是它需要持续监控和维护。为了避免这种负担,最好在不放弃列表本身的情况下,将 Shoutbox 设置为仅接受注册用户的评论。匿名访问者仍然可以查看正在进行的聊天。

Four Cool Ajax Plugins for WordPress

图 6. 您可以过滤亵渎性语言等内容。

除了英语外,Wordspew Shoutbox 还提供大约十种其他欧洲语言版本。如果您的语言已受支持,只需从插件主页下载相应的 PO-MO 文件,并将它们放在服务器上的 Wordspew 文件夹中。否则,作者欢迎其他语言的本地化版本。

最终提示

Ajax 仍然是一项相对较新的技术。根据您运行的 WordPress 版本、您的配置方式以及您选择的主题,如果您下载本文中描述的所有内容并将其直接放入您的 WordPress 安装中,您可能会遇到内部链接混乱、块错位或类似问题。

这些问题的一个原因是所有这些插件仍在积极开发中这一简单事实。例如,在我们测试的日历版本 (0.8.3) 中,名为 ajaxcalendarscript.php 的源文件中缺少一个 php 标签(肯定是打包前打字错误造成的)。为了使其工作,我们必须将该文件第 89 行的 <? 替换为 <?php。当然,当您阅读本文时,所有插件都将具有更稳定的接口。

另一个原因是,至少在撰写本文时,一些插件与其自己的相同(或不同)版本的某些 JavaScript 库副本打包在一起。这使您不必查找这些库,但也可能会使某些浏览器感到困惑。一次安装一个插件,从您最需要的插件开始,在您确定一切都按您想要的方式工作之前不要继续安装下一个插件,并确保您备份了所有 WordPress 文件。

另一个可以为您避免很多挫败感的技巧,不仅对于这些插件,而且对于任何基于 JavaScript 的 Web 应用程序,始终是在安装和测试阶段保持两个窗口打开。如果您有权访问第一个窗口,它应该显示您的 Web 服务器的错误日志文件的最后几行。如果事情出错是因为某些文件不在预期位置,这将使其显而易见。另一个窗口应该是 Firefox 或 Mozilla 的 JavaScript 控制台,这些浏览器会在其中报告它们在执行嵌入在网页中的代码时遇到的任何问题。

Marco Fioretti 是一位硬件系统工程师,对自由软件作为 EDA 平台以及作为 RULE 项目的现任负责人,作为高效桌面感兴趣。Marco 与家人住在意大利罗马。

加载 Disqus 评论