WordPress3-和-jQuery-全-

WordPress3 和 jQuery（全）

原文：zh.annas-archive.org/md5/5EB3887BDFDDB364C2173BCD8CEFADC8

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

这本易于使用的指南将带领您深入了解创建精致的专业增强功能的方方面面，特别定制以充分利用 WordPress 个人发布平台的优势。它将通过清晰的、逐步的说明，指导您构建几种针对不同类型的假想客户的自定义 jQuery 解决方案，并向您展示如何创建一个 jQuery 和 WordPress 插件。

本书涵盖内容

第一章, 入门：WordPress 和 jQuery...本章向读者介绍了他们需要熟悉的核心基础知识，以便充分利用本书。涵盖了 HTML、CSS、PHP 和 JavaScript 的语法，以及如何识别这些语法的各个部分，还有一份“行业工具”清单，涵盖了他们的代码编辑器、浏览器甚至图像编辑器应具备的功能。本章还详细说明了 CSS、JavaScript 和 jQuery 如何在浏览器中与从 WordPress 站点提供的 HTML 配合使用。

第二章, 在 WordPress 中使用 jQuery...本章详细介绍了如何在 WordPress 中开始使用 jQuery。它涵盖了如何使用脚本 API 正确地包含 jQuery，并专注于 jQuery 的选择器（在 WordPress 中非常重要），以及 jQuery 的顶级功能。

第三章, 深入了解 jQuery 和 WordPress...本章将读者带入更深层次，介绍了 jQuery 可以应用于 WordPress 站点的各种方式：通过 WordPress 主题中的自定义脚本，作为通过主题调用的 jQuery 插件，以及作为应用于 WordPress 插件的自定义 jQuery 脚本或插件！通过 jQuery 影响 WordPress 站点的方法有很多，本章考虑了每种方法的利弊，以便读者能够准确评估自己的项目。本章还向读者介绍了他们的第一个“假想客户”，并介绍了如何创建自己的 jQuery 插件，然后将该 jQuery 插件封装成 WordPress 插件，以便站点管理员可以轻松实施增强功能，而不必知道如何编辑主题。

第四章, 用更少的代码做更多事情: 利用 jQuery 和 WordPress 的插件...你以为你在 第三章 中学到了不少？抓住你的鼠标。你将开始一个小项目，需要你熟悉流行的 jQuery 插件 Colorbox，以及流行的 WordPress 插件 Cforms II，并且将两者与你自己的自定义 jQuery 魔术融合在一起，以制作一些漂亮的事件注册，会让客户大吃一惊。

第五章, 在 WordPress 中使用 jQuery 动画...如果你要使用 jQuery，最好真正充分利用它，这意味着动画。本章介绍了使用 jQuery 的动画函数和快捷方式来创建一些锐利、精确的视觉增强效果，吸引网站用户的注意力，以及创建一个超级流畅的导航增强和一个精彩的旋转幻灯片展示粘性帖子。

第六章, WordPress 和 jQuery 的 UI...现在我们已经掌握了一些动画技巧，我们可以通过使用 jQuery 的 UI 插件来更轻松地进行工作，该插件包括我们在 第五章 中学到的 Easing 和 Color 插件。在本章中，我们还将利用 UI 插件的小部件和事件功能，在我们的 WordPress 站点中创建一些非常有用的界面。

第七章, 使用 jQuery 和 WordPress 进行 AJAX...本章介绍了什么是 AJAX，以及在您的 WordPress 站点中开始使用 AJAX 技术的最佳方法；您将加载来自站点其他页面的 HTML，通过 JSON 获取您的推文和喜爱的 flickr 图片，并且 last but not least，自定义 AJAXing 内置的 WordPress 评论表单。

第八章, 使用 jQuery 和 WordPress 的技巧和诀窍...本章介绍了在 WordPress 中充分利用 jQuery 的顶级技巧和诀窍。大多数这些最佳实践都在整个标题中涵盖，但在本章中，我们将看看它们为什么如此重要，特别是在 WordPress 的环境中如何实现它们。

附录 A，jQuery 和 WordPress 参考指南……将此附录折角，并将其视为您的“备忘单”。一旦您通过本书，为什么要浪费时间来回翻阅，以回忆某个功能的语法及其参数？本书提取了关于 jQuery 和 WordPress 的最重要信息，并将其拆分成易于快速浏览的参考指南，以便您可以轻松找到大多数 jQuery 选择器的语法，提醒自己关于大多数 WordPress 开发所需的顶级 jQuery 函数及其参数，以及有用的 WordPress 模板标记和 API 函数以及其他有用的 WordPress 技巧，如结构化循环和主题模板层次结构。

本书所需材料

• WordPress（2.9.2 或 3.0）

• jQuery 库（1.4.2）

• Web 服务器（本地 WAMP 或 MAMP 安装或由提供商托管）

• 一个 Web 浏览器（Firefox 或更好）

• 一个好的代码或 HTML 编辑器

本书适合谁

本书适用于任何有兴趣在 WordPress 网站中使用 jQuery 的人。假定大多数读者将是具有相当了解 PHP 或 JavaScript 编程并且至少具有 HTML/CSS 开发经验的 WordPress 开发人员，他们想要学习如何快速将 jQuery 应用于他们的 WordPress 项目。

约定

在本书中，您将找到一些区分不同类型信息的文本样式。以下是一些这些样式的示例，以及它们的含义解释。

文本中的代码词如下所示：“我们可以通过使用include指令来包含其他上下文。”

代码块设置如下：

<script type="text/javascript">
jQuery("document").ready(function(){
jQuery("p").css("background-color", "#ff6600");
});
</script>

当我们希望引起您对代码块的特定部分的注意时，相关的行或项目将以粗体显示：

<script type="text/javascript">
jQuery("document").ready(function(){
jQuery("p").css("background-color", "#ff6600");
});
</script>

为了清晰和简洁，本标题中的许多代码示例都是提取的。提取的代码块设置如下：

...
jQuery("p").css("background-color", "#ff6600");
}
...

前后用省略号“…”标记的代码和标记是从完整代码和/或更大代码和标记主体中提取的。请参考可下载的代码包以查看整个作品。

新术语和重要单词以粗体显示。屏幕上看到的单词，例如菜单或对话框中的单词，会出现在文本中，如下所示：“单击下一步按钮将您移到下一个屏幕”。

注意

警告或重要说明以这样的框出现。

注意

提示和技巧显示如下。

第一章：入门：WordPress 和 jQuery

欢迎来到 WordPress 和 jQuery。WordPress 网络发布平台和 jQuery 的 JavaScript 库是当今网络上使用最广泛的两个强大工具之一。将这些工具结合在一起，可以使您的网站的功能和灵活性加倍。这两种技术都易于学习和有趣，可以创造出网络魔法的秘诀。我希望您准备好通过学习 jQuery 如何改善您的 WordPress 开发经验，获得一些有趣和有趣的见解。

在本章中，我们将涵盖以下主题：

• 本书的方法和您应该了解的核心 JavaScript 语言和 WordPress 技能，以便从中获得最大优势

• 您将需要的基本软件工具来启动和运行您的项目

• jQuery 和 WordPress 的基本概述

如果以下任何部分中的任何内容让您感到困惑，您可能需要更多的背景信息和理解，然后才能继续阅读本书。不过，别担心，我会为您指出一些更多信息的优秀来源。

本书的方法

本书介绍了使用 jQuery 与 WordPress 的基本原则和最佳实践。本书不是 JavaScript 和 PHP 编程的介绍，也不是使用 CSS 和 HTML 标记的入门指南。我假设您是 WordPress 网站开发人员和/或 WordPress 主题设计师。也许您只是一个花费足够多时间管理和调试 WordPress 网站的人，以至于您可能符合上述一种或两种角色。不管您如何标记自己，您都在使用 WordPress。WordPress 可以帮助您或您的客户快速简单地发布内容，而您总是在寻找更多、更快、更容易地完成任务的方法。

jQuery 是一个库，可以加速编写自定义 JavaScript 的时间并减少复杂性。我相信您一定知道 JavaScript 对网站有很多用处。它们还可以使网站具有非常酷的功能。虽然我将尽可能深入地介绍 jQuery，但我们不会将 jQuery 视为其他大多数书籍所强调的“重要”的 JavaScript 库实体。相反，我们将把 jQuery 视为一个能够帮助我们更轻松地完成更多工作（是的，用更少的代码）的伟大工具，使用 WordPress。

总结一下：那么，您是 WordPress 用户、开发人员还是设计师？太好了。让我们来看看这个名为 jQuery 的“工具”。它将使您的 WordPress 开发更加轻松，也可能看起来更加美观。准备好开始了吗？

您需要了解的核心基础知识

正如我所提到的，这本书是针对 WordPress 用户、视觉主题设计师和开发人员的，他们希望通过使用 jQuery 来学习如何更好地利用 WordPress。我尽力编写本书，以便明确要求客户端和服务器端脚本编写或编程经验并不是必需的。然而，您将至少会发现，对于给定主题的一般熟悉程度会有所帮助。

无论你的网络开发技能或水平如何，都会通过清晰的、一步一步的说明来引导你。让我们来看看你需要熟悉哪些网络开发技能和 WordPress 知识，以便从本书中获得最大的收益。再次强调，如果你觉得需要更多背景知识，我也会为你指引一些好的资源。

WordPress

首先，你应该已经熟悉了最新、稳定版本的 WordPress。你应该了解如何在网络服务器上或本地计算机上安装和运行 WordPress 的基础知识（特别是因为你需要一个安装来尝试本书中的示例）。不用担心，我会指引你正确的方向，在你的 Mac 或 PC 上获得一个基本的本地 WordPress 安装。此外，许多托管提供商提供简单的一键安装。你需要查看你的托管提供商是否提供 WordPress。我还会指引你到一些其他好的 WordPress 安装资源。让 WordPress 安装和运行通常是使用 WordPress 的最简单的部分。

更深入地说，你需要熟悉 WordPress 管理面板。你需要了解如何向 WordPress 发布系统添加内容以及文章、分类、静态页面和子页面的工作原理。你还需要了解如何使用媒体上传工具向文章和页面添加图片，以及创建图库。最后，理解安装和使用不同主题和插件的基础知识也会有所帮助，虽然在本书中我们也会在一定程度上涵盖这些内容。

即使你将和更有技术的 WordPress 管理员一起工作，你也应该对你正在开发的 WordPress 网站有一个概述，以及项目所需的（如果有的话）主题或附加插件或小部件。如果你的网站确实需要特定的主题或附加插件和小部件，你需要在你的 WordPress 开发安装中准备好这些安装或已经安装好（或者沙盒——一个用于测试和玩耍而不会弄乱现场网站的地方）。

注意

这本书使用哪个版本的 WordPress？

本书重点介绍了 2.8、2.9 和 3.0 RC（在本书写作时的候选版本）中引入的新功能。本书涵盖的所有内容都在 WordPress 2.9.2 和 3.0 RC 中进行了测试和检查。尽管本书的案例研究是使用版本 2.9.2 和 3.0 RC 开发的，但任何更新版本的 WordPress 都应该具有相同的核心功能，使您能够使用这些技术来增强主题和插件与 jQuery。每个新版本的 WordPress 的错误修复和新功能都在WordPress.org上有文档记录。

如果你完全是 WordPress 新手，那么我建议你阅读April Hodge Silver和Hasin Hayder的《WordPress 2.7 完全手册》。

基本编程

无论你了解任何客户端或服务器端语言的编程，都会对你有所帮助，无论是 JavaScript、VBScript、.NET、ASP、PHP、Python、Java、Ruby，你都会做得很好。当然，以下具体的语言也会帮助你。

JavaScript 和 AJAX 技术

OK，你绝对不需要有任何与 AJAX 相关的经验。但如果你对 JavaScript 有一些了解（这就是"AJAX"中的"J"），那么你就已经迈出了很大的一步。特别是，你应该能够理解如何识别 JavaScript 语句的语法和结构。例如：JavaScript 中变量的样子以及如何使用"{ }"（花括号）设置函数或条件的块。你还需要知道如何用";"（分号）正确结束一行 JavaScript 代码。再次强调，你不需要直接的经验，但你应该可以轻松地看一段 JavaScript 代码并理解它是如何设置的。

例如，让我们快速看一下以下代码示例，其中包含了解释性的注释：

<script type="text/javascript"> /*this is an XHTML script tag with the type attribute set to define javascript*/
/*
This is a multi-line Comment.
You can use multi-line comments like this to add instructions or notes about your code.
*/
//This is a single line comment for quick notes
function writeHelloWorld(){ /*this line sets up a function and starts block of code*/
var text1 = "Hello"; //this is a variable called text1
document.write(text1); /*This writes "Hello" to the HTML body via the variable "text1"*/
document.write(" World!"); /*Writes the string " World!" to the HTML body. Note the ";" semi-colons ending each statement above, very important!*/
}// this bracket ends the function block
writeHelloWorld(); /*evokes the function as a statement again, ending with a ";" semi-colon.*/
//this closes the HTML script tag
</script>

如果你能明白给定的代码片段中发生了什么，并且自信地说你可以修改变量而不会破坏脚本，或者改变函数的名称以及它被调用的地方，那么你已经足够了解本书的内容。

当然，你对处理不同类型的信息，比如字符串、整数和数组以及循环和if/else语句等都了解得越多，越好。但同样，仅仅理解一般的语法，现在就足以让你开始使用 jQuery 和这个主题了。

AJAX 实际上并不是一种语言。正如我们将在第七章中所学到的，AJAX with jQuery and WordPress，它只是一组用于使用异步 JavaScript 和 XML 的技术，使用 JavaScript 和 HTTP 请求共同开发高度动态页面的技术。开发者喜欢这种方法，因为它使他们能够创建更像桌面程序而不是标准网页的页面。如果你有兴趣在 WordPress 中使用 AJAX，我们将在第七章中详细介绍如何使用 jQuery 来帮助你使用各种 AJAX 技术。但这并不是使用 jQuery 与 WordPress 利用的必不可少的内容。

注意

如果你是 JavaScript 新手，并希望快速、有趣地入门，我强烈推荐 W3Schools 网站。这个网站是一个很好的资源，可以让你对所有符合 W3C 标准的 Web 技术有所了解。w3schools.com/js/。你也可以了解 AJAX: w3schools.com/ajax/。

PHP

你绝对不必成为 PHP 程序员才能读完这本书，但 WordPress 是用 PHP 构建的，它的主题中使用了大量的 PHP 来实现其魔法！WordPress 插件几乎纯粹是 PHP。想要给 WordPress 主题或插件添加 jQuery 功能，就需要一点 PHP 语法的挑战。

与 JavaScript 一样，如果你至少了解基本的 PHP 语法结构，你在重新输入或复制粘贴 PHP 和 WordPress 模板标签的代码片段时，就会少出错得多，这些代码放在你主题的模板文件中。

PHP 语法与 JavaScript 语法结构类似。PHP 也使用大括号来表示函数、循环和其他条件的代码块。你在 PHP 中的每个语句末尾都需要加上分号，就像在 JavaScript 中一样。主要区别在于，PHP 是通过在<?php ?>标签中包裹代码片段来调用的，这些标签不是 XHTML 标签集的一部分，而 JavaScript 是通过将代码片段放在 XHTML 的<script>标签内来调用的。此外，PHP 中的变量是用"$"（美元）符号表示的，永久地添加到你创建的变量名之前，而不是像var语句一样只在开始时设定。

最大的区别在于，PHP 是一种服务器端脚本语言，而 JavaScript 是客户端脚本。这意味着 JavaScript 在用户的浏览器内下载和运行，而 PHP 代码是在 Web 服务器上进行预解释的，只有最终的 XHTML（有时还有 CSS 和 JavaScript - 你可以用 PHP 做很多事情！）被提供到用户的 Web 浏览器中。

让我们快速看一下一些基本的 PHP 语法：

<?php /*All PHP is evoked using greater-than brackets and a "?" question mark, followed by the letters "php"*/
//This is a single-line comment
/*
This is multi-line
comment block
*/
function newHelloWorld(){/*this sets up a function and code block*/
$text1 = "Hello"; //creates a variable called: $text1
echo $text1." World!"; /*tells the HTML page to print , aka: "echo" the variable $text1 with the string " World!" concatenated onto it.*/
}//this ends the code block
newHelloWorld(); //calls the function as a statement ending with a semi-colon.
//the question mark and closing less-than tag end the PHP code.
?>

我相信你立刻就能注意到 PHP 和 JavaScript 之间的一些不同之处，但也有许多相似之处。同样，如果你确信在不破坏功能的情况下可以替换变量值，那么你在 WordPress 和这个标题上都会做得很好。一如既往，你对 PHP 的了解越多，就会越好。

提示

我必须在我的<?起始块中添加"php"吗？

你会注意到我将我的 PHP 起始块设置为："<?php"。对于一些有一些 PHP 知识或有 WordPress 经验的人来说，你可能熟悉只以<?开始和以?>结束的 PHP 块。在启用了简写支持的服务器上，你可以以"<?"开始一个脚本块（以及使用一些其他很酷的 PHP 简写技巧）。

然而，尽管通常启用了简写支持，但并非每个人的 PHP 安装都启用了它。当我的客户或朋友似乎无法让新的插件或主题在他们的 WordPress 安装中正常工作时，这通常会成为罪魁祸首。主题或插件是使用简写编写的，而客户的 PHP 安装没有启用它，出于某种原因，他们的 IT 人员或托管提供者不想启用它。为了尽可能保持兼容性，我们在此书中将使用标准形式（<?php）而不是简写形式。

注意

如果您想通过了解更多关于 PHP 的信息来更好地理解 WordPress，那么再次，W3School 网站是一个很好的开始！(w3schools.com/php/)。

在阅读本书之后，如果您对 PHP 以及 JavaScript、AJAX 和 jQuery 感兴趣，您可能想继续阅读Audra Hendrix、Bogdan Brinzarea和Cristian Darie的AJAX 和 PHP：构建现代 Web 应用程序第二版。

更喜欢通过视觉“亲自实践”学习的人？lynda.com有来自全球顶尖 CSS、XHTML/XML、PHP、JavaScript（甚至 jQuery）专家的出色课程选择。您可以订阅在线学习课程，也可以购买 DVD-ROM 进行离线观看。

起初，这些课程或每月订阅可能显得价格不菲，但如果你是一个视觉学习者，花钱和时间在这些课程上是值得的。您可以参考官方网站lynda.com。

基本工具

技能是一回事，但您的工具越好，对这些工具的掌握程度越高，您的技能就能发挥得越好（您可以问问任何木匠、高尔夫球手或应用程序程序员关于“行业工具”的绝对重要性）。

代码/HTML 编辑器

首先，我们需要处理标记和代码——大量的标记、CSS、PHP 和 jQuery。因此，您需要一个好的代码或 HTML 编辑器。Dreamweaver 是一个很好的选择(www.adobe.com/products/dreamweaver/)，尽管我更喜欢在 Mac 上使用 Coda (http://www.panic.com/coda/)。在我发现使用 Coda 进行工作之前，我非常喜欢免费编辑器 TextWrangler (www.barebones.com/products/textwrangler/)。当我在 PC 上工作时，我喜欢使用免费的文本/代码编辑器 HTML-kit (www.htmlkit.com/)。

有成千上万的编辑器，有些是免费的，有些是昂贵的，功能也各不相同。我和每个开发人员和设计师都谈过的人，都使用不同的工具，并对为什么他们的编辑器是最好的有十分钟的“演讲”。最终，任何一个可以让您启用以下功能的 HTML 或文本编辑器都会很好地工作。我建议您启用/使用以下所有功能：

• 查看行号： 在验证和调试过程中非常方便。它可以帮助您在 jQuery 脚本、主题或插件文件中找到特定行，针对这些行，验证工具已返回修复。这对于其他主题或插件的作者给出的指令也很有帮助，这些指令可能涉及到在不同条件下需要自定义或编辑的特定代码行。

• 查看语法颜色： 任何值得信赖的代码和 HTML 编辑器通常都有这个功能，默认设置为默认。好的编辑器可以让你选择自己喜欢的颜色。这会以各种颜色显示代码和其他标记，使得区分各种语法类型变得更容易。许多编辑器还可以帮助你识别损坏的 XHTML 标记、CSS 规则或 PHP 代码。

• 查看不可打印字符： 你可能不想一直开启这个功能。它可以让你看到硬回车、空格、制表符和其他你可能希望或不希望在你的标记和代码中的特殊字符。

• 文本自动换行： 当然，这可以让你在窗口内部换行文本，这样你就不必水平滚动以编辑一行很长的代码。最好学习一下你的编辑器中这个功能的快捷键是什么，和/或者为其设置一个快捷键。你会发现，通过未换行、缩进良好的标记和 PHP 代码进行快速浏览或找到上次停止的地方会更容易；但是，你仍然希望快速地打开换行功能，这样你就可以轻松地看到并将注意力集中在一行长代码上。

• 通过 FTP 或本地目录加载文件： 一个允许你通过 FTP 连接或在侧面板中看到本地工作目录的编辑器非常有帮助。它可以帮助你避免手动在你的操作系统资源管理器或查找器中查找文件，也不必通过额外的 FTP 客户端上传。能够在一个应用程序中连接到你的文件只会加快你的工作流程。

  小贴士

  免费开源 HTML 编辑器：

  我还使用过 Nvu（www.net2.com/nvu/）和 KompoZer（kompozer.net/）。它们都是免费的、开源的，并且适用于 Mac、PC 和 Linux 平台。KompoZer 是从与 Nvu 相同的源代码构建的，并且显然修复了一些 Nvu 存在的问题。（我自己没有遇到 Nvu 的任何主要问题）。这两个编辑器都对我的日常使用来说有些限制，但我确实喜欢能够快速格式化 HTML 文本并将表单对象拖放到页面上。这两个编辑器都有一个源代码视图，但在普通和源代码视图标签之间切换时必须小心。Nvu 和 KompoZer 过于贴心了，如果你没有正确设置偏好设置，它们会尝试重写你的手写标记！

  Ubuntu 和 Debian 的 Linux 用户（以及使用 Fink 的 Mac 用户）可能也有兴趣尝试 Bluefish 编辑器(bluefish.openoffice.nl)。我在 Ubuntu Linux 上工作时使用 Bluefish。我在 Linux 上更喜欢它，尽管它足够强大，可以被认为更像是一个 IDE（集成开发环境），类似于 Eclipse(www.eclipse.org)，而不仅仅是一个基本的代码或 HTML 编辑器。对于大多数人来说，像 Bluefish 或 Eclipse 这样的工具可能过于强大，超出了他们在 WordPress 开发和维护中的一般需求。另一方面，如果您认真对待 WordPress 开发，它们可能具有您发现无价的功能，值得下载并尝试。

Firefox

最后，您需要一个网络浏览器。我强烈建议您使用最新稳定版本的 Firefox 浏览器，可在mozilla.com/firefox/下载。

现在有人可能会问，为什么使用 Firefox？虽然这个浏览器也有其缺点（与任何其他浏览器一样），但总的来说，我认为它是一个非常优秀的 Web 开发工具。对我来说，它和我的 HTML 编辑器、FTP 程序以及图形工具一样重要。Firefox 具有很多优秀的功能，我们将利用这些功能来帮助我们简化 WordPress 和 jQuery 增强以及网站制作。除了内置功能（如 DOM 源选择查看器和遵循由 W3C 指定的 CSS2 和一些 CSS3 标准）之外，Firefox 还有一系列非常有用的扩展，例如Web 开发者工具栏和Firebug，我推荐您使用以进一步增强您的工作流程。

如果您有一些 jQuery 的经验，您可能已经注意到 jQuery 网站上的优秀文档以及大多数 jQuery 书籍，倾向于专注于 jQuery 的细节，使用非常简单和基本的 HTML 标记示例，并添加了最少的 CSS 属性。在 WordPress 中，您将发现自己在使用由其他人创建的主题或插件。您需要一种简单的方法来探索主题、插件和 WordPress 生成的文档对象模型（DOM）和 CSS，以便通过生成的标记来使 jQuery 实现您想要的效果。Firefox 浏览器及其扩展程序比其他任何浏览器更容易实现这一点。

Web 开发者工具栏

这是一个很棒的扩展，它为您的 Firefox 浏览器添加了一个工具栏。该扩展也适用于 Seamonkey 套件和新的 Flock 浏览器，这两者都使用 Mozilla 的开源代码，就像 Firefox 一样。chrispederick.com/work/web-developer/。

该工具栏允许你直接链接到浏览器的 DOM 和错误控制台，以及 W3C 的 XHTML 和 CSS 验证工具。它还允许你以各种方式切换和查看你的 CSS 输出，并允许你查看和实时操纵你的网站输出的各种信息。这个工具栏的用途是无穷无尽的。每当我开发设计或创建 jQuery 增强功能时，似乎都会发现一些以前从未使用过但非常有用的功能。

Firebug

一种更强大的工具是 Joe Hewitt 的 Firefox 的 Firebug 扩展，位于www.getfirebug.com/。请注意，还有一个适用于 Internet Explorer、Safari 和 Opera 的“Firebug Lite”版本。但完整版的 Firebug 对于 Firefox 是最佳选择。

当与 Web 开发者工具栏的功能结合使用时，此扩展功能强大。单独使用时，Firebug 将找到你需要操纵或调试的任何内容：HTML、CSS、JavaScript，无所不包。它甚至可以帮助你实时找到发生在你的 DOM 上的一些小“怪异”情况。有各种有趣的检查器，几乎所有的检查器都是不可替代的。

我最喜欢的 Firebug 功能是查看 HTML、CSS 和 DOM 的选项。Firebug 将向你展示你的框模型，并让你看到每个边缘的尺寸。此外，Firebug 的最新版本允许你实时编辑，轻松尝试不同的修复方案，然后再将其提交到你的实际源文件中。 （Web 开发者工具栏也有一些实时编辑的功能，但我发现 Firebug 接口更加深入和易于使用。）

不是必需的，但很有帮助：图像编辑器

我想提到的最后一个工具是图像编辑器。虽然你可以用纯 CSS 做很多酷炫的增强效果，但很可能你会想通过使用图形编辑器（如 GIMP、Photoshop 或 Fireworks）进一步扩展你的 WordPress 设计和 jQuery 增强功能，添加一些时髦的视觉元素，比如酷炫的图标或自定义背景。这些最好通过使用图形编辑器来实现。

Adobe 拥有 Photoshop 和 Fireworks。它还提供了一款轻量且价格较低的 Photoshop 版本，称为 Photoshop Elements，可以进行基本的图像编辑（www.adobe.com/products/）。

任何你喜欢的图形编辑器都可以。最好选择一个可以使用图层的编辑器。

提示

免费开源图像编辑器

如果你预算有限且需要一款优秀的图像编辑器，我推荐 GIMP。它适用于 PC、Mac 和 Linux。你可以从gimp.org/下载。

另一方面，如果像我一样更喜欢矢量艺术的话，那么尝试一下 Inkscape 吧，它也适用于 PC、Mac 和 Linux。位图图形编辑器很棒，因为它们还可以让你增强和编辑照片，并进行一些绘图。但如果你只想创建漂亮的按钮和图标或其他界面元素和基于矢量的插图，Inkscape 可以让你获得详细的绘图控制，值得一试(inkscape.org)。你会发现，本书中的许多图形示例都是主要使用 Inkscape 制作的。

我个人同时使用位图图像编辑器，比如 GIMP 或 Photoshop，以及 Inkscape 这样的强大矢量绘图程序。我发现同时使用这两种类型的图像编辑器来创建大多数网站设计和效果是很有必要的。

jQuery 背景和要点

jQuery，由约翰·雷西格创建，是一个免费的开源 JavaScript 库。它简化了创建高度响应页面的任务，并在所有现代浏览器中表现良好。约翰在开发 jQuery 时特别留意，使其抽象出所有浏览器之间的差异。因此，你可以专注于项目的功能和设计，而不会陷入繁琐的 JavaScript 编码来处理所有不同的浏览器，以及各个浏览器喜欢处理 DOM 和自己的浏览器事件模型的不同方式。

jQuery 的作用（非常出色）

在其核心，jQuery 擅长通过找到和选择（因此名称中有“query”一词）DOM 元素为jQuery 对象，通常称为包装器。这使你可以轻松获取和设置页面元素和内容，并使用所有现代浏览器事件模型，允许你为站点添加复杂功能。最后但并非最不重要的一点是，jQuery 还拥有一套非常酷的特效和 UI 库。动画和界面小部件现在完全受你指挥。

注意

等等！DOM？！

不要惊慌。我知道，我们才刚刚进入第一章，我已经多次提到这个神秘的缩写DOM。我将会更多地提到它。学习关于文档对象模型（Document Object Model）可以真正增强你对 HTML 的理解，对 WordPress 主题设计和 jQuery 增强也十分有帮助。

它还将帮助你更好地理解如何有效地构建 CSS 规则，并编写更清晰准确的 jQuery 脚本。有关更多信息，当然可以参考 W3Schools 网站：(w3schools.com/htmldom/。

除了所有这些酷炫的 DOM 操作内容，jQuery 有一个不错的易学曲线。你这些 CSS 专家们会特别喜欢掌握 jQuery。再次强调，为了找到最佳的选择元素的方式，约翰开发了 jQuery，以便利用 Web 开发人员对 CSS 的现有知识。你会发现 jQuery 选择器非常简单易用，特别是在你可以几乎像使用 CSS 样式一样轻松地获取和选择一组元素时！

我们是如何到达这里的：从 JavaScript 到 jQuery

JavaScript，最初被称为 LiveScript，是在 90 年代初由 Netscape 的开发人员发明的。到 1996 年，Netscape 将 LiveScript 重命名为 JavaScript，以便通过将其与独立开发的 Java（由 Sun Microsystems 开发）相关联来提高其知名度。Java 本身已经存在了几年，因为人们开始通过使用称为“小程序”的单独插件在网站中运行它，所以它变得更加流行。有一些方式，Netscape 的开发人员确保 JavaScript 的语法和功能与 Java 非常相似，但当然也有区别。最大的区别在于 JavaScript 是一个在客户端执行的解释型脚本语言，这意味着它在浏览器中实时运行，而不是像 Java 那样预编译以执行和运行。

解释它所有内容有点复杂，超出了本书的范围，但当然，微软的浏览器 Internet Explorer 与 Netscape 竞争时，采取了完全不同的路线，发布了具有运行微软自己 VBScript 能力的 IE。VBScript 被设计成外观和功能类似于 VisualBasic，但再次作为解释语言，而不是像 VB 那样编译的语言。当 JavaScript 似乎比 VBScript 更受新兴网页开发人员欢迎时，微软推出了 JScript。JScript 被设计成与 JavaScript 非常相似，以吸引 JavaScript 开发人员，而不需要为微软支付任何许可费用，但仍然存在一些差异。然而，如果你非常小心，没有很高的期望，你可以编写一个在 Netscape 中执行为 JavaScript，而在 IE 3.0 中执行为 JScript 的脚本。

是的。多么痛苦啊！直到今天，IE 仍然只执行 VBScript 和 JScript！不同之处在于，微软和 Mozilla（Netscape 的创建基金会）都向 ECMA International（一个专注于创建和维护信息通信系统标准的组织）提交了 JavaScript 和 JScript。除了 JavaScript，你还可以感谢 ECMA Int. 制定的标准范围从 CD-ROM 和 DVD 格式规范到像 MSOffice 和 OpenOffice 这样的办公套件中使用的较新的 Open XML 标准。

从 1997 年 JavaScript 首次提交至今已经超过十年了。但截至 2010 年，JavaScript 和 JScript 标准非常相似，现在两者在技术上都被称为 ECMAScript（但谁想一直这样说呢？）。

许多在 90 年代后期和 21 世纪初成长起来的开发人员将 JScript 和 JavaScript 术语混用，而不意识到它们之间有区别！然而，仍然存在差异。IE 在某些方面处理 ECMAScript 与 Firefox 和其他浏览器不同。为了清晰和理智，本标题将继续称 ECMAScript 为 JavaScript。

从前，有一种叫做 JavaScript 的东西。

在"黑暗时代"，也就是在 jQuery 在 2006 年初出现之前，为了创建一个更具动态响应事件或使用 JavaScript 操纵 DOM 的页面，你必须花费大量时间编写使用while和foreach循环，其中可能还有一些或许很多被挤在这些循环内的if/else语句，且通常笨拙的 JavaScript。

如果你想要立即调用你的 JavaScript，它必须放置在头标签中或在主体中使用onload事件处理程序。问题在于这种方法等待整个页面及其所有内容加载，包括诸如 CSS 文件和图像之类的内容。如果你创建了一个循环来选择和操作一组元素，并且想要对该组元素执行额外的更改，那么你必须在另一个循环中重新选择它们，或者有一个带有if/else语句的长循环，这可能变得复杂且难以跟踪和维护。

最后，你可能想让页面响应的许多事件通常需要单独调用。我记得有时候不得不为 Firefox（或远古的 Netscape）创建一个事件脚本，为 IE 创建一个单独的事件脚本。偶尔，我甚至会想出一些小创意方法来检测不同的浏览器，或者"欺骗"它们以响应不同的事件，总的来说，这只是为了让页面在两种浏览器之间看起来和响应类似的一些东西。

尽管我喜欢为我的网站编程并添加引人入胜的互动性，但我常常对深入 JavaScript 的努力稍感不满。

为什么 jQuery 比 JavaScript 更简单

这一切随着 jQuery 而结束。jQuery 并不是独立存在的，也就是说它不是浏览器支持的新语言。它本质上只是创建更好的、可工作的 JavaScript。正如前面提到的，它是一个 JavaScript 库，提供了更简单、更易于构建的语法。浏览器的 JavaScript 引擎会将 jQuery 语法解释为普通的 JavaScript。jQuery 只是隐藏了你以前用 JavaScript 必须自行完成的许多"丑陋"和复杂的东西，并替你完成了这些工作。

我最初喜欢 jQuery 的一点是它实质上是一个奇妙的"循环引擎"（除了它出色的、清晰的文档）。现在我称之为"循环"，但是那些有更正式编程背景或者对 jQuery 有一些先前经验的人可能已经听说过这个术语：隐式迭代。基本上，jQuery 迭代，也就是说，通过所选元素的容器对象重复（又称：循环），而不需要引入一个显式的迭代器对象，因此使用术语隐式。好了，请忽略复杂的定义，它只是意味着你几乎可以做任何你需要做的事情，而不必编写foreach或while循环！我和大多数关于 jQuery 的人聊过的人都不知道这才是 jQuery 在幕后真正在做的事情。

比能够轻松循环遍历所选元素更酷的是，使用标准的 CSS 符号可以首先选择它们。然后，如果这两个功能还不够出色的话，一旦你抓到了一组元素，如果你有多个操作要应用于所选元素集，那也没问题！与其一遍又一遍地在选择上调用单独的函数和脚本，不如一次性在一行代码中执行 多个 操作。这被称为 语句链接。语句链接非常棒，我们将在本标题中经常学习并经常利用它。

最后，jQuery 是非常灵活的，最重要的是可扩展的。在它存在的四年中，已经有数千个第三方插件为它编写。正如我们在本书中将发现的那样，编写自己的 jQuery 插件也非常容易。然而，你可能会发现，对于你更实际的日常 WordPress 开发和维护需求，你不需要这样做！就像 WordPress 为你节省了大量的时间和工作一样，你会发现使用 jQuery 也已经有很多工作完成了。

无论你想创建什么，你可能可以很容易地通过一个 jQuery 插件和对你的 WordPress 主题进行一两个调整来实现。也许你只需要编写一个快速简单的 jQuery 脚本来增强你喜欢的 WordPress 插件之一。在本书中，我们将介绍 jQuery 的基础知识和将其应用于 WordPress 的最常见用法，你很快就会发现可能性是无限的。

提示

了解 jQuery

本书旨在帮助您为 WordPress 用户常遇到的场景和问题创建解决方案。我希望能帮助您节省一些时间，无需深入研究 WordPress 的精彩但又广泛的 codex 和 jQuery 的 API 文档。但这本书绝不会取代那些资源或 jQuery 和 WordPress 社区成员维护的优秀资源。

对于 jQuery，我强烈建议你查看 jQuery 的文档和 Learning jQuery 网站：

docs.jquery.com

www.learningjquery.com

理解 jQuery 包装器

随着我们在本标题中的深入，你将听到并学到更多关于 jQuery 对象的信息，也被称为“包装器”或“包装器集”，这可能是最合理的，因为它是你选择要处理的一组元素。但由于这是 jQuery 工作的关键，我们现在会进行一个快速介绍。

要完全理解包装器，让我们稍微离开 jQuery。归根结底，一切都始于你的浏览器。你的浏览器有一个 JavaScript 引擎和一个 CSS 引擎。浏览器可以加载、读取和解释格式正确的 HTML、CSS 和 JavaScript（当然，还有大量的 Java、Flash 和许多不同的媒体播放器的插件，但出于本解释的目的，我们不需要担心它们）。

现在这只是一个非常粗糙的高级概述。但我认为这将帮助你理解 jQuery 的工作原理。浏览器接收加载的 HTML 文档并创建文档的映射，称为 DOM（文档对象模型）。DOM 本质上是 HTML 文档对象的树。

您会认出大多数对象作为 HTML 文档中的标记标签，例如<body>, <h1>, <div>, <p>, <a>等。DOM 树被展开，显示这些对象之间的父子关系，以及将关系映射到每个对象的属性和内容。例如，看一下以下示例 DOM 树插图：

现在是有趣的部分。如果有 CSS 样式表附加或嵌入到文档中，浏览器的 CSS 引擎会遍历 DOM 树，并根据样式规则为每个元素添加样式。当然，如果文档中附加或嵌入了任何 JavaScript，浏览器的 JavaScript 引擎也能遍历 DOM 树并执行脚本包含的指令。

jQuery 库被附加到您的 XHTML 文档作为 JavaScript 文件。然后，该库能够准备 JavaScript 引擎创建一个对象，该对象将在其中具有所有 jQuery 功能，准备在被调用时使用（也称为 jQuery 对象）。当您创建 jQuery 代码时，您自动调用了 jQuery 对象，并且可以开始使用它。

通常，您将指示 jQuery 对象通过 CSS 选择器遍历 DOM，并将特定元素放入其中。所选元素现在在 jQuery 对象中“包裹”并且您现在可以在所选元素集上执行额外的 jQuery 功能。jQuery 然后可以循环遍历它所包装的每个元素，执行其他功能。当它遇到集合中的最后一个对象并执行了通过语句链传递给它的所有指令时，jQuery 对象停止循环。

以下插图显示了传递给 jQuery 对象的一些 DOM 对象。

开始使用 jQuery

很容易开始使用 jQuery。我们将在这里涵盖最直接的基本方法，在下一章中，我们将探讨在 WordPress 中使用 jQuery 的几种其他方法。

从 jQuery 网站下载

如果您前往jQuery 网站，您会发现首页为您提供了两个下载选项：版本为 1.4.2 的生产和开发库，这是本文撰写时最新发布的稳定版本。

生产版已经被压缩和“缩小”成一个更小的文件大小，加载速度会快得多。它的大小为 24KB。开发版则未经压缩，大小为 155KB。虽然体积大得多，但如果你遇到调试问题并需要打开和阅读时，它会更容易阅读。

理想情况下，你应该在创建网站时使用 jQuery 的开发版本，并在发布到线上时切换到生产版本，这样加载速度会快得多。你们中的许多人可能永远不想查看 jQuery 库的内部，但不管怎样，下载两个版本都是个好主意。如果在调试过程中一直显示 jQuery 库中的某行代码出现问题，你可以切换到开发版本以更清楚地了解该代码行试图做什么。我可以告诉你，jQuery 库中的某行代码出现问题的可能性很小！几乎总是你的 jQuery 脚本或插件有问题，但能够查看完整的 jQuery 库可能会让你了解你的脚本代码哪里出了问题，以及为什么库不能与它一起工作。生产和开发库之间没有区别，只有文件大小和人类可读性。

在 jQuery 的主页上，当你点击下载时，你将被带到 Google code 网站。然后你可以返回并选择其他版本进行下载。请注意，该库没有以任何方式进行压缩或打包。它下载的是实际的.js JavaScript 文件，可以直接放入你的开发环境中使用。如果你点击下载按钮，看到 jQuery 代码出现在你的浏览器中，只需点击返回按钮，然后右键单击或按住控制键单击，然后点击另存为目标进行下载。

提示

使用 Visual Studio？

如果你的代码/HTML 编辑器恰好是 Visual Studio，你可以下载一个额外的文档文件，在 Visual Studio 中使用并访问嵌入到库中的注释。这使得 Visual Studio 编辑器在编写 jQuery 脚本时可以进行语句完成，有时也称为 IntelliSense。

要下载定义文件，请点击主页顶部的蓝色下载选项卡。在下载 jQuery页面上，你会找到指向最新版本中的 Visual Studio 文档文件的链接。

你会将这个文件放在你下载的 jQuery 库（生产版或开发版）的同一位置，然后它应该可以在你的 Visual Studio 编辑器中工作了。

包括 jQuery 库

让我们立即设置一个基本的 HTML 文档，其中包含我们刚刚下载的 jQuery 库文件。我已经下载了较小的生产版。

在接下来的标记中，我们将附加库并编写我们的第一个 jQuery 脚本。现阶段不要太担心 jQuery 代码本身。它只是在那里让你看到它的运行情况。我们将在下一章中真正了解 jQuery 功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xml:lang="en">
<head>
<title>First jQuery Test</title>
<script type="text/javascript"
src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery("document").ready(function(){
jQuery("p").css("background-color", "#ff6600");
});
</script>
</head>
<body>
<h1>Sample Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

就是这样！在没有包含或嵌入到页面或标记中的任何 CSS 的情况下，我们使用 jQuery 改变了段落标签的 CSS background 属性。最终，我们并不希望 jQuery 取代我们对 CSS 的正常使用！但是从这个快速示例中，你可以看到 jQuery 如何在响应事件时动态改变网站页面的外观和布局，使网站页面对用户非常响应；这是一个强大的功能。你现在应该能够将这个文件加载到 Firefox 中，看到你的第一个 jQuery 脚本在运行中的效果。

如果你之前有过与 WordPress 的工作经验，根据前面的示例，你可能很容易看到如何在你的 WordPress 主题中包含 jQuery 库并开始使用它。你可以很好地通过这种方式将 jQuery 包含到你的主题中。然而，在下一章中，我们将讨论将 jQuery 库包含到你的 WordPress 安装中的更优化的方式。

WordPress 背景和要点

现在你对 jQuery 有了一点背景，并且了解了如何在 HTML 文档中使用它，让我们来看看 WordPress。再次强调，你们大多数人都已经是 WordPress 用户和开发者了。至少，你可能以某种方式与之合作过。你甚至可能有一个自己拥有或维护的 WordPress 站点。

对于那些对 WordPress 有最少经验的人，我们将快速介绍一些背景和要点，以便开始使用它。即使你是经验丰富的用户，你也可能想要继续阅读，因为我将介绍如何设置一个 WordPress 的“沙盒”或开发安装。这样，你就可以在没有任何东西出现在你实际站点上的情况下，进行 WordPress 和 jQuery 的实验、学习和玩耍，直到你准备好部署它。

WordPress 概述

WordPress 是由 Matt Mullenweg 和 Mike Little 共同开发的，起源于原始的 b2/cafelog 软件的一个分支。它首次出现于 2003 年。最初是一个博客平台，多年来已经发展成为一个强大的发布平台，数百万人和组织以各种方式使用它来维护他们站点的内容。

与 jQuery 一样，WordPress 是灵活和可扩展的。Matt 和他的 WordPress 开发人员团队在 Automattic 公司一直致力于确保 WordPress 符合当前的 W3C 网络标准。一个 WordPress 站点的设计和额外的自定义功能可以很容易地通过平台的 API 进行控制和更新，这些 API 简化了主题和插件的开发。

作为一个希望通过 jQuery 增强网站的人，你应该记住 WordPress 网站是多么动态。WordPress 使用 MySQL 数据库、一组主题模板页面以及插件页面，更不用说数百个核心功能页面来生成你的网站。这意味着最终显示的 XHTML 页面标记来自许多地方；来自主题的模板文件，来自 MySQL 数据库中存储的帖子和页面内容，以及一些可能在安装中使用的插件或小部件的代码中定义的内容。

你了解你的 WordPress 安装及其文件如何组合，你就能更容易地使用 jQuery 增强网站。

下图说明了 WordPress 如何向浏览器提供完整的 HTML 页面：

小贴士

对 WordPress 完全不了解？

同样，我强烈推荐April Hodge Silver和Hasin Hayder合著的书籍WordPress 2.7 完整手册。这本书是一本绝佳的资源。它涵盖了你需要了解的有关 WordPress 的一切，还将帮助你开始使用 WordPress 主题和插件。

对 WordPress 感兴趣吗？

如果你已经熟悉使用 WordPress，但想更深入了解主题和插件开发，那么你一定要看看WordPress 插件开发，作者是弗拉迪米尔·普雷洛瓦克，当然，如果你可以原谅我对自己的书的不自量力的推销，那也一定要看看WordPress 2.8 主题设计。

WordPress 运行的必要条件

如果你已经有一个可以使用的 WordPress 版本，那太好了。如果没有，我强烈建议你在本地安装一个。随着 WAMP（Windows、Apache、MySQL 和 PHP）和 MAMP（Mac、Apache、MySQL 和 PHP）的发布，安装和运行一个小型 Web 服务器在你的本地机器或笔记本电脑上变得非常容易。与在托管提供商上安装 WordPress 相比，本地服务器为你提供了几个便利。

我经常发现当我旅行时，尽管越来越多的互联网 WiFi 热点出现，但我经常身处某些地方没有 WiFi，或者我在星巴克，我不想向 T-Mobile 支付“特权”以连接到 WiFi。有了 WordPress 的本地安装，我就不用担心了。我可以随心所欲地开发和调试，而不受互联网连接的限制，最重要的是，我不用担心我会在正在为其开发或设计的现场网站上出现故障。

如果你对 WordPress 的本地沙盒安装感兴趣，我建议你下载 Windows 版的 WAMP 或 Mac 版的 MAMP。

使用 WAMP

WAMP 代表 Windows、Apache、MySQL 和 PHP，它使得在你的计算机上运行本地 web 服务器非常容易，只需几次点击。如果你使用的是 Windows 操作系统，比如 XP、Vista 或 Windows 7，你可以访问www.wampserver.com并下载 WAMP 2。

一定要遵循 WAMP 安装向导中的说明！如果您已经在 localhost 上运行 Web 服务器和/或已安装了 WAMP 的先前版本，请仔细阅读向导说明，以便禁用或卸载该服务器，备份您的数据，并安装最新版本的 WAMP。

您还可以同意让 WAMP 为您安装一个起始页。从这个起始页以及任务栏中的 WAMP 图标，您将能够轻松启动 phpMyAdmin。phpMyAdmin 将允许您轻松创建安装 WordPress 所需的数据库和数据库用户帐户。

使用 MAMP

与 WAMP 类似，MAMP 代表（你猜对了！）Mac、Apache、MySQL 和 PHP。Mac 用户将前往 mamp.info 并下载服务器的免费版本。

一旦您下载并解压缩 ZIP 文件并启动 .dmg 文件，将 MAMP 文件夹复制到您的 Applications 文件夹并启动应用程序就是一个相当简单的过程。

同样，像 WAMP 一样，MAMP 从起始页上为您提供了一个启动 phpMyAdmin 的简单方法。phpMyAdmin 将允许您轻松创建数据库和数据库用户帐户，这是安装 WordPress 所必需的。

提示

使用 Ubuntu？

如果您正在使用 Ubuntu 并且需要一个本地服务器，那么您很幸运。毕竟，Linux 是大多数 Web 服务器使用的操作系统（我认为您此时已经知道 LAMP 是什么意思了）。

我建议您通过 Google 进行一些研究，找到安装您自己本地 Web 服务器的最佳方法。我发现以下资源对我最有用，也是我用来在我的 Ubuntu 10.04 安装上安装 LAMP 的资源：www.unixmen.com/linux-tutorials/570-install-lamp-with-1-command-in-ubuntu-910。

选择主机提供商

如果您使用学校或图书馆的计算机，无法（或者其他原因不想）本地安装软件，您将需要一个拥有 Web 主机提供商的帐户。您选择的主机提供商必须运行 Apache、MySQL 和 PHP，以适应 WordPress。选择一个提供易于理解的帐户面板的主机提供商将极大地有利于您，该面板允许您轻松访问 phpMyAdmin。

提示

轻松、一键安装—很简单，但要小心！

许多网络主机提供商提供超级简单的“一键”安装，包括今天的顶级 CMS 发布平台和其他有用的网络应用，包括 WordPress。务必查看您的主机提供商的服务和选项，因为这将让您填写一个简单的表格，并避免直接处理 phpMyAdmin 或 WordPress 安装向导所带来的麻烦。

小心一键安装！ 虽然许多提供商只是为你安装一个 WordPress 单一安装，这很完美，但有些提供商可能正在运行 WordPressMU。这些提供商将创建一个 MU 帐户，该帐户将映射到你的域名，但不会给你访问任何安装文件的权限。如果是这种情况，你将无法完全控制你的 WordPress 站点！

你必须能够通过 FTP 登录到你的托管帐户并查看你的 WordPress 安装文件，特别是 wp-content 目录，其中包含你需要编辑的主题和插件目录和文件，以便用 jQuery 增强你的站点。在选择一键安装之前，请务必与你的托管提供商仔细核对。

WordPressMU 是多用户 WordPress。它是 WordPress.com 帐户的动力来源。虽然在 WordPress.com 上建立一个站点并让他们托管它非常简单，但你不能上传或自定义自己的主题和插件。这就是为什么这个标题甚至不尝试涵盖 WordPress.com 帐户，因为你需要访问 wp-content 文件夹才能用 jQuery 增强你的站点。

部署 WordPress

WordPress 本身安装非常容易。一旦你设置了一个带有数据库用户名和密码的 MySQL 数据库，你就可以解压最新版本的 WordPress 并将其放入你的本地 httpdoc 或 www 根目录中，然后通过导航到 http://localhost-or-domainname-url/my-wp-files/wp-admin/install.php 运行安装。

提示

5 分钟（或更少！）内的 WordPress

要了解安装 WordPress 的完整概述，请务必查看 Codex 的 WordPress 5 分钟安装指南：codex.wordpress.org/Installing_WordPressAgain。书籍 WordPress 2.7 完全手册 将逐步引导你完成 WordPress 的安装。

jQuery 与 WordPress：将它们结合起来

你可能属于两种类型中的一种：你可能了解并有经验的 jQuery，并且正在寻找 WordPress 来帮助维护你的站点。或者，更可能的是，你有 WordPress 的经验，正在看看 jQuery 能为你做什么。

如果你对 jQuery 有些经验，但对 WordPress 还比较新，你可能熟悉各种 jQuery 示例，展示了干净清晰的手工编码的 HTML 和 CSS，然后你会根据这些示例编写你自己的 jQuery 脚本。打开一个 HTML 文件并能够快速地看到甚至直接操纵所有的 HTML 标记和 CSS id 和 class 引用以使你的 jQuery 脚本尽可能简单是很容易的。

如我们在这里详细讨论过的，使用 WordPress 时，所有的 HTML 都是动态生成的。没有单个文件可以在编辑器中打开，以便了解 jQuery 要处理的内容。你需要了解 WordPress 发布系统，最重要的是了解 WordPress 主题和你使用的任何插件，以便让你的 jQuery 脚本能够定位并影响你想要影响的元素。正如我已经提到的，这就是你会发现 Web Developer 工具栏和 Firefox 的 Firebug 扩展程序将成为你最好的朋友的地方。

另一方面，熟悉 WordPress 并逐渐熟悉 jQuery 的专家们可能会遇到相同的问题，但你们从略有不同的角度来处理它。你可能习惯于让 WordPress 为你生成所有内容，而不用过多考虑。为了让 jQuery 影响你的 WordPress 内容，你将不得不更加熟悉 WordPress 和你的主题在幕后到底发生了什么。

在实施 jQuery 时，你的优势在于熟悉你的 WordPress 系统中主题的设定以及你使用的任何 WordPress 插件。你需要真正专注于理解 jQuery 选择器，以便能够导航 WordPress 生成的所有可能的 DOM 元素，并创建你想要的增强效果。

以下插图展示了 WordPress 如何向浏览器提供完整的 HTML 页面，然后解释 DOM，以便应用 CSS 样式，并增强 jQuery 和其他 JavaScript：

总结

我们已经审视了使用 jQuery 和 WordPress 有效工作所需的基本背景知识和工具。

我们还研究了以下主题：

• 你需要启动项目的软件工具

• jQuery 和 WordPress 的背景和基础知识

现在你已经了解了这些内容，在下一章中，我们将在 WordPress 中启用 jQuery，并深入了解 jQuery 的巨大可能性。准备好在我们的 WordPress 网站上玩得开心了。让我们开始吧！

第二章：在 WordPress 中使用 jQuery

现在我们了解了 jQuery 和 WordPress 的基础知识，并对它们如何相互作用有了一点背景了，我们现在准备好看看如何使用 jQuery 动态增强 WordPress 安装了。我们将从在 WordPress 中包含 jQuery 开始，并以我们的第一个酷项目结束：展开和折叠内容。这只是你的 WordPress 站点中 jQuery 可能性的开始！再次强调，我们在这个标题中将使用 WordPress 3.0 和新的默认 Twenty Ten 主题与 jQuery 1.4.2，但请放心，如果你的站点或项目仍在使用 WordPress 2.9，这些 jQuery 技术也会很好地工作。

在本章中，我们将涵盖以下主题：

• 在 WordPress 中注册 jQuery

• 使用谷歌的 CDN 来包含 jQuery

• 回顾所有 jQuery 的“秘密武器”

• 我们的第一个 jQuery 和 WordPress 增强

将 jQuery 引入 WordPress

jQuery 可以以以下三种不同的方式包含到 WordPress 中：

• 你可以从jQuery.com下载，并直接在 XHTML 头标签中使用script标签包含它，放在你的主题的header.php文件中（这种方法可行，但出于各种原因并不推荐）

• 你可以在主题和插件中注册 WordPress 捆绑的 jQuery

• 你也可以利用谷歌的 CDN（代码分发网络）来注册和包含 jQuery 到你的主题和插件中。

我们在第一章中涵盖了第一种方法的基础知识，开始：WordPress 和 jQuery。WordPress 非常灵活，任何具有正确管理员级别的用户都可以更新、增强主题，或安装其他插件，这些插件可能也使用 jQuery 或其他 JavaScript 库的版本。因此，直接将 jQuery 或任何 JavaScript 直接包含到主题中，带有硬编码脚本标记，这并不推荐，因为它可能会与通过主题定制或添加到 WordPress 安装的插件中包含的其他脚本和库发生冲突。在本章中，让我们来看看使用剩余的两种方法，通过 WordPress 的Script API 注册 jQuery 和使用谷歌的 CDN。

jQuery 现在与 WordPress 捆绑在一起

从 WordPress 2.7 开始，jQuery 和其他几个 JavaScript 库和插件已经捆绑到 WordPress 的 Script API 中，并通过一个叫做wp_enqueue_script的方便函数可用。实际上，WordPress 已经将 jQuery 和相当多的其他 JavaScript 库（包括与 Prototype 和更多其他库一起的Script.aculo.us）捆绑到wp-includes目录中一段时间了，但直到 2.7 版本，这些包都不那么容易访问。

在 WP 主题中注册 jQuery

你可以以两种不同的方式激活 WordPress 捆绑的 jQuery：

首先，在你的header.php文件中在闭合的</head>标签前放置以下代码：

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
//add jQuery code here
jQuery(document).ready(function() {
jQuery("p").click(function() {
alert("Hello world!");
});
});
</script>

或者，你可以在主题的functions.php文件中注册wp_enqueue_script（以及你编写的任何自定义 jQuery 代码）。如果你的主题没有functions.php文件，只需创建一个新文件，命名为functions.php，并将其放在主题的根目录中，与其他模板文件一起放置（functions.php是一个与我们正在使用的默认主题一起提供的标准模板文件）。将以下代码放入你的functions.php文件中：

<?php wp_enqueue_script('jquery');/*this registers jquery*/
function jq_test(){ /*This is your custom jQuery script*/
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("p").click(function() {
alert("Hello world!");
});
});
</script>
<?php
}
add_filter('wp_head', 'jq_test');/*this adds your script to the wp_head() hook in the header.php file and ensures your custom jQuery script is run*/
?>

避免注册 jQuery 时遇到的问题

我第一次尝试使用wp_enqueue_script加载 jQuery 时（无论是在functions.php文件中还是通过header.php文件），都无法使其工作。在 WordPress Codex 上花了一些时间和一些头发后，我终于意识到了以下事实：

• 如果你直接加载到你的header.php模板文件中，请确保wp_enqueue_script函数位于你的wp_head函数之前。你的自定义 jQuery 代码必须位于wp_head函数之后。

• 如果你在functions.php文件中注册wp_enqueue_script，请确保它出现在通过add_filter函数加载到wp_head中的任何自定义函数之前。

  提示

  了解一下 wp_enqueue_script 函数！

  这个函数是 WordPress 的脚本 API 的一部分，实际上它做的不仅仅是加载 jQuery！正如我所提到的，实际上有超过五十个 JavaScript 工具包、框架、用户界面库、插件和帮助程序，你可以安全地使用wp_enqueue_script函数进行加载。在这里查看：codex.wordpress.org/Function_Reference/wp_enqueue_script。

使用 Google 的 CDN

就我个人而言，我对注册并引用 WordPress 自带的副本有些犹豫。我发现，有时从Google Code 的代码分发网络（CDN）加载库是一个更好的选择。CDN 节省了带宽，允许您的站点在下载其他脚本和相关内容时进行一些并行处理。而且，可以很容易地始终获取最新版本的 jQuery。从 Google 的 CDN 加载 jQuery 库非常快，作为一个额外的奖励，如果您的站点用户以前访问过另一个从 Google Code 的 CDN 提供 jQuery 的站点，该库将已经缓存。

在主题中通过 Google 的 CDN 注册和包含 jQuery

要从 Google Code 的 CDN 中包含 jQuery，我们将确保注销 jQuery，然后通过 Google 的 CDN 进行注册。这就是注册和使用 wp_enqueue_script 函数的美妙之处：如果任何其他插件或脚本需要 jQuery，并且与从 Google 加载的版本没有冲突，那么该脚本将使用已加载的 Google CDN 库。如果脚本依赖于特定版本的 jQuery，比如 1.3.2 或 1.2.6，并且 CDN 正在加载 1.4.2 版本，那么该脚本将继续加载它需要的 jQuery 版本。因为（正如我们将学到的那样）通过 Script API 加载的每个脚本都保持在 noConflict 模式下，所以只要它们被注册和需要，同时加载两个库版本是可以的。

...
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js');
...

Google 提供了一个很棒的版本控制系统，允许你尽可能精确，或者只拉取最新的稳定版本。考虑前面的代码示例（注意前面代码示例中的突出显示的数字，1.4）。

了解 Google 的版本控制系统

上述注册脚本引用了 jQuery 的 1.4.2 版本（在撰写本标题时是最新版本）。当 jQuery 的开发人员发布一个新版本，比如 1.4.3 时，该版本将自动由相同的 URL 调用，因为我没有准确定位版本的具体细节。同样，我可以选择调用 ...jquery/1.3/jquery..，这将给我 1.3 版本中的最高版本 1.3.2。你猜对了，针对一个简单的 ...jquery/1/.. 将会拉取最新版本的 jQuery，直到 jQuery 升级到 2.0 版本！

通常情况下，始终加载最新的库是一个好习惯，但你永远不知道，你可能会使用一个 jQuery 插件或编写一些自己的代码，与新版本不兼容。然后，你会想要针对与你的插件或自定义脚本兼容的库的最后一个特定版本，直到你能够修复和更新它们。

使用 WordPress 的捆绑 jQuery 与包含自己的 jQuery 下载或使用 Google 的 CDN

正如我之前提到的，wp_enqueue_script 函数允许安全地将 jQuery（和其他包含项）加载到 noConflict 模式中。只要你从 Google CDN 注销并注册 jQuery，该库就会以相同的 noConflict 模式保护加载到 WordPress 中。我真的很喜欢利用 Google 的 CDN，因为我提到的各种性能原因，但对于大型项目，有许多编辑和管理员对如何管理 WordPress 站点以及使用什么 WordPress 插件作出不同决策，我会保守行事并将捆绑版本注册到主题中。此外，对于开发而言，如果我正在开发一个主题，并且由于旅行（或需要提高生产力）而与网络断开连接，我会发现在我的 MAMP 或 LAMP 服务器上已经运行 jQuery 很好。一旦网站上线，我会考虑将其切换到 Google CDN 版本的 jQuery。

避免冲突！

因为 WordPress 和 jQuery 预期其他可能使用短变量$的库将被加载。wp_enqueue_script确保以noConflict模式加载 jQuery。因此，你还需要确保使用noConflict模式的语法编写你的自定义 jQuery 代码。最简单的方法是将$变量（在许多 jQuery 脚本中常见）替换为完整的jQuery变量，正如我在第一章中讨论的，入门：WordPress 和 jQuery，并在我之前的两个示例中完成的那样。

设置你自己的 jQuery 变量

如果你觉得写出jQuery变量很麻烦，但又想保持在noConflict模式下，你可以将标准的$变量替换为你想要的任何变量，如下所示：

<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq("p").click(function() {
alert("Hello world!");
});
});
</script>

但我真的想使用$变量！

在 WordPress 中不应使用$变量来表示 jQuery。好吧，我知道，你有一个很好的理由。比如说，你正在从另一个非 WordPress 项目复制一个 jQuery 脚本，将所有的$变量转换为jQuery或一些其他自定义快捷变量可能会很麻烦。好吧。（从未听说过“查找和替换”？）无论如何，这里是一个如何将 jQuery 快捷方式安全地使用$变量的示例：

jQuery(function ($) {
/* jQuery only code using $ can safely go here */
});

上述解决方案的唯一缺点是，我发现很容易开始使用$变量，然后忘记将其他脚本封装在上述 jQuery 函数中。如果我的所有 jQuery 脚本都使用jQuery变量或自定义变量（如$jq），我在noConflict模式下会更好地工作。

提示

在 WordPress 插件中包含 jQuery

你可以使用前面提到的任何方法将 jQuery 包含到 WordPress 插件中。但是，你需要对使用 WordPress 插件有所了解。我们将在稍后的第三章中详细介绍这个主题，深入挖掘：理解 jQuery 和 WordPress。

启动 jQuery 脚本

大多数时候，你希望你的脚本在 DOM 加载和准备好后立即启动和/或可用。为此，你可以使用标准的“文档就绪”技术，如下所示：

jQuery(document).ready(function(){
// Your jQuery script go here
});

你可以通过使用以下代码稍微简化上述代码：

jQuery(function(){
// Your jQuery script go here
});

如果调用了jQuery变量并立即传递了一个函数，jQuery 会假定暗示了.ready事件，并在 DOM 加载完成后立即运行下一个选择器和函数。

我们的第一个 WordPress 和 jQuery 设置

我明白了。已经说了足够多的话。让我们开始使用 jQuery 吧。本书的大部分代码和示例使用的是 WordPress 3.0 RC 和全新的默认主题“Twenty Ten”。这是一个很棒、干净、符合 HTML5 标准的主题。即使你想增强旧版本的 WordPress，比如 2.8 或 2.9，你也会很高兴地知道，本书的每一个脚本（或其近似版本）都是最初在 2.8.6 和 2.9.2 版本中编写和测试的，然后才移植到 3.0 版本中。

在适当的情况下，我将向你展示 WordPress 2.9.2 默认主题的替代 jQuery 解决方案，并指出 jQuery 1.3.2 库（随版本 2.9.2 捆绑）与 jQuery 1.4.2 库（随 WordPress 版本 3.0 捆绑）之间的区别。

每个示例的重点不仅是向你展示如何增强 WordPress 的默认主题，而是任何主题，我希望你能发挥创造力，利用这些示例找到将它们以独特的方式应用于各种 WordPress 版本、主题和插件的方法！

在我们的设置中注册 jQuery

因为随 WordPress 3.0 一起提供的捆绑版本的 jQuery 也恰好是可用的最新版本的 jQuery，即 1.4.2，我将简单地导航到wp-content/themes/twentyten并打开header.php文件，然后使用基本的wp_enqueue_script函数来调用 jQuery，如下所示：

//placed right above the wp_head function
wp_enqueue_script( 'jquery' );
wp_head();

注册您自己的自定义脚本文件

接下来，我们需要将一个单独的脚本文件包含到我们的主题中，这个文件将有我们的自定义 jQuery 脚本。我想在主题中创建一个名为js的目录，我将在那里保存所有我的 JavaScripts。在那个目录中，我将创建一个文件并命名为custom-jquery.js。

这里有个很棒的东西：你可以使用wp_enqueue_script来包含你写的任何脚本。你将这样做是为了宣布该脚本依赖于 jQuery，因此如果出于某种原因，jQuery 尚未加载，WordPress 将加载 jQuery！你将想把你的自定义脚本放在 jQuery 调用下面，但在wp_head()调用之前。

...
wp_enqueue_script( 'jquery' );
wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );
wp_head();

在上述函数wp_enqueue_script中，我首先注册了我的脚本名为custom-jquery。然后在下一个参数中，我告诉 WordPress 在哪里找到我的脚本，使用get_bloginfo模板标记将 WordPress 导向twentyten主题的文件夹 ".../js/custom-jquery.js"。对于函数的第三个参数，我将脚本设置为依赖于jquery，在最后一个参数中，我简单地设置了一个版本号。我通常将这个数字设置为当天的日期。如果我更新了脚本，我会尝试更新函数中的日期，因此当主题“渲染”时，我的脚本加载起来看起来像这样：

<script type='text/javascript' src='http://localhost/wp-content/themes/twentyten/js/custom-jquery.js?ver=20100510'></script>

这有助于浏览器“新鲜”加载脚本，而不是如果我更新了脚本，则从缓存中加载脚本。

提示

之前的自定义脚本包含方法也适用于 jQuery 库本身！

比如，在不久的将来，jQuery 更新到版本 1.4.3（或 1.5 等等），但是在 WordPress 更新并包含该版本之前还需要一段时间。你当然可以使用 Google CDN 注册最新的脚本版本，但是，如果出于某种原因，你不想使用 Google CDN，那么你可以直接从 jQuery.com 网站下载最新版本的 jQuery，并将其放置在你主题的根目录中，并使用我们刚刚用来包含我们的 custom-jquery.js 文件的自定义注册方法进行注册。

别忘了首先 deregister 绑定的 jQuery！

还有：通过 wp_enqueue_script 调用脚本时，同时“注册”它，因此如果使用 wp_enqueue_script，就不需要单独调用 register 函数。

设置自定义 jQuery 文件

最后，让我们打开 custom-jquery.js 文件，并使用我们之前学到的技巧，设置 jQuery 的文档就绪函数的快捷方式如下：

jQuery(function(){ /*<- shortcut for document ready*/
/*any code we write will go here*/
});//end docReady

就是这样！让我们开始探索 jQuery 的“秘密武器”并将它们投入使用吧。现在，你可以将以下各节描述的任何代码放入你的 custom-jquery.js 文件中，并进行实验！

jQuery 的秘密武器 #1：使用选择器和过滤器

是时候开始享受一些 jQuery 的乐趣了！我觉得 jQuery 可以分解为三个核心优势，我称之为它的“秘密武器”：

• 理解选择器和过滤器

• 操纵 CSS 和内容

• 处理事件和效果

如果你掌握了这三个最重要的优点，那么你就已经在成为 jQuery 的巨星的路上了！

第一项，理解选择器和过滤器，是必不可少的。如果你想要能够使用 jQuery 做任何其他事情，你就需要对选择器和过滤器有很强的理解能力。你在使用选择器和过滤器方面越好，你在整个 jQuery 方面就会越好。

选择器和过滤器让你有能力（你猜对了！）将页面上的对象选择到 jQuery 包装器对象中，然后以几乎任何你认为合适的方式来使用和操作它们。选择器将允许你使用简单的 CSS 语法轻松地抓取一个元素数组。过滤器将进一步缩小和精炼该数组的结果。

请记住，使用选择器和过滤器将对象选择到 jQuery 包装器中后，这些对象不再是真正的 DOM 元素了。它们是一个对象数组，位于 jQuery 对象包装器中，具有一整套可用的函数和功能。如果你有需要的话，你可以通过每个数组元素中添加的 jQuery 项目和功能来逐个逐个地找到实际的 DOM 元素，但为什么呢？jQuery 的整个目的就是为了避免你这样做，但知道它在那里也是好的。

从文档中选择任何你想要的东西

在接下来的示例中，我们将看看选择器和过滤器；但为了说明 jQuery 的选择，我将使用一个名为css()的函数。我将在后面的部分中介绍该函数和更多内容。现在，只需关注样本开头的选择器和过滤器。

jQuery 选择器的本质是它们基于 CSS 语法。这意味着大多数人会发现，您可以非常容易地使用 jQuery，就像您如何使用 CSS 来定位和样式化页面上的特定元素一样。

选择在主要 jQuery 函数的开头声明：

jQuery(function(){
jQuery("selector:filter").jqFunctionName();
});

您还可以根据 CSS 语法将以下元素选择到 jQuery 包装器中：

• HTML 标签名称，如 body, p, h1, h2, div 等等

• 使用在 CSS 中用 #（井号）表示的id 属性，如#header或#sidebar。

• 以及类属性，在 CSS 中用.（点）表示，如.body或.post

当然，您可以使用 CSS 中允许的任何组合来定位元素，您也可以使用 jQuery 执行。例如：

• 标签（空格，或无空格）#id 或 .className，例如 div#sidebar li—这将抓取sidebar ID 名称中的 div 中的 所有 li 实例

• 标签，（逗号）.class 如 p, .post—逗号确保这将抓取所有 要么 是段落 要么 用.post类标记的内容

为了澄清，就像在 CSS 中一样，您也可以使用语法来结构化选择器：

• 逗号表示选择此元素，（和）此元素。例如：div, p（选择所有div标签和所有p标签）。

• 空格表示选择此元素（其中有）此元素在内部。例如：div p .className（选择所有具有段落p标签的div标签，其中 带有 任何其他分配给.className类的元素 在 p 标签内）。

• 最后，没有空格 将表示直接应用于元素而不仅仅是包含在其中的类：p.className（选择所有带有.className分配的段落 p 标签。这将 不会 选择具有相同.className类分配的 div 标签）。

除了标准的 CSS 逗号空格和附加的 id 和类名之外，在 jQuery 中，您还可以使用这些额外的符号来澄清您的选择：

• 大于号 > 仅会查找符合选择条件的父元素的子元素。

  例如，.post > p 将找到直接位于 .post 类中的段落 p 标签。在 .post 类内部的不同类中的 p 标签 将不 被选择。

让我们比较 ".post（空格）p" 和 ".post> p" 并查看结果。

在我们的第一个示例中，我们将如下检查代码：

jQuery(function(){
jQuery(".post p").css("background", "#f60");
});

请注意，此代码生成类似于下一个截图的输出，显示了所有段落的高亮显示，即使它们嵌套在具有名为.entry-content的类中：

然而，让我们看一下这个代码示例：

jQuery(function(){
jQuery(".post > p").css("background", "#f60");
});

让我们也看一下以下截图。我们发现没有段落被突出显示，因为它们位于另一个具有名为 .entry-content 的 div 标签内，因此 不 是 .post 的子元素。

+ 选择器将找到与匹配选择器相匹配的所有 下一个 元素。例如：li + li 将选择列表中每个列表项 li，除了 第一项。只有与该第一项 相邻 的项目如下所示：

...
jQuery("li + li").css("background", "#f60");
...

以下截图说明了这一点：

~ 选择器将找到选择器的所有兄弟元素。例如：li ~ li 将选择列表中除第一项之外的每个列表项，只选择该第一项的兄弟项。代码示例如下：

...
jQuery("li ~ li").css("background", "#f60");
...

由于兄弟元素通常紧邻被选定的项，因此 + 和 ~ 选择器通常会获得类似的结果。注意以下截图与上一截图相似：

过滤这些选择

很多人可能只需使用基本的 CSS 样式选择器就能满足大部分需求。但是，等等，还有更多！过滤器是我发现非常有用的选择部分，特别是考虑到我们正在使用 WordPress。同样，对于 WordPress 主题，你的许多 HTML 元素、ID 和类名可能是由你不是作者的主题生成的，或者由于各种原因，你不想编辑它们，或者你可能被禁止编辑主题。（什么？设计师在开发人员开始编辑他们的标记时有点“暴躁”？我不知道。）但没关系。有了过滤器，你根本不必担心。

问题是，初学 jQuery 时，想要去更改 HTML 标记以便更容易地用 jQuery 进行选择是很诱人的。但是在 WordPress 中，这并不容易。更改标记意味着你有可能破坏主题，或者更糟糕的是，不得不提醒内容编辑者手动向帖子和页面添加特定标记（在某些方面，这有悖于使用 WordPress 的初衷）。理解过滤器将允许你在每种情况和场景中对你的选择进行精确控制，每一次。

很容易细化过滤器，你只需包括这些项目，它们将获取你选定的元素并将它们与特定条件匹配，例如它们相对于其他元素的位置或索引。同样，为了符合 CSS 选择语法的精神，一些这些过滤器看起来类似于 CSS 伪类，例如 :hover 和 :first-child。这些实际上并不都是 CSS 伪类；它们在 CSS 样式表中不起作用，但在 jQuery 中会起作用。

这些筛选器在 jQuery API 中分为以下类别（按我发现它们在 WordPress 开发中最有用的顺序列出）：基本筛选器、内容筛选器、子筛选器、表单筛选器、属性筛选器和可见性筛选器。

基本筛选器

当你使用 WordPress 时，我相信你会发现:not()筛选器和:header筛选器非常有用。:header筛选器允许你简单地选择所有选择中的标题，无论它们是什么级别的标题。而不是必须选择h1和h2等等，将:header筛选器添加到你的选择器中将抓取所有标题，从h1到h6都包含在包装器中。在你的custom-jquery.js文件中试一试，并添加以下代码（不要担心.css(...)；代码的一部分；我们稍后会讲到这一点。我只是用它来帮助我们可视化 jQuery 可以做什么）：

jQuery(function(){
jQuery(":header").css("background", "#f60");
});

在下一个屏幕截图中，你将看到所有标题都被选择了，h1, h2，等等：

我最喜欢的筛选器是:not筛选器。曾经在飞机上有没有注意到，你经常被提醒“最近的出口可能在你身后”？同样的原则适用于当你试图将正确的元素装入你的 jQuery 包装器时。有时候告诉 jQuery 你不想要包装器中的东西会更容易！我曾经使用一个主题，里面有一些非常漂亮的电子邮件和 PDF 图标元素隐藏在.post类中。主题没有.entry类。这很烦人，因为我想对加载到 WordPress 文章中的图像应用一般的转换，但这些图标受到了影响！主题作者将它们包装在一个名为.postIcons的类中。使用:not()筛选器，我能够转换所有在.post类中但不在.postIcons类中的img标签。太棒了。

加上前述的:header选择器后再加上:not筛选器，看看会发生什么：

...
jQuery(":header:not(li :header)").css("background", "#f60");
...

以下筛选器现在显示我们已选择所有标题，除了列表项中的标题：

你可能已经从前面的例子中注意到了，你可以在选择器中巧妙地使用筛选器，多次使用它们。

你说什么？没错，你说得对：(":headers:not(li h2)")会得到与前面例子完全相同的结果，而且是始终更好地选择最直接的路径来进行选择。我只是试图说明这两个筛选器如何使用。最终，你会遇到更复杂的情况，它们会非常有用。对于其他情况，在使用筛选器之前，先使用普通选择器。

让我们逐个查看每个基本过滤器，看看它的语法是什么样的，以及它的详细功能。因为大多数 WordPress 主题作者使用.post类，而且大多数时候你将会以文章元素为目标，所以使语法更有意义。我在示例中经常使用.post类名，但请记住，您的主选择器可以是 CSS 选择器语法中使用的任何tag、id名称或class名称！

示例	语法	描述
:not(selector)	jQuery(".post img:not(.pIcon)").jqFn();	过滤掉所有匹配给定选择器的元素。
:header	jQuery(".post:header").jqFn();	过滤到所有标题元素，例如 h1、h2、h3 等。
:first	jQuery(".post:first") .jqFn();	仅过滤到第一个选定的元素。
:last	jQuery(".post:last") .jqFn();	仅过滤到最后一个选定的元素。
:even	jQuery(".post:even") .jqFn();	仅过滤到偶数元素。注意：数组是从零开始索引的！零被视为偶数，因此您的第一个项目将被选中！
:odd	jQuery(".post:odd") .jqFn();	仅过滤到奇数元素。注意：数组是从零开始索引的！零被视为偶数，因此您的第二个项目将被选中！
:eq(number)	jQuery(".post:eq(0)") .jqFn();	通过其索引过滤到单个元素，这再次是从零开始计数的。
:gt(number)	jQuery(".post:gt(0)") .jqFn();	过滤到所有索引大于给定索引的元素，再次强调，这是从零开始计数的。
:lt(number)	jQuery(".post:lt(2)") .jqFn();	过滤到所有索引小于给定索引的元素。
:animated	jQuery(".post:animated").jqFn();	过滤到当前正在进行动画的所有元素（我们将在本章后面讨论动画）。

子过滤器

在 jQuery 包装器中的任何内容都是一个数组，这些子过滤器会派上用场，但当你使用li标签或在 WordPress 中使用定义列表元素时，你可能会发现这些过滤器最有用。默认情况下，WordPress 将相当数量的链接内容拆分为 li 标签元素和画廊，这些画廊是通过将图像和描述包装在定义列表 (dt dd 元素) 中创建的。

示例	语法	描述
:nth-child(number/even/odd)	jQuery(".linkcat li:nth-child(1)").css("background", "#f60");	过滤到其选择器的“nth”子元素。请注意，这不是从零开始计数的！1 和 odd 选择第一个元素。
:first-child	jQuery(".linkcat li:first-child").css("background", "#f60");	过滤到其父元素的第一个子元素。
:last-child	jQuery(".linkcat li:last-child").css("background", "#f60");	过滤到其父元素的最后一个子元素。
:only-child	jQuery(".pagenav li:only-child").css("background", "#f60");	筛选出只是其父元素的唯一子元素的元素。如果父元素有多个子元素，则不选中任何元素。

在这里您可以看到only-child过滤器的运行情况：

...
jQuery("li:only-child").css("background", "#f60");
...

这是nth-child过滤器在 Meta 列表中的示例：

...
jQuery(".widget_meta li:nth-child(odd)").css("background", "#f60");
...

内容过滤器

在基本和子过滤器之后，您将遇到的下一个最有用的过滤器是内容过滤器。内容过滤器允许您基于匹配各种类型的元素和内容进行选择。我经常在 WordPress 中使用的最有用的内容过滤器是:has()过滤器。我经常需要选择具有内部内容的元素，比如内部包含img图像标签的锚a标签，或者内部包含列表li标签的段落p标签，或者内部包含特定类名的其他元素。定位特定对象很容易，但如果您发现需要基于内部包含的元素类型来定位一个更大的父对象，:has()过滤器将成为您的好朋友。

接下来最有用的项目是:contains()元素，乍看之下，可能与:has()非常相似！但这个过滤器非常不同（而且非常酷），因为它允许您定位元素内的特定文本。

对于这两种过滤器要小心，尽量做好尽可能多的“预选”。确保 jQuery 针对您尝试选择的元素和文本指向正确的方向。仅仅指定 ...(p:contains('my text'))... 可能对于大量内容的页面太泛，会导致 jQuery 延迟，或者更糟糕的是，由于它必须搜索页面上每一个小的 p, div 或 a 元素的文本或元素，而导致挂起和超时。一个明确指定了 ...(#divIdName .className a:contains('my text'))... 的 jQuery 要好得多，因为 jQuery 只需要搜索指定 ID 容器内指定类的文本中的每个 a 元素，而不是整个页面的内容。

让我们更详细地看一下以下内容过滤器：

示例	语法	描述
:has(selector)	jQuery(".post:has(.entry)") .css("background", "#f60");	筛选出至少有一个匹配元素内部的元素。
:contains(text)	jQuery(".post:contains('Hello world')").css("background", "#f60");	筛选出包含特定文本的元素。注意：这是区分大小写的！
:empty	jQuery(":empty')") .css("background", "#f60");	筛选出没有子元素的元素。这包括文本节点。
:parent	jQuery(":parent')") .css("background", "#f60");	筛选出是另一个元素的父元素的元素。这包括了文本节点。

举个详细的例子，让我们看一下默认主题的侧边栏。侧边栏有一些项目，没有用特殊的id名称或class进行标注。如果我想要定位仅在 Meta 标题下的ul列表，我可以使用:has()和:contains()来定位它。注意我如何“直接”告诉 jQuery，先预先选择或指向.widget-area li标签，这样 jQuery 在我告诉它查找子元素和包含的文本之前会忽略页面的其余部分。

您可以在下一个截图中看到以下代码的结果：

...
jQuery(".widget-area li:has(h3:contains('Meta')) ul")
.css("background", "#f60");
...

表单过滤器

如果所有之前的选择器和过滤器还不够酷，你还可以明确过滤到几种类型的表单元素，以及这些元素的事件类型。使用这些过滤器，您将能够控制 WordPress 生成的评论表单以及自定义和 WordPress 插件表单，并使它们更直观和易于使用。在本书的后面，我们将看到 jQuery 如何使表单使用和验证变得非常简单。

示例	语法	描述
:input	jQuery("form:input").css("background", "#f60");	过滤到所有输入、文本区域、选择和按钮元素
:text	jQuery("form:text").css("background", "#f60");	过滤到所有类型为文本的输入元素
:password	jQuery("form:password").css("background", "#f60");	过滤到所有类型为密码的输入元素
:radio	jQuery("form:radio").css("background", "#f60");	过滤到所有类型为单选框的输入元素
:checkbox	jQuery("form:checkbox").css("background", "#f60");	过滤到所有类型为复选框的输入元素
:submit	jQuery("form:submit").css("background", "#f60");	过滤到所有类型为提交的输入元素
:image	jQuery("form:image").css("background", "#f60");	过滤到所有图像元素（分类为表单过滤器，但对常规图像也有用）
:reset	jQuery("form:reset").css("background", "#f60");	过滤到所有类型为 reset 的输入元素
:button	jQuery("form:button") .css("background", "#f60");	过滤到所有类型为按钮的输入元素
:file	jQuery("form:file").css("background", "#f60");	过滤到所有类型为文件的输入元素

使用以下代码，我只突出显示了text输入和submit按钮，如下一个截图所示：

...
jQuery(":text, :submit").css("background", "#f60");
...

属性过滤器

属性就是在 HTML 标签内部找到的附加属性，允许标签自我完善。你可能最熟悉id和class属性，以及img和script标签的src属性，当然还有a标签的href属性。

属性是用于定义和细化 HTML 元素的强大属性，因此您可以想象使用它们进行过滤有多么强大。确实强大，但请记住，选择将项目放入 jQuery 包装器中的最简单和最直接的方法通常是最好的。我的示例将展示不同类别的选择，因为它们创建了漂亮的视觉示例，但实际上，最好使用常规选择器来定位类别项，并保留属性过滤器用于更精细、棘手的工作。

您会注意到这些过滤器与其他过滤器有所不同。而不是使用:（冒号标记），这些过滤器使用[]（方括号）。这意味着您可以轻松看到在您的选择器语法中，是否在过滤属性。您还会注意到，在 HTML 的 DOM 中的每个属性中，您都可以为其进行过滤。没有标准的“属性过滤器名称”集合；您只需使用方括号来指示您想要过滤的任何属性。您甚至可以以几种方式构建属性过滤器：

示例	语法	描述
[attribute]	jQuery("div [href]").css("background", "#f60");	过滤一个属性，无论其值如何
[attribute=value]	jQuery("div [class='entry']").css("background", "#f60");	过滤属性和精确指定的值
[attribute!=value]	jQuery("div [class!='entry']").css("background", "#f60");	过滤不具有指定值的属性
[attribute^=value]	jQuery("div [href^='http://']").css("background", "#f60");	过滤具有以特定字符串开头的值的属性
[attribute\(=value] | `jQuery("div [href\)='/']").css("background", "#f60")`;	过滤具有以特定字符串结尾的值的属性
[attribute*=value]	jQuery("div [href*='page_id']").css("background", "#f60");	过滤包含特定字符串的属性

在这里，我们可以通过以下 jQuery 代码查看仅针对侧边栏中的本地链接进行定位：

...
jQuery(".widget-area [href^='http://localhost']").css("background", "#f60");
...

以下截图显示了结果，只有指向 WordPress 安装的localhost链接被突出显示：

可见性

我把这两个过滤器放在最后，主要是因为在我大多数的 WordPress 项目中我很少使用它们，但它们是选择器/过滤器 API 的一部分，所以我会在这里介绍它们。

大多数情况下，你使用 jQuery 需要操作的元素默认是可见的。但偶尔会有一些通过 jQuery 转换隐藏的项目或者隐藏的表单字段，你可能需要对它们进行转换。对于这种情况，你可以使用 :hidden 过滤器。这有点棘手，因为你已经将项目选中到你的包装器中，但你不一定会看到任何转换（除非转换是使其可见的）。如果你发现自己有很多隐藏的元素，你可以随时过滤出可见的元素，如果这样更容易的话。

示例	语法	描述
:hidden	jQuery("form:input:hidden") .css("background", "#f60");	用于选择显示值为 none 或类型值为 hidden 或具有显式宽度和高度为 0 的元素的过滤器
:visible	jQuery("div .post:visible") .css("background", "#f60");	用于选择可见元素的过滤器

注意

我已经涵盖了我作为 WordPress 开发者最常使用的主要选择器和过滤器。务必查阅 jQuery 文档，了解所有按字母顺序列出的选择器和过滤器：api.jquery.com/category/selectors/。

jQuery 的秘密武器 #2：操作 CSS 和 DOM 中的元素

现在我们可以可靠地选择 WordPress 网站在页面上显示的任何 对象，让我们开始操纵和增强我们的选择！我们可以操作显示我们对象的 CSS 样式，如果这还不够酷，我们还可以在 DOM 中操作 HTML 对象本身。让我们开始操作 CSS。

操作 CSS

到目前为止，我们所看到的关于选择器和过滤器的所有内容都是必不可少的，用于定位你想要影响的元素。现在你可以将任何你想要的东西选入到包装器中了，让我们开始做些事情吧！多亏了之前的所有示例，你已经熟悉了 css() 函数。大多数情况下，你会使用这个函数来赋予标准的 CSS 属性值，比如：background、border、padding、margins 等等。如果你可以在 CSS 样式表中分配属性，你也可以使用 css() 函数来分配它。你还可以使用这个函数检索和获取 CSS 属性。

在 jQuery 的属性 API 中，你会发现更多的 CSS 操作特性，比如 .addClass、.removeClass 和 .toggleClass。这三个函数单独就能给你很大的动态化你的 WordPress 网站的能力。不要被我继续谈论属性所迷惑了！我们不再处理选择器和过滤器了。我们正在处理允许你操作这些选择的函数。让我们详细了解一下 jQuery 的 CSS 和类属性操作函数：

示例	语法	描述
.css('property', 'value')	jQuery(".post") .css("background", "#f60");	添加或更改所选元素的 CSS 属性。
.addClass('className')	jQuery(".post") .addClass("sticky");	将所列类添加到每个所选元素中。
.removeClass('className')	jQuery(".post") .removeClass("sticky");	从每个所选元素中删除所列类。
.toggleClass('className', switch-optional)	jQuery(".post") .toggleClass("sticky");	根据它们当前的状态，从每个所选元素中切换所列类。如果类存在，则删除，如果不存在，则添加。
.hasClass('className')	jQuery(".post") .hasClass("sticky");	如果每个所选元素中存在所列类，则返回 true 或 false。

让我们通过向所有帖子添加默认主题的sticky类来检查一下addClass()函数。

注意

当进行选择时，您需要从id名称和tag名称中标注class名称，但在这些 jQuery 类属性函数中，您只需要输入类名。您不需要用"."来表示它。该函数只期望一个类名，因此不是必需的。正如您可能期望的那样，您显然不能使用addClass函数向选择添加id名称（不好意思，没有addId函数！）

...
jQuery(".post").addClass("sticky");
...

现在，您可以在下一个截图中看到，通过 jQuery 而不是 WordPress，已将.sticky类添加到所有.post类中！

操纵属性

您也可以影响特定对象的属性（这对于切换我们的图像路径很方便，并提供了与class名称甚至objectID 名称一起使用的另一种方法）

示例	语法	描述
.attr	jQuery(".post") .attr();	检索所选元素的第一个元素的属性值
.removeAttr	jQuery(".post a") .removeAttr("href");	从每个所选元素中移除一个属性

提示

CSS 的更多控制力：

如果您需要以友好的跨浏览器方式处理 HTML 对象，那么很容易检索并设置任何目标选择器上的一系列属性、高度和宽度变量。偶尔，这些变量会派上用场，但您会发现大部分工作都是在前一个表中列出的函数中完成的。尽管如此，您可能会想查看 jQuery 的 CSS API 下的定位、高度和宽度函数：docs.jquery.com/CSS。

操纵元素和内容

jQuery 的 API 中的 Manipulation 部分再次非常广泛，但我发现其中一些函数对帮助我的 WordPress 和 jQuery 的增强非常有用。例如，如果你想要制作可展开或可收起的内容，你将需要一个元素来处理该事件，而不是每次都进入每篇文章并添加控制按钮（或提醒你的客户或站点编辑在每篇文章中添加控制链接或按钮 —— 是的，他们会这样做）。你可以使用 jQuery 在运行时添加和删除内容和 HTML 元素。

最有用的函数是 prepend() 和 append() 函数，允许您在选择之前或之后包含文本。这些函数允许您专注于内容，或者是选择器内的特定选择器，以便您更容易地进行目标选择。

接下来最有用的函数是 before() 和 after() 以及 instertBefore() 和 instertAfter() 函数。如果你发现需要在类名或 HTML 元素内部包装元素以添加额外的样式，那么使用 wrap() 函数就没问题了。你甚至可以删除和克隆元素！让我们更详细地看一下这些操作函数。

示例	语法	描述
.append(html 和 text)	jQuery(".post") .append("<b>文章在这里结束</b>");	将参数中的内容插入到每个选定元素的末尾。
.appendTo(selector)	jQuery("<b>文章在这里结束</b>").appendTo(".post");	执行与 append 相同的操作，只是反转了元素选择和内容参数。
.prepend(html 和 text)	jQuery(".post") .prepend("<b>文章从这里开始</b>");	将参数中的内容插入到每个选定元素的开头。
.prependTo(selector)	jQuery("<b>文章从这里开始</b>").prependTo(".post");	执行与 prepend 相同的操作，只是反转了元素选择和内容参数。
.after(string)	jQuery(".post") .after("<b>这个在后面</b>");	将参数中的内容插入到每个选定元素之后并在外部。
.insertAfter(selector)	jQuery("<b>这个在后面</b>").insertAfter(".post");	执行与 after 相同的操作，只是反转了元素选择和内容参数。
.before(HTML 和 text)	jQuery(".post") .before("<b>这个在前面</b>");	将参数中的内容插入到每个选定元素之前并在外部。
.insertBefore(selector)	jQuery("<b>这个在前面</b>") .insertBefore("class");	执行与 before 相同的操作，只是反转了元素选择和内容参数。
.wrap(html 或 functionName)	jQuery(".post").wrap("<div class=".fun" />");	在每个选定元素周围包装一个 HTML 结构。您还可以构造一个将每个元素包装在 HTML 中的函数。
.wrapAll(HTML)	jQuery(".post").wrapAll("<div />");	类似于 wrap，但将 HTML 结构放置在所有元素周围，而不是每个单独的元素周围。
.wrapInner(selector)	jQuery(".post") .wrapInner("<div class=".fun" />");	类似于包装，但它将 HTML 结构放置在所选元素的每个文本或子元素周围。
.html(HTML 和文本)	jQuery(".post") .html("<h2>替换文本</h2>");	用参数中的内容替换所选项的任何内容和子元素。
.text(仅限文本 HTML 字符将被转义)	jQuery(".post") .text("替换文本");	类似于 HTML，但只限文本。任何 HTML 字符都将被转义为 ASCII 代码。
.empty(selector)	jQuery(".post").empty(".entry");	删除所选元素的任何内容和子元素。保留元素。
.remove(selector)	jQuery(".post").remove();	类似于 empty 但删除整个元素。
.clone(selector)	jQuery(".post").clone();	复制所选元素。

在这里，我们可以看到使用这些类型的函数是多么容易：

...
jQuery(".post").append("<div style='text-align:right;
border-bottom: 1px solid #333'>End of Post</div>");
...

上述 jQuery 脚本将在以下截图中为每篇文章的末尾添加文章结束：

操作 DOM

使用 jQuery，您实际上可以遍历和处理 DOM 本身，而不仅仅是处理 jQuery 包装器集中的元素（请记住，这些不再是纯粹的 DOM 元素数组）。为了直接处理 DOM，您可以使用一些 jQuery 函数和属性。jQuery 的文档站点本身列出了大约 20 或 30 个函数，您可以使用这些函数来帮助您遍历 DOM，尽管再次强调，与 WordPress 一起工作时，您很可能不需要直接处理它。我最常使用的是 jQuery 的核心部分，而不是遍历 API 找不到的，但我使用它们类似于帮助我细化和导航 DOM 对象。

示例	语法	描述
.length 或 size()	jQuery(".post") .length;	返回所选集合中的元素数量。
.get(数字-可选)	jQuery(".post") .get(3);	这将返回原生 DOM 元素的数组。如果您不想直接处理 DOM 而不是 jQuery 包装元素，这将很方便。
.find(selector)	jQuery(".post") .find(".entry b");	返回与查找函数的选择器匹配的第一个选择器内的 jQuery 元素的数组。
.each(functionName)	jQuery(".post") .each(function(){//code});	这将对与 jQuery 选择器匹配的每个元素运行一个函数。

由于这些函数返回数字和数组，您将发现它们在故障排除时最有用。要轻松引用其中一个函数，我只需设置带有我的 jQuery 语句的 alert() 函数，如下所示：

...
alert("How many posts does this blog have? "+jQuery(".post").length);
jQuery(".post").each(function(){
alert("one alert for each .post")
});
...

您可以在以下截图中看到结果警示：

提示

一定要查看完整的遍历函数。

再次强调，jQuery 的目的是让你摆脱 DOM 的细节，但随着你对 jQuery 的运用变得更加复杂，你不想忘记这些函数在docs.jquery.com/Traversing可以使用。

你也可以更仔细地查看 jQuery 核心部分在docs.jquery.com/Core。

jQuery 秘密武器#3：事件和效果（又名：锦上添花）

好了，你是选择大师；你可以从任何人的 CSS 和 WordPress 主题中获取任何你想要的东西，你可以操纵这些选择的 CSS 属性和属性，直到牛回到家。仅从这些第一个例子中，你可能已经设法想出了自己的令人印象深刻的 jQuery 增强功能。但等等，还有更多！让我们用事件和效果把它们结合起来。

处理事件

你可以使用 jQuery 处理很多事件。你可以手动绑定和解绑元素的事件，你可以引用统一事件对象，还可以使用事件助手。我们暂时不会深入研究 jQuery 的统一事件对象，现在先看一下开始处理事件的最直接方法。

助手非常有用！

辅助函数，也经常被称为“快捷方式”，让你可以轻松地设置点击或悬停事件。你也可以轻松地切换事件。在 CSS 操作部分，我们看到了toggleClass()函数是多么有用；想象一下能够切换更多的函数。

大多数情况下，hover()函数能够满足你的需求，但如果你想要的是点击事件，那么toggle()函数可能是最合适的。toggle()函数比hover更灵活一些，因为你可以添加额外的函数，而不仅仅限于一个或两个函数。

示例	语法	描述
.click(functionName)	jQuery(".post") .click(function(){//code});	绑定一个要在单击时执行的函数到click事件类型。
.dbclick(functionName)	jQuery(".post") .dbclick(function(){//code});	绑定一个函数到click事件类型，当双击时执行。
.hover(functionName1, functionName2)	jQuery(".post") .hover(function(){//code});	适用于mouseenter/mouseleave事件类型，为所选元素绑定两个函数，分别在mouseenter和mouseleave时执行。
.toggle(functionName1, functionName2, functionName3, etc)	jQuery(".post") .toggle(function(){//code});	适用于click事件类型，为所选元素绑定两个或更多函数，交替执行。
.mouseenter(functionName)	jQuery(".post") .mouseenter(function(){//code});	绑定一个要在鼠标进入所选元素时执行的函数。
.mouseleave(functionName)	jQuery(".post") .mouseleave(function(){//code});	绑定一个函数，在鼠标离开选定的元素时执行。
.keydown(functionName)	jQuery(".post") .keydown(function(){//code});	将一个函数绑定到keydown事件类型，仅在选定的元素有 焦点 且按键按下时执行。
.keyup(functionName)	jQuery(".post") .keyup(function(){//code});	将一个函数绑定到keyup事件类型，仅在选定的元素有 焦点 且按键后释放时执行。

随着事件的发生，页面更加活跃和动态。让我们在侧边栏导航项目上设置一个非常简单的悬停效果：

...
jQuery(".widget-area li ul li").hover(function(){
jQuery(this).css("background", "#f60");
},
function(){
jQuery(this).css("background", "none");
});
...

使用 bind、unbind 和事件对象

我们只需快速概述这些函数；使用这种方法有点过火，但在特定情况下可能会派上用场，如果没有其他办法，它会让你感激 jQuery 提供的所有辅助快捷函数。

有时，您可能需要真正细化事件的控制，并使用bind()和unbind()函数，您很可能会为自己处理这些问题。您可以传递事件类型的参数，例如click或mouseenter；您也可以传递一些数据以及事件处理程序（或者您可以调用另一个函数）。数据是一个可选参数，这超出了本章的范围，但对于那些真正对使用 jQuery 进行开发感兴趣的人来说，知道您可以传递数据是很有用的（即使在本章中，我们也会稍微提及）！

让我们仔细看看并分解这些函数的各个部分：

示例	语法	描述
.bind(event type, data, functionName)	jQuery(".post").bind("mouseenter", function(){//code});	将一个函数附加到选定元素上触发的事件类型。
.unbind(event type, functionName)	jQuery(".post").bind("mouseenter", function(){//code});	从选定的元素中移除事件类型。

我们可以通过使用bind和unbind来重新创建我们用 hover 类实现的效果。这有点麻烦，最终并不是实现简单悬停效果的最优雅方式。bind的优点是可以传递数据。以下示例演示了传递数据，即我们背景的颜色，到事件的函数：

...
jQuery(".widget-area li ul li").bind("mouseenter", {color: "#f60"}, function(event){
jQuery(this).css("background", event.data.color);
jQuery(this).unbind("mouseleave");
});
jQuery(".widget-area li ul li").bind("mouseleave", function(){
jQuery(this).css("background", "none");
jQuery(this).unbind("mouseenter");
});
...

在前面的代码示例中，我们使用了 jQuery 的事件对象来传递数据。使用数据，统一的事件对象返回可以帮助您创建精细的 jQuery 转换，我经常使用对象的信息来帮助传递事件信息到函数中以获得更干净的代码，并帮助我进行故障排除。

示例	描述
event.type	返回事件类型，例如点击或mouseenter或keyup。
event.target	返回触发事件的选定元素。
event.data	返回并包含通过绑定函数传递的可选数据。
event.pageX, .pageY	确定鼠标相对于文档左边缘（pageX）或顶部（pageY）的位置。
event.result	返回由由此事件触发的事件处理程序返回的最后一个值。用于故障排除非常有用。
event.timeStamp	返回触发事件的 Unix 时间戳。

下面的代码将跟踪单击事件对象属性：

...
jQuery(".post").click(function(event){
jQuery(this).html("event type: "+event.type+"<br/>event timestamp: "+event.timeStamp+"<br/>event x: "+event.pageX+"<br/>event y: "+event.pageY);
});
...

下面是一个你可能会发现有用的事件对象函数——preventDefault()函数。它可以阻止元素的默认操作。最常见的例子是使link标签不执行其href。如果你需要知道一个元素的默认事件是否已经调用了这个函数，你可以使用isPreventDefault()函数进行测试。

示例	语法	描述
.preventDefault()	jQuery(.post a).preventDefault();	将阻止所选元素执行其浏览器设置的默认操作。
.isPreventDefault()	jQuery(.post a).isPreventDefault();	如果在一组选定的元素上调用了ispreventDefault，则返回 true 或 false。

添加效果

所以现在我们准备好了本章的有趣部分——添加华丽的效果。jQuery 库为我们提供了一些非常基本的动画和效果函数。这些都是视觉效果，如显示和隐藏，淡入淡出，向上和向下滑动，或者使用animate函数在屏幕上移动元素，更精确地说。大多数人都会对标准的快捷动画函数感到满意，但我们也会看一下animate函数。

这些函数中的大多数也允许使用回调函数，这使得在元素动画完成时触发其他动画或功能变得容易。让我们开始使用效果和动画吧。

显示和隐藏

关于显示和隐藏的第一件事情要注意的是，目标元素的大小和淡入淡出效果会受到影响。如果你只想淡化或影响大小，那么你需要查看其他动画函数。你也可以非常容易地使用我们之前讨论过的toggle事件来帮助你的效果。

示例	语法	描述
.show(speed-optional, functionName)	jQuery(".post") .css("background", "#f60").show("slow");	显示匹配的元素；如果设置了速度，对象从左到右增长，alpha 淡入从 0 到 1。完成后可以调用一个函数。速度可以是"slow"或"fast"或毫秒。
.hide(speed-optional, functionName)	jQuery(".post") .css("background", "#f60").show(200);	类似于 show 但是隐藏。如果设置了速度，元素会从右到左收缩，alpha 渐隐从 1 到 0。完成后可以调用一个函数。速度可以是"slow"或"fast"或毫秒。

滑入和滑出

你会注意到显示和隐藏对象是从右到左“增长”的。滑动是一种优雅的处理打开和关闭元素的方式，带有更直接的上下运动。

例子	语法	描述
.slideUp(speed, 函数名称)	jQuery(".post") .slideUp('slow', function() {``// 代码``});	从底部向上滑动所选元素，直到它被隐藏。速度可以是“快”或“慢”，也可以是毫秒数。动画完成时可以调用函数。
.slideDown(speed, 函数名称)	jQuery(".post") .slideDown('slow', function() {``// 代码``});	从顶部向下滑动隐藏的所选元素，直到其大小被定义。速度可以是“快”或“慢”，也可以是毫秒数。动画完成时可以调用函数。
.slideToggle()	jQuery(".post") .slideToggle('slow', function() {``// 代码``});	使用幻灯片动画切换所选元素的可见性。速度可以是“快”或“慢”，也可以是毫秒数。动画完成时可以调用函数。

淡入和淡出

良好的淡入淡出效果也很好。我想指出的是，fadeIn() 和 fadeOut() 只有在从 alpha 为 0 或 1 开始时才有效。例如：fadeOut 只有在元素的 alpha 设置为 1 时才有效，而 fadeIn 只有在元素的 alpha 设置为 0 时才有效。

我还想指出，如果之前使用了 fadeTo() 函数来淡出到特定的 alpha 数字，然后尝试全部fadeOut() 或全部fadeIn() ，这是行不通的。继续使用 fadeTo() 函数来平滑地进行渐变效果。此外，当使用 fadeOut() 时，一旦元素的 alpha 为 0，它就会完全消失。它所占用的任何空间都会发生一种相当惊人的坍塌效果。在决定使用 fadeOut() 时，请考虑此因素。

例子	语法	描述
.fadeOut(speed, 函数名称)	jQuery(".post") .fadeOut("slow",	将处于可见状态或 alpha 为 1 的所选元素淡出为 0
.fadeIn(speed, 函数名称)	jQuery(".post") .fadeIn("slow",	将一个处于隐藏状态或 alpha 设置为 0 的所选元素淡入为 1
.fadeTo(speed, alpha, 函数名称)	jQuery(".post") .fadeTo("slow",	将所选元素淡出到特定的 alpha 值，从 0 到 1

使用 animate 函数

上表中的三个动画函数将满足大部分需求。然而，你可能会发现自己处于需要更多控制的情况。在这种罕见的情况下，你可以使用 animate 函数。

例子	语法	描述
.animate(css 属性, 持续时间, 缓动, 函数名称)	jQuery(".post") .animate({width:	在所选元素上创建自定义 CSS 属性的过渡
.stop()	jQuery(".post").stop();	停止所选元素上的动画

这里有一个使用animate()函数自定义动画img的示例：

...
jQuery(".post img").animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'}, 1000, function() {
//alert("animate function finished");
});
...

在书中捕捉动画是很困难的，所以我没有尝试其他示例，但是在这里，你可以了解到帖子图像部分动画（图像高度正在减小，透明度正在向 0 逼近）的想法：

使用语句链使一切变得容易

正如我所提到的，jQuery 的众多强大功能之一是语句链，也就是说，将多个函数串在一起，这些函数将按照它们添加到链中的顺序（从左到右）在所选集合上执行，所有这些都可以在一行漂亮的代码字符串中完成。例如，我们可以用一行代码改变 CSS 属性，隐藏所选元素，并平滑地淡出它们：

...
jQuery(".post").css("background", "#f60").hide().fadeIn("slow");
...

要深入了解语句链的更多示例，请开始我们的第一个 WordPress jQuery 项目。

我们的第一个项目：扩展/折叠 WordPress 帖子

好了，这是一个快速项目，但是需要我们使用我们刚刚讨论过的一点东西。我一直喜欢 WordPress 有<!--more->功能，可以使帖子在主帖视图页面上"可压缩"，但这并不总适用于我某些类型的帖子。让我们假设我的博客将有相对较短的帖子，但我真的希望读者能够在屏幕上方看到尽可能多的标题，而无需滚动或扫描任何内容（我们将暂时忽略现实，并假装我的帖子标题仅仅是非常有趣和引人入胜的）。

我希望用户能够选择扩展他感兴趣的帖子，同时保持在所有其他帖子标题的上下文中。你可能在许多网站上看到过类似的增强功能。这是一个非常受欢迎的 jQuery 增强功能，适用于 FAQ 和新闻发布帖子。

让我们看看如何做到这一点。在你的主题中设置一个干净的custom-jquery.js文件，然后让我们开始吧。

首先，我们需要隐藏我们的帖子内容：

jQuery(".post .entry-content").hide();

接下来，我们需要一些控件，让人们点击，并给他们一些直观的说明。当然，让编辑器为每篇文章添加一个控件元素会非常低效，所以我们不会这样做（但不幸的是，我在一些项目中看到过这样做）。我们可以将其添加到主题的post.php页面，但是，如果用户禁用了 JavaScript，则该控件将显示出来。我们希望它可以优雅地退化，毕竟这是一种增强。

如果有人在移动浏览器中遇到此内容，而没有 JavaScript 支持或仅支持文本或文本到语音浏览器，则我们希望他们只能查看正常的内容，而无需任何非功能性元素干扰他们。我们将使用 jQuery 添加我们的控制元素。如果 JavaScript 被禁用，它就不会出现。

jQuery(".post").after("<div class='openIt' style='border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;'>Expand</div>");

现在我们只需要一种好的方法来显示和隐藏帖子的内容：

jQuery(".openIt").click(function() {
jQuery(this).prev(".post").find(".entry").slideToggle("slow");
});

最后，让我们确保.openIt div 中的说明更新：

jQuery(".openIt").toggle(function(){
jQuery(this).html("Close")},
function(){
jQuery(this).html("Expand")
});
...

就是这样！这是你的第一个，有用的用于 WordPress 的 jQuery 增强。下面是它的屏幕截图：

使 jQuery 可读

在现实世界中，这种增强可以被彻底清理和优化。例如，最好为.openIt拥有现有的 CSS 样式，而不是将样式应用到div。

另外，我强烈建议编写单独的、具有名称的函数。例如，这样更容易阅读：

...
jQuery(".openIt").toggle(closePost, expandPost);

然后，在下面看到：

function expandPost(evt){
//jQuery(evt.target)...
}
function closePost(evt){
//jQuery(evt.target)...
}
...

如果你发现自己与其他开发人员一起在一个项目上工作，请考虑像这样将你的函数拆分开来，而不是像我的第一个例子那样直接将它们打包到 jQuery 函数中。这样做可以使代码更易于维护，并且你可以将你的函数与其他 jQuery 函数和脚本一起重用。

摘要

总结一下，我们通过注册 WordPress 捆绑版本和使用 Google 的 CDN 来将 jQuery 包含到 WordPress 中。我们还研究了 jQuery 的三个“秘密武器”：

• 选择器和过滤器

• 操纵和改变内容

• 事件和效果

在探索 WordPress 中的 jQuery 基础知识并且对它们的工作方式有所了解之后，你可能会觉得你已经准备好了！在很多方面，你确实已经准备好了，但我们将会继续深入探讨 WordPress 和 jQuery，更详细地了解 WordPress 生成内容的部分，我们可以使用 jQuery 来增强它们：我们将更深入地研究 WordPress 主题和插件，以及看看另一种类型的插件，即 jQuery 插件。主题和插件可以使我们的 WordPress 开发工作在多个站点和项目中非常强大和灵活。

第三章：深入了解 jQuery 和 WordPress

现在我们已经了解了 WordPress 中 jQuery 的基础知识，我们准备通过理解以下内容深入了解：

• WordPress 主题、WordPress 插件和 jQuery 插件是什么以及它们的作用

• 创建您自己的 WordPress 主题、插件和 jQuery 插件的基础知识

• 如何在主题或 WordPress 插件中直接应用 jQuery 的最佳实践是什么，以及将其作为脚本或 jQuery 插件。

通过仔细研究 WordPress 的这两个主要组成部分，主题和插件，以及如何将我们的 jQuery 代码封装为 jQuery 插件，以便在项目中更轻松地使用，我们正在掌握动态 WordPress 开发的路上。

将 jQuery“插入”WordPress 网站的两种方法

您知道 WordPress 是一个令人印象深刻的发布平台。它的核心优势在于完美地将内容、显示和功能分开。同样，jQuery 是一个令人印象深刻的 JavaScript 库，花了很多精力使其跨平台工作，非常灵活和可扩展，但是，如果用户由于某种原因未启用 JavaScript，则优雅地退化。

您知道 WordPress 主题控制您网站的外观和感觉，WordPress 插件可以帮助您的网站做更多事情，但是我们将详细了解这两个组件在 WordPress 系统中的工作原理以及如何从主题或 WordPress 插件中使用 jQuery。通过这样做，您将能够更好地利用它们来开发您的 jQuery 增强功能。

说到 jQuery 增强功能，jQuery 脚本可以转换为它们自己的插件类型，不要与 WordPress 插件混淆。这使得您在 jQuery 中所做的工作可以轻松地在不同的项目和用途中使用。

在这三个组件之间，主题、WordPress 插件和 jQuery 插件，您会发现几乎您想要创建的任何东西都近在咫尺。更好的是，您会意识到大部分工作已经完成。这三种组件类型都有广泛的已开发的第三方创作库。大多数都是免费的！如果它们不是免费的，您将准备好确定它们是否物有所值。

通过了解编辑主题和创建您自己的 WordPress 和 jQuery 插件的基础知识，您将准备好穿越第三方创作的世界，并为您的项目找到最佳解决方案。您还将能够确定是与其他开发人员的主题、插件或 jQuery 插件一起工作更好还是更快，还是从头开始创建自己的。

WordPress 主题概述

WordPress 主题是根据 WordPress codex 的说法一组文件，这些文件共同产生一个带有统一设计的图形界面，用于博客。主题包括一系列模板文件和网页素材，例如图像、CSS 样式表和 JavaScript。主题允许您修改 WordPress 站点的外观方式，而无需了解 WordPress 的工作原理，更不用说修改其工作方式了。有许多站点提供免费主题或销售高级 WordPress 主题。快速搜索“wordpress 主题”将让您了解可用选项的庞大性。然而，当首次寻找或研究主题时，始终可以从 WordPress 的免费主题库开始，您可以轻松地查看和演示不同的主题和样式：wordpress.org/extend/themes/。下一个截图显示了 WordPress 主题目录的主页：

一旦您选择了要使用或处理的主题，您将通过导航到 WordPress 安装管理面板的左侧面板中的管理 | 外观 | 主题来激活主题。下一个截图显示了管理主题面板：

这就是您作为 WordPress 用户需要了解的关于主题的最低要求。在我们深入了解之前，让我们先简要了解一下 WordPress 插件和 jQuery 插件。

WordPress 插件概览

因此，主题改变了 WordPress 的外观，而不影响其功能。但是，如果您想要更改或添加功能怎么办？WordPress 插件允许对 WordPress 站点进行轻松修改、定制和增强。您可以通过安装和激活 WordPress 插件来添加功能，而不必深入了解 WordPress 的主要文件并更改其核心编程。

WordPress 开发团队非常注意，通过使用 WordPress 提供的访问点和方法来创建插件变得很容易，这些访问点和方法由 WordPress 的插件 API（应用程序接口）提供。搜索插件的最佳位置是：wordpress.org/extend/plugins/。以下是 WordPress 插件目录主页的截图：

一旦您安装了插件，只需解压文件（通常只需解压缩），然后阅读包含的readme.txt文件以获取安装和激活说明。对于大多数 WordPress 插件来说，这只是将文件或目录上传到您的 WordPress 安装的wp-content/plugins目录，然后导航到管理 | 插件 | 已安装面板来激活它。下一个截图显示了插件管理面板，其中包含了默认的Askimet、Hello Dolly和新的WordPress Importer插件的激活屏幕：

那么 WordPress 插件与 jQuery 插件有什么不同呢？在理论和意图上，差别不大，但在实践中，有相当多的区别。让我们来看看 jQuery 插件。

jQuery 插件概览

jQuery 有能力让你将你创建的脚本封装到 jQuery 函数对象中。这使得你的 jQuery 代码可以做一些关键的事情。首先，它变得更容易地移植到不同的情况和用途中。其次，你的插件作为一个函数可以集成到较大脚本中作为 jQuery 语句链的一部分。

浏览 jQuery 插件的最佳地点是 jQuery 插件页面（plugins.jquery.com/），如下截图所示：

除了已经捆绑了 jQuery 外，WordPress 还捆绑了相当多的 jQuery 插件。WordPress 自带 Color, Thickbox 以及 Form 还有大多数 jQuery UI 插件。这些插件中的每一个都可以通过在主题的 header.php 文件或 function.php 文件中使用 wp_enqueue_script 来启用，就像我们在 第二章 中学到的那样，在 WordPress 中使用 jQuery。在本章中，我们将简要学习如何直接在 WordPress 插件中启用一个 jQuery 插件。

当然，你也可以下载 jQuery 插件并将它们手动包含到你的 WordPress 主题或插件中。你可以为那些没有与 WordPress 捆绑在一起的插件这样做，或者如果你需要以某种方式修改插件。

是的，你注意到 WordPress 中没有简单的 jQuery 插件激活面板。这就是了解你选择的主题和 WordPress 插件的地方！很快你会发现，在利用 jQuery 时有很多选择。现在我们已经对 WordPress 主题、插件和 jQuery 插件有了一个概述，让我们学习如何更好地利用它们。

WordPress 主题的基础知识

到目前为止，你已经明白了 WordPress 主题基本上包含了包裹和样式化你的 WordPress 内容的 HTML 和 CSS。因此，当你将 jQuery 整合到站点中时，通常这是你会开始的地方。大多数情况下，这是一个好的方法。了解更多关于主题如何工作以及编辑它们的最佳实践只会让你的 jQuery 开发变得更加顺畅。让我们来看看主题的结构以及编辑主题的最佳实践。

小贴士

想了解更多关于 WordPress 主题设计的内容吗？

这个标题专注于你在 WordPress 中使用 jQuery 最需要了解的内容。如果你对 WordPress 主题开发感兴趣，我强烈推荐April Hodge Silver和Hasin Hayer的WordPress 2.7 Complete。除了涵盖管理 WordPress 站点的完整核心能力，第六章WordPress 和 jQuery 的 UI还对编辑和创建 WordPress 的标准主题进行了概述。

如果你真的想深入主题设计，我的标题WordPress 2.8 主题设计会带你创建一个工作的 HTML 和 CSS 设计模型，并从头开始编码。

理解模板的层次结构

我们已经讨论过，WordPress 主题包括许多文件类型，包括模板页面。模板页面有它们的结构或层次结构。这意味着，如果一个模板类型不存在，那么 WordPress 系统将调用下一个级别的模板类型。这使开发人员能够创建非常详细的主题，充分利用了所有可用模板页面类型的层次结构，使设置变得非常简单。一个完全运行的 WordPress 主题只需一个index.php文件！

要充分利用主题进行 jQuery 增强（更不用说帮助你解决常见的 WordPress 问题），最好先了解主题的层次结构。

除了这些模板文件，主题当然还包括图像文件、样式表，甚至自定义模板页和 PHP 代码文件。基本上，你可以在你的 WordPress 主题中拥有 14 种不同的默认页面模板，不包括你的style.css表或者像header.php, sidebar.php和searchform.php这样的包含文件。如果你利用 WordPress 对个别自定义页面、类别和标签模板的能力，还可以拥有更多模板页面。

如果你打开我们一直在使用的默认主题的目录，你会看到大部分这些模板文件，以及一个图像目录，style.css和js目录中的我们在第二章中开始的custom-jquery.js文件，用 jQuery 在 WordPress 中使用。下面的屏幕截图展示了 WordPress 3.0 的新默认主题Twenty Ten中的主要文件：

下一个列表包含一般的模板层次结构规则。你可以拥有的最简单的主题必须包含一个index.php页面。如果没有其他特定的模板页面存在，那么index.php就是默认的。

然后你可以开始扩展你的主题，添加以下页面：

• 当查看类别、标签、日期或作者页面时，archive.php优先于index.php。

• 当查看主页时，home.php优先于index.php。

• 当查看单个帖子时，single.php优先于index.php。

• 当查看搜索结果时，search.php优先于index.php。

• 当 URI 地址找不到现有内容时，404.php优先于index.php。

• 当查看静态页面时，page.php优先于index.php。

  • 选择自定义模板页面，例如：page_about.php，通过页面的管理面板后，将优先于page.php，而当查看该特定页面时，将优先于index.php。

• 当查看类别时，category.php优先于archive.php，然后优先于index.php。

  • 选择自定义category-ID页面，例如：category-12.php，将优先于category.php。这又优先于archive.php，而优先于index.php。

• 当查看标签页面时，tag.php优先于archive.php。这又优先于index.php。

  • 选择自定义tag-tagname页面，例如：tag-reviews.php，将优先于tag.php。这将优先于archive.php，而优先于index.php。

• 当查看作者页面时，author.php优先于archive.php。这又优先于index.php。

• 当查看日期页面时，date.php优先于archive.php。这将优先于index.php。

  注意

  您可以在此处了解有关 WordPress 主题模板层次结构的更多信息：

  codex.wordpress.org/Template_Hierarchy。

一个全新的主题

如果您想要创建一个新主题，或者像本书的情况一样，如果您将大幅修改一个主题，您将想要创建一个类似于先前解释的层次结构的目录。再次强调，因为它是分层的，您不必创建每个建议的页面，更高级的页面将承担角色，除非您另有决定。正如我所提到的，只有一个index.php文件的工作主题是可能的。

我将修改默认主题，但仍希望可以参考原始默认主题。我将复制默认主题的目录并将其重命名为：twentyten-wp-jq。WordPress 依赖于主题目录的命名空间。这意味着，每个主题都需要一个唯一命名的文件夹！否则，您将复制另一个主题。下一个截图显示了此目录的创建：

然后我将打开style.css文件并修改 CSS 文件开头的信息：

/*
Theme Name: Twenty Ten - edited for Chapter 3 of WordPress & jQuery
WordPress themenew theme, creatingTheme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: the WordPress team & Tessa Silver
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
*/
...

我的“新”主题将出现在管理面板的管理主题页面中。您可以拍摄新主题或修改后的主题的新截图。如果没有截图，框架将显示一个灰色框。由于主题的外观将有些变化，我暂时从目录中删除了screenshot.png文件，您可以在下一个截图中看到：

循环

在第一章，入门：WordPress 和 jQuery和第二章，在 WordPress 中使用 jQuery中，我们学到了 jQuery 在包装器中“循环”所选元素有多有用。WordPress 也有自己的一些循环；事实上，它非常重要，以至于被命名为“循环”。 循环是您的 WordPress 主题的重要组成部分。它按时间顺序显示您的帖子，并使用包含在 HTML 标记中的各种 WordPress 模板标记定义自定义显示属性。

在 WordPress 中，循环是一个while 循环，因此以 PHP 代码开始：while (have_posts()):，后跟模板标签the_post()。然后，所有标记和额外的模板标签都应用于每个要循环显示的帖子。然后，使用 PHP 的endwhile语句结束循环。

每个模板页面视图都可以有自己的循环，以便您可以修改和更改每种类型的帖子排序的外观和布局。每个模板页面本质上只是以不同的方式对您的帖子进行排序。例如，不同的类别或标记模板页面将帖子排序和精炼到满足特定标准。那些排序的帖子可以与主页上的帖子或存档列表中的帖子看起来不同，等等。下一个示例是从 WordPress 2.9.2 的默认 Kubrick 主题中取出的一个非常简单的循环：

...
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2>
<a href="<?php the_permalink() ?>"
rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h2>
<small><?php the_time('F jS, Y') ?>
<!-- by <?php the_author() ?> -->
</small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata">
<?php the_tags('Tags: ', ', ', '<br />'); ?>
Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments »',
'1 Comment »', '% Comments »'); ?>
</p>
</div>
<?php endwhile; ?>
...

循环被嵌套在一个大的if/else语句中，最重要的是检查是否有要排序的帖子。如果没有匹配的帖子要显示，则显示“抱歉”消息，并使用get_search_form()包含标签包含searchform.php文件。

新的 WordPress 3.0 Twenty Ten 主题将其循环分离到名为loop.php的自己的模板页面中，其中包含了相当多的if/else语句，以便相同的循环代码可以处理许多不同的情况，而不是为不同的模板页面编写单独的循环。总的来说，新主题中使用的基本模板标签以及条件和包含标签与以前的默认主题中的使用方式相同。现在只有几个新的模板和包含标签可以帮助您简化主题。

让我们仔细看一些这些模板标签、包含标签和条件标签，以及 WordPress 主题中可用的 API 挂钩。

标签和挂钩

在循环内，你可能会注意到一些有趣的代码片段被包裹在 PHP 标签中。这些代码不是纯 PHP，大多数是 WordPress 特定的标签和函数，比如模板标签，它们只在 WordPress 系统中工作。在循环中最显然重要的模板标签是the_title()和the_content()。你会注意到大多数标签和函数可以通过它们传递各种参数。你会注意到在前面的代码片段中，the_content 标签有一个参数'Read the rest of this entry »'传递给它。如果 <!--more--> 标签被放置到帖子中，这串带有右尖括号的文本将出现。

并非所有 WordPress 标签和函数都放在循环内。如果你在 第一章——入门：WordPress 和 jQuery 和 第二章——在 WordPress 中使用 jQuery 中浏览过header.php文件，你可能会注意到诸如blog_info()和body_class()，当然还有我们在安装中使用的wp_enqueue_script()来注册 jQuery。

在需要处理主题模板文件进行开发和增强时，我发现以下模板标签和函数是有用的：

• bloginfo()——此标签可以传递参数来检索关于你的博客的各种信息。在 header.php 文件中，你会注意到它最常用于查找你的样式表目录 bloginfo('stylesheet_directory') 和样式表 URL bloginfo('stylesheet_url')。它还可以显示你的 RSS URL，你的站点正在运行的 WordPress 版本，以及一些其他详细信息。更多详情，请查看：codex.wordpress.org/Template_Tags/bloginfo。

• wp_title()——此标签可以在循环外，并显示页面或单个帖子的标题（不是若干帖子的排序列表）。你可以传递一些选项，比如在标题中使用什么文本分隔符，以及分隔符文本是显示在左侧还是右侧。你还可以传递一个布尔值 true 或 false 来显示标题。wp_title("--",true,"right")。更多详情，请查看codex.wordpress.org/Template_Tags/wp_title。

• the_title()——此标签放在循环内。它显示当前文章的标题，你可以传递任何你想将标题包裹在其中的文本字符：the_title("<h2>", "</h2>")。更多详情，请查看codex.wordpress.org/Template_Tags/the_title。

• the_content()—这个标签放在循环中，用于显示帖子的内容。如果您不传递任何 params，它将在帖子中使用 <!--more--> 标签时显示一个通用的阅读更多链接。否则，您可以传递您想要的“阅读更多”说明（我甚至发现在这里传递现有的标签也起作用。the_content("Continue Reading".the_title())）。有关更多详细信息，请查看 codex.wordpress.org/Template_Tags/the_content。

• the_category()—这个标签也必须放在循环中，它显示分配给帖子的类别的链接或链接。如果有多个类别，您可以传递您选择的文本分隔符。the_category(", ")。有关更多详细信息，请查看 codex.wordpress.org/Template_Tags/the_category。

• the_author_meta()—这个标签也必须放在循环中。它有丰富的参数可供传递。你可能最熟悉的是 the_author_meta("nickname")，或者 the_author_meta("first_name")，或者 the_author_meta("last_name")。你还可以获取作者的简介，the_author_meta("description")，以及电子邮件和网站的 URL。最好的办法是查看 Codex，了解可以使用这个标签做什么：codex.wordpress.org/Template_Tags/the_author_meta。

  注意

  WordPress 模板标签库非常丰富，您可以在主题中使用这些标签的创造性方式几乎无限。我包括了使模板有用且出色的标签，但请务必查看 Codex：

  codex.wordpress.org/Template_Tags。

条件标签

条件标签可以在模板文件中使用，根据页面匹配的条件改变显示的内容以及如何显示该内容。例如，您可能希望在一系列帖子上方显示一小段文字，但只在博客的主页上显示。使用 is_home() 条件标签，这个任务就变得很容易。

几乎可以为一切内容编写条件标签；在所有条件标签中，以下是我在主题开发中最常需要的几个：

• is_page()

• is_home() 或 is_front_page()

• is_single()

• is_sticky()

所有这些函数都可以使用以下参数：帖子 ID 或页面 ID 数字，帖子或页面标题，或帖子或页面别名。尽管主题很棒，但我相信您已经遇到过这样的困境，即您或您的客户不希望每个页面或帖子上都有完全相同的侧边栏。

我使用这些条件标签来确保特定页面可以打开或关闭特定样式或内容 div，并显示或不显示特定内容。这些标签真的有助于使项目站点具有真正的自定义网站感觉。

注意

条件标签的乐趣并不止于此。你可能会发现还有许多其他标签在帮助你的主题自定义方面非常有用：

codex.wordpress.org/Conditional_Tags.

模板包含标签

在 index.php 模板页面和其他模板页面，比如 single.php 或 page.php 等等，你可能会注意到这些包含标签。它们允许你将标准页面包含到其他模板页面中：

• get_header()

• get_footer()

• get_sidebar()

• comments_template()

• 自定义包含：include(TEMPLATEPATH."/file-name.php")

创建自定义头部、尾部、侧边栏包含

有一段时间了，WordPress 2.7 引入了创建自定义头部、尾部和侧边栏模板的能力。你只需创建自定义的头部、尾部或侧边栏，并使用标准的 include 模板标签调用它。确保添加一个文件前缀为 header-、footer- 或 sidebar-，以及你自己的文件名。然后，你可以按如下方式调用你的自定义模板文件：

• get_header('customHeader') 将包含 header-customHeader.php

• get_footer('customFooter') 将包含 footer-customFooter.php

• get_sidebar('customSidebar') 将包含 sidebar-customSidebar.php

插件钩子

一般来说，除非你是插件开发者，否则你可能没有太多需要研究插件 API 的需求。然而，有一些钩子应该放在主题中，以便插件能够有效地与你的主题配合使用。如果你正在编辑一个主题，请确保不要删除这些钩子标签，或者如果你正在创建一个自定义主题，请确保包含它们：

• wp_head: 放在 header.php 模板的 <head> 标签内：

  <?php wp_head(); ?>
  
  

• wp_footer: 放在 footer.php 模板中：

  <?php wp_footer(); ?>
  
  

• wp_meta: 你最有可能将这个钩子放在sidebar.php模板中。但是，最好在你打算让插件和小部件出现的任何地方添加这个钩子：

  <?php wp_meta(); ?>
  
  

• comment_form: 放在 comments.php 和 comments-popup.php 中，在 </form> 结束标签之前：

  <?php do_action('comment_form'); ?>
  
  

项目：编辑默认主题中的主循环和侧边栏

好了！那看起来可能是关于主题的很多知识！作为一个只是想用 jQuery 增强 WordPress 网站的人，你可能会问：“真的有必要了解这些吗？”即使你对创建自定义主题没有兴趣，但是偶尔在使用 jQuery 时，了解 WordPress 主题的工作原理、主题输出的 HTML 标记以及大多数不同标记和函数的作用，对你会非常有用。

当然，在第二章中，在 WordPress 中使用 jQuery，我强烈建议您学习如何精通 jQuery 的选择器，以便能够在不编辑其主题的情况下增强任何 WordPress 网站。虽然您应该对 jQuery 的选择器和过滤器了如指掌，但这并不总是最快或最简单的方式。有时，虽然您可以选择和编辑页面上的任何内容，但 jQuery 的选择过程和语句链显得臃肿；如果某些元素只有特定的 HTML 标签，class或id属性，那么它或许可以被清理并缩减代码。有很多情况下直接编辑主题将使您能够更快地创建 jQuery 增强功能，并减少代码。更不用说，许多主题都很棒，但通常能够通过简单的主题调整使其更好并更加个性化适合您的网站。现在让我们做这个，并将我们刚刚学到的关于主题的东西付诸实践。

现在，我们使用的新的 Twenty Ten 默认主题很好，但是如果在帖子中日期更加突出，并且侧边栏被清理得更像“官方”链接，而不只是项目列表，会更好。

改变循环

既然我们正在修改主题，我想改变循环显示的内容。我们要假设这是一个客户的网站，我知道客户最终会想要关注帖子的作者（在这个“假设”的网站上有很多作者），尽管日期很重要，但它不应该与作者的姓名放在同一行。我相信你肯定见过一些博客在帖子旁边有一个小日历或 iCal 样式的图标。我认为那是显示类似信息的一种视觉上吸引人的方式，而且不会占据太多空间。

使用免费的开源矢量编辑器 Inkscape (inkscape.org)，我制作了一个可以在顶部显示当天日期并在下面显示三个月份缩写的日历背景图标。该图标约为 32 像素正方形。您可以使用您喜欢的任何图形程序，比如 GIMP，Photoshop，Illustrator 等，来创建一个类似的图标，或者您可能在网上找到免版税的图像。

为了让我们的日历背景在日期后面并且格式正确，让我们深入循环。默认主题的循环位于名为 loop.php 的模板文件中。如果这是您第一次使用 Twenty Ten 默认主题，那么这个循环可能比您所习惯的要长得多。最终，我们对显示在网站“主页”或默认博客页面上的“正常”或“其他一切”视图感兴趣。您会在代码的第 127 行左右找到它，以 <div class="entry-meta"> 开头。

要开始，注释掉自定义的 PHP 函数 twentyten_posted_on（它引用了主题的function.php文件中的自定义函数，这有点超出了这个标题的范围），然后在粗体中添加以下 HTML 标记和 PHP 模板标签:

...
<div class="entry-meta">
<?php //twentyten_posted_on();//comment this out ?>
<small class="date">
<?php the_time('d') ?><br/>
<span><?php the_time('M') ?></span>
</small>
</div><!-- .entry-meta -->
...

我们要关注的是日期显示。日期以称为the_time的模板标签显示，其中的参数设置为显示完整的月份，"如所说"的日期和年份；例如；2010 年 2 月 4 日。

我只想显示日期的数字和月份的三个字母缩写。the_time标签的参数实际上不允许我添加 HTML 换行标记，因此我将我的日期分为两个独立的the_time标签调用，以便我可以更好地控制 HTML。我还希望确保我的样式仅适用于这个循环，而不适用于其他模板页面循环中包裹的<small>日期和内容，因此我一定要为<small>标签添加自定义date类。我还将年份日期显示包含在一些<span>标签中，以便我可以对其进行额外的样式控制。我的日期显示和类最终如下：

...
<small class="date">
<?php the_time('d') ?><br/>
<span><?php the_time('M') ?></span>
<!-- by <?php the_author() ?>-->
</small>
...

接下来，我们打开 CSS 的style.css样式表，并添加特殊类名的规则到日期显示，并修改标题显示。我只是简单地将我的修改添加到style.css样式表的底部。如果碰巧我的样式名称与样式表中已经定义的任何东西相同，我的规则将继承自上一个规则并进行更改（或者明确表示我需要更独特的样式名称）。

首先，我会将主页上的h2标题（位于.post类中）向上移动 40 个像素，以便为我的日期腾出空间。接下来，我将把我的日期移到.post类中，向上移动约 25 个像素，使其与标题并排。在这条规则中，我还为自己在 Inkscape 中创建的dateBackground.png分配了背景，并微调日期数字的大小、颜色和其他一些属性。最后，我在 span 标签中设置了月份显示大小和颜色，结果如下：

...
/*----------twentyten chapter 3 customizations------------*/
.home .post .entry-title{
padding-left: 40px;
}
.post small.date{
display:block;
background: url(images/dateBackground.png) no-repeat;
margin-top: -25px;
padding-top: 4px;
width: 32px;
height: 32px;
font-size: 20px;
line-height: 12px;
text-align: center;
color: #eee;
}
.post small.date span{
font-size: 10px;
color: #666;
}
...

然后，下一张截图展示了我们帖子的标题和日期的现在的样子：

不错！现在，让我们来处理一下侧边栏。

改变侧边栏

侧边栏很容易。Twenty Ten 默认主题中的整个侧边栏都是小部件化的，因此我们想要重新排序的任何内容都可以通过管理面板进行。但是，我们确实想微调一下侧边栏项目的项目符号列表的 CSS。在修改一个不是从头开始创建的主题时，最好总是将新的类添加到标记和样式表中，而不是更改或编辑作者放置的任何原始样式。这样做只会使多种原因下还原更容易。正如你之前可能已经注意到的，我总是将我的新自定义样式添加到style.css样式表的底部。

让我们从在编辑器中打开sidebar.php开始，只需添加一个新的类名，我们可以用来为加载到任何小部件区域的任何小部件设置样式。无论我在哪里找到<ul class="xoxo">标签，我都会在.xoxo 类之后添加一个额外的类，称为.currentsidebar。这在sidebar.php文件中大约在第12行附近出现了两次，还有一次大约在第51行附近。

...
<ul class="xoxo currentsidebar">
...
<ul class="xoxo currentsidebar">
...

接下来，我们现在只需打开我们的style.css样式表，在其底部再次编写我们的新的.currentsidebar CSS 规则以影响列表项：

...
.currentsidebar li{
padding: 0;
margin: 15px 0 20px 0;
}
.currentsidebar li ul li{
list-style: none;
padding: 5px 0; margin: 0 0 0 -15px; border-bottom: 1px solid #ddd;
font-size: 105%;
}
...

哇！正如您在下一个截图中所见，我们的页面和侧边栏导航现在是这样的：

如您所见，对 WordPress 主题进行微调很容易。您不仅可以自定义主题以满足您的外观和功能需求，还可以想象调整主题的 HTML 标记以便更轻松地添加您的 jQuery 增强功能有多容易。接下来，让我们转向 WordPress 插件。

WordPress 插件的基础知识

现在说实话，撰写 WordPress 插件的细节远远超出了本标题的范围；我的目标是向您展示简单 WordPress 插件的结构以及如何构建插件的基础知识。理解这一点，您可以开始编写自己的基本插件，并且在评估其他人的插件时更有信心，看看它们为您的 WordPress 站点提供了什么样的功能，以及您是否需要为您的 jQuery 增强功能进行任何调整。即使是我们将要进行的简单和基本的工作，您也会看到 WordPress 插件确实有多么强大。

提示

想成为 WordPress 插件之星？

您可以再次选择WordPress 2.7 完全手册，作者是April Hodge Silver和Hasin Hayder。其中有一章介绍了插件，指导您创建非常有用的简单插件，以及一个更复杂的插件，可以写入 WordPress 数据库。此外，您还可以查看Vladimir Prelovac的WordPress 插件开发入门指南。不要被标题迷惑，Vladimir 将通过清晰的、逐步的代码讲解，使您按照 WordPress 的编码标准生成功能丰富、动态的 WordPress 插件。

使用插件需要一些 PHP 经验。对于非 PHP 开发人员，我将保持这个解释相当简单，而有 PHP 经验的人应该能够看到如何在 WordPress 中扩展此示例以便于您。总的来说，如果您迄今为止一直在本书中跟随 jQuery 和 WordPress PHP 示例，那么您应该没问题。

与主题一样，WordPress 插件需要一点结构才能开始使用它们。插件文件没有明确定义的层次结构，但你至少需要一个带有特殊注释的 PHP 文件，以便 WordPress 可以在插件管理页面中显示它。虽然有一些单文件插件存在，比如你的 WordPress 安装中自带的 Hello Dolly 插件，但是当你开始开发时，你永远不知道一个插件可能会如何增长。为了安全起见，我喜欢将我的插件组织成一个唯一命名的文件夹。再次强调，与主题一样，WordPress 依赖于插件目录的命名空间，因此唯一性非常重要！

在wp-content/plugins目录中，你可以放置一个独特的文件夹，在其中创建一个.php文件，并在文件的开头，在<?php ?>标签内包含以下头信息。只有粗体信息是绝对必需的。其余信息是可选的，并填充了管理插件页面中的管理插件。

<?php
WordPress pluginabout/*
Plugin Name: your WordPress Plugin Name goes here
Plugin URI: http://yoururl.com/plugin-info
Description: Explanation of what it does
Author: Your Name
Version: 1.0
Author URI: http://yoururl.com
*/
//plugin code will go here
?>

提示

确保你的<?php标签前后没有任何空格。如果有的话，WordPress 会显示一些错误，因为系统会出现关于页面标题已经被发送的错误。

一旦你在插件目录中设置好了自己的.php文件，你就可以在其中添加一个基本的 PHP 函数。然后，你可以决定如何调用该函数，使用一个动作挂钩或一个过滤器挂钩。例如：

<?php
filter hookusing/*
Plugin Name: your WordPress Plugin Name goes here
Plugin URI: http://yoururl.com/plugin-info
Description: Explanation of what it does
Author: Your Name
Version: 1.0
Author URI: http://yoururl.com
*/
function myPluginFunction(){
//function code will go here
}
add_filter('the_title', 'myPluginFunction');
//or you could:
/*add_action('wp_head', 'myPluginFunction');*/
?>

记得在前面的主题部分，我讲解了插件挂钩以及它们在主题中的重要性吗？这就是原因所在。如果你的主题中没有wp_head或wp_footer，许多插件就无法正常运行，而且你只能使用你自己编写的插件。在我的插件中，我主要使用wp_header和init动作挂钩。

幸运的是，大多数过滤器挂钩在你的插件中也会起作用，因为 WordPress 会在循环中运行它们。在很大程度上，你将在插件中使用the_title和the_content过滤器挂钩完成大部分工作。当 WordPress 在循环中循环这些模板标签时，每个过滤器挂钩都会执行你的函数。

提示

想知道有哪些可用的过滤器和动作挂钩吗？

列表是详尽的。事实上，它是如此之庞大，以至于 WordPress codex 似乎没有将它们全部记录下来！如果你想要查看所有动作和过滤器挂钩的最完整列表，包括 2.9.x 版本中可用的新挂钩，你应该查看亚当·布朗的WordPress 挂钩数据库： adambrown.info/p/wp_hooks

对数据库感到不知所措？当然，查看弗拉基米尔的WordPress 插件开发：初学者指南将帮助你入门，并提供一系列动作和过滤器挂钩。

你现在理解了 WordPress 插件的基础知识！让我们开始做点什么吧。

项目：编写一个 WordPress 插件以显示作者简介

正如我们所讨论的，插件可以帮助扩展 WordPress 并赋予其新功能。然而，我们已经看到，在大多数情况下，直接向主题添加 jQuery 脚本并在各处编辑其模板页面即可完成任务。但让我们想象一个更复杂的情况，使用我们修改过的默认主题和本章前一个项目中提到的假想客户。

当我们调整默认主题时，我想到这个客户可能希望她网站的重点更加倾向于新闻报道，因此，她希望每篇文章的作者引起一些关注。我是对的，她是这样希望的。然而，有一个问题。她不只是想要显示他们的 WordPress 昵称；她更希望显示他们完整的名字，因为这更加专业。她还想显示他们简要的自传，并附带一个指向他们自己网址的链接，但又不想让这些信息“妨碍”文章本身，也不想让它们丢失在文章底部。这里真正有趣的是；她希望这种变化不仅影响到这个站点，还要覆盖她的一系列特定类型新闻站点的网络，至少有 20 个（天啊，我忘记了她有这么多站点！幸好她只是假设的）。

对于这个特定的 WordPress 站点，很容易进入并注释掉我们之前处理过的自定义函数：添加 the_author 标签并显示两次，为每个标签传递一些参数以显示名字的第一个和最后一个字。我还可以添加一个标签来显示用户面板中的作者简介片段和 URL（如果他们填写了该信息）。此外，很容易添加一小段 jQuery 脚本，使得该简介 div 在鼠标悬停在作者姓名上时显示出来。然而，将所有这些工作复制并重新复制到其他 20 个不同的站点中，其中许多站点不使用默认主题，大多数站点也没有将 jQuery 包含到他们的主题中，听起来确实是一项不必要的工作（此外，客户提到她正在考虑一些新主题用于一些站点，但她还不知道哪些站点将获得哪些新主题）。

这是一项不必要的工作量。与其修改这个主题，然后在其他 20 个主题中来回测试、粘贴、测试和调整，不如花费这些时间创建一个 WordPress 插件。然后，将其轻松部署到客户的所有站点上，而且每个站点使用的主题都不重要。让我们开始吧！

编写插件

首先，浏览客户的站点网络，不多的站点显示作者的昵称或姓名。只有少数几个这样做，而其中的姓名是不引人注意的。有一个插件显示作者的姓名会更容易，然后注释掉或删除一些主题中的 the_author 标签。

这里有一个需要注意的小细节：模板标签在插件中表现得不太好。这是因为模板标签，即一个函数，被设置为显示文本，而在另一个函数内，我们实际上不需要这样。我们想要做的是获取信息并将其传递给我们的钩子，当插件函数运行时显示它。大多数模板标签都有可比的 WordPress 函数，它们只会获取信息而不会立即写入或显示它。对于编写插件，我喜欢查看函数参考，而不是查看 WordPress Codex 的模板标签函数列表。几乎以get_开头的任何内容都适用于插件。有关更多详细信息，请参阅codex.wordpress.org/Function_Reference。

Codex 函数参考有一个get_the_author()，它将满足我在这个项目中的一些需求，但我更喜欢使用在 WordPress 版本 2.8 中出现的一个新函数，称为get_the_author_meta()。与get_the_author不同，您可以向此函数传递超过 25 个参数，以了解您在 WordPress 用户上关心的几乎任何内容。

接下来给出的是我的插件基本的addAuthor函数，然后是我的add_filter钩子，它将在每个帖子的内容上运行我的函数。您可以阅读加粗的注释以获取更多详细信息：

...
//add author function
function addAuthor($text) {
/*the $text var picks up content from hook filter*/
//check if author has a url, a first name and last name.
//if not, no "Find out more" link will be displayed
//and just the required nickname will be used.
if (get_the_author_meta('user_url')){
$bioUrl = "<a href='".get_the_author_meta('user_url')."'>
Find Out More</a>";
}
if (get_the_author_meta('first_name')
&& get_the_author_meta('last_name')){
$bioName = get_the_author_meta('first_name').
" ".get_the_author_meta('last_name');
}else{
$bioName = get_the_author_meta('nickname');
}
//check if author has a description, if not
//then, no author bio is displayed.
if (get_the_author_meta('description')){
$bio = "<div class='authorName'>by <strong>".$bioName."</strong>
<div class='authorBio'>"
.get_the_author_meta('description')." ".$bioUrl."
</div>
</div>";
}else{
$bio = "<div class='authorName'>
by <strong>".$bioName."</strong>
</div>";
}
//returns the post content
//and prepends the bio to the top of the content
return $bio.$text;
}//addAuthor
//calls the post content and runs the function on it.
add_filter('the_content', 'addAuthor');
...

您会注意到在上一个代码片段中，我特别注意检查 WordPress 用户的个人资料中是否填写了 URL，并且他们是否已添加了他们的名字和姓氏以及简介描述。如果没有，我的插件将仅显示用户的昵称（昵称是必填字段），通常与用户的登录名相同。

如果任何作者没有填写他们的名字和姓氏，或者没有填写简介，我会让我们的客户强制他们更新他们的个人资料。与此同时，插件不会显示任何空白、空的或损坏的内容，因此不会造成任何损害。

现在我只关注将作者的姓名和简介放入 WordPress 中，现在姓名和简介应该已经生成了，我只是想确保简介的样式漂亮，以便与帖子内容区分开来，但又不会太过显眼。

为此，我将在我的插件目录中添加一个名为authover.css的样式表，并添加以下样式：

.authorBio {
border-top: 2px solid #666;
border-bottom: 2px solid #999;
background-color: #ccc;
padding: 10px;
font-size: 10px;
}

现在，我将 CSS 放在自己的样式表中，而不是作为另一个功能脚本化到插件中的字符串，主要是为了演示使用 Script API 中的wp_register_style和wp_enqueue_style函数的最佳实践。正如使用wp_enqueue_scripts函数帮助我们避免与其他 JavaScript 和 jQuery 库冲突一样，这些函数注册新样式表并加载它，确保不会与其他同名样式表冲突。

对于样式表，我很确定它将是我插件的独特之处，甚至更甚的是，仅仅针对一个单一规则来说，这可能有些小题大作，但你应该了解这种方法，特别是当你查阅更健壮的常用插件时，你可能会遇到它。而且，这会使插件在未来更容易扩展。你不需要在 PHP 字符串中编辑或修改 CSS。事实上，如果你要编写一个样式表足够长的插件，你可以把样式表交给一个 CSS 设计师，而你专注于 PHP 功能。更不用说，这样可以使你的插件对其他用户更有用。一个没有 PHP 经验的 WordPress 用户可以下载并安装这个插件，并轻松编辑其 CSS 样式表，使其在其网站设计中看起来很好。

下面是我的addCSS函数。此外，不同于通过过滤挂钩激活样式表，我希望样式表可以在 WordPress 加载之前注册并加载，甚至在wp_head挂钩之前！因此，你会看到我使用了init动作挂钩。

除了我加粗的评论之外，你还会注意到WP_PLUGIN_URL变量的使用。这类似于我在主题部分向你展示的TEMPLATEPATH变量，用于创建一个自定义包含，不同的是，这个变量在插件中使用，帮助 WordPress 动态地找到你的插件文件，而不是硬编码它们。

请阅读下一个代码块中加粗的评论，了解每个代码语句的作用：

...
// Some CSS to position for the paragraph
function authorCSS() {
//These variables set the url and directory paths:
$authorStyleUrl =
WP_PLUGIN_URL . '/add_author_bio-tbs/authover.css';
$authorStyleFile =
WP_PLUGIN_DIR . '/add_author_bio-tbs/authover.css';
//if statement checks that file does exist
if ( file_exists($authorStyleFile) ) {
//registers and evokes the stylesheet
wp_register_style('authorStyleSheet', $authorStyleUrl);
wp_enqueue_style( 'authorStyleSheet');
}
}
//evoke the authorCSS function on WordPress initialization
add_action('init', 'authorCSS');

好了！应该没问题了。现在我们需要激活我们的插件并在 WordPress 中检查一下。

在 WordPress 中激活我们的插件

我们的插件已经在 WordPress 的wp-content/plugins目录中。这意味着我们只需要导航到我们的管理插件页面并激活它即可。

代码注释头中的Plugin Name：空间中名为jQuery Add Author Biography的插件显示在插件表中，如下截图所示：

一旦插件被激活，我们可以导航到网站上查看它的运行情况：

它正在工作！主题中不包含the_author_meta标签，现在显示作者的全名和简介描述。简介描述使用了我们插件类中的 CSS 规则来进行样式设置。

你现在已经手动编辑了一个主题，并进一步通过从头开始创建一个 WordPress 插件来扩展了这个网站。干得好！但是你说什么？你希望再做一点 jQuery？你是对的。让我们通过创建一个 jQuery 插件来进一步增强这个网站。

jQuery 插件的基础

我们会发现，与 WordPress 主题和插件相比，jQuery 插件实际上并不那么复杂。

要设置一个 jQuery 插件，你需要遵循 jQuery 的插件结构。基本结构包括如下设置 jQuery 函数来定义你的插件。请注意加粗的.fn添加到 jQuery 对象中。这是使你的函数成为 jQuery 函数的关键。

jQuery.fn.yourFunctionName = function() {
//code
};

在其中，最好的做法是添加一个this.each(function(){...})来确保你的函数会运行每个 jQuery 选择器中的每个项目。

jQuery.fn.yourFunctionName = function() {
return this.each(function(){
//code
});
};

与 WordPress 不同，WordPress 在主题 CSS 样式表和插件头部需要特定格式的注释，而 jQuery 不需要注释头部，但在顶部添加一个是很好的习惯。

/*
You can name the plugin
Give some information about it
Share some details about yourself
Maybe offer contact info for support questions
*/
jQuery.fn.yourFunctionName = function() {
return this.each(function(){
//code
});
};

注意，你在插件中包装和使用的每个函数和方法都必须以一个";"分号结尾。否则你的代码可能会出错，如果你压缩它，它肯定会出错。

这就是，一个 jQuery 插件所需要的全部。现在，让我们深入了解如何使用 jQuery 插件来增强我们的 WordPress 插件的输出。

项目：jQuery 淡入子 div 插件

采用前面讨论过的所需的 jQuery 函数，我将编写一个基本函数，它不仅可以传递给主要的 jQuery 包装选择器，还可以传递一个额外的选择器参数，以便轻松地定位所选择的div的子元素，或者传递参数的 jQuery 选择器的特定参数。

再次注意，跟着我的authorHover函数里的粗体注释一起看：

...
//sets up the new plugin function: authorHover
jQuery.fn.authorHover = function(applyTo) {
//makes sure each item in the wrapper is run
return this.each(function(){
//if/else to determine if parameter has been passed
//no param, just looks for the child div
if(applyTo){
obj = applyTo
}else{
jQuery pluginchild div pluginobj = "div";
}
//hides the child div or passed selector
jQuery(this).find(obj).hide();
//sets the main wrapper selection with a hover
jQuery(this).css("cursor", "pointer").hover(function(){
//restyles the child div or passed selector
// and fades it in
jQuery(this).find(obj).css("position","absolute")
.css("margin-top","-10px").css("margin-left","-10px")
.css("width","400px")
.css("border", "1px solid #666").fadeIn("slow");
}, function(){
//fades out the child selector
jQuery(this).find(obj).fadeOut("slow");
});
});
};

就是这样。现在我们已经创建了一个 jQuery 插件脚本，让我们首先在我们的主题中快速测试一下。我们所需要做的就是将我们的新 jQuery 插件命名为jquery.authover.js嵌入到我们的主题中，在wp_enque_script调用下面，在wp_head hook 下方调用它：

...
<script type="text/javascript">
jQuery(function(){
jQuery(".authorName").authorHover();
});
</script>
...

我们可以在我们的网站上查看结果。我截取了两张截图，这样你就可以看到淡入效果。在下面的截图中，你可以看到新的div开始淡入：

在接下来的截图中，你可以看到完成的淡入动画：

额外加分：将你的新 jQuery 插件添加到你的 WordPress 插件中

现在你可以自由地安装你的 WordPress 插件，并在需要时在尽可能多的网站上包含 jQuery 插件！但是，如果你想知道的话，是的，我们可以进一步完善安装过程，只需将此 jQuery 插件合并到我们的 WordPress 插件中即可。

第一步是简单地将我们的jquery.authover.js脚本放在我们的插件目录中，然后使用wp_enqueue_script来调用它。你需要特别注意wp_enqueue_script函数的使用，因为如果主题或插件中还没有注册 jQuery 1.4.2，它将会自动包含 jQuery 1.4.2！这意味着客户的网站，如果还没有包含 jQuery，也不用担心！只需安装此插件即可自动包含它！

...
function addjQuery() {
wp_enqueue_script('authover',
WP_PLUGIN_URL . '/add_author_bio-tbs/jquery.authover.js',
array('jquery'), '1.4.2' );
}
...

然后，我们将在 WordPress 插件中添加一个函数，该函数会写入使用插件的authorHover函数的 jQuery 脚本。通常情况下，最好并且推荐通过wp_enque_script函数加载所有脚本，但对于非常小的、定制化程度极高的脚本，你确信不会出现冲突，并且你知道 jQuery 已经正确加载（就像我们使用插件一样），如果你愿意，你可以像这样硬编码脚本标签：

...
function addAuthorHover(){
echo '<script type="text/javascript">
jQuery(function(){
jQuery(".authorName").authorHover();
});
</script>';
}
...

最后，我们添加激活这些功能的动作过滤器：

...
add_action('init', 'addjQuery');
add_action('wp_head', 'addAuthorHover');
?>

现在，如果你从主题中移除你的 jQuery 插件，并确保你的插件已被激活，你应该看到与之前完全相同的结果！在下一个截图中，你会注意到我已经添加了一个 URL 到我的个人资料中，现在了解更多功能设置得非常好，如果没有 URL 存在，它会自动降级。太棒了。

综合起来：编辑主题还是创建自定义插件？

在本章中，我们学习了编辑主题、创建 WordPress 插件和 jQuery 插件的简易方法。对于大部分 WordPress 开发工作，直接将 jQuery 增强功能添加到主题中就可以了。如果你觉得你的 jQuery 脚本有点复杂，并且你被允许编辑主题（当然，假设你不会破坏布局或大幅改变外观），你可能会发现在 WordPress 内容中包裹自定义 HTML 标签，带有特殊的class或id属性是一个巨大的帮助和时间节省。

本章项目示例中的“假设客户请求”还表明，如果你的工作有可能或将被重复使用或部署到多个单独的 WordPress 安装中，你应该考虑将工作封装在 jQuery 插件、WordPress 插件中，或者我们发现的两者都要考虑。

除了考虑你的工作是否需要被重复使用或部署之外，你可能还想考虑 jQuery 增强和 WordPress 主题的寿命。很容易认为 jQuery 增强实际上更多是主题的一部分，因为它在视觉上影响主题，但真的是这样吗？我发现，我更多的 WordPress 和 jQuery 开发工作似乎集中在将 jQuery 开发封装到 WordPress 插件中，或者使 WordPress 插件更有效地使用 jQuery。

由于将 jQuery 包含到 WordPress 站点中只有两种方法，通过主题或插件，如果你对编辑和创建插件感到舒适，你可能会发现这是更好的方法（当然，总是有例外的）。使用 jQuery 增强 WordPress 插件，甚至将 jQuery 插件封装在 WordPress 插件中，都将使您能够轻松地独立扩展主题设计和任何 jQuery 功能/增强。

这种方法非常方便，如果你喜欢经常重新设计或更新主题，或者你有一个有点“主题换来换去”的客户。如果你想保留酷炫的 jQuery 增强表单、图像和画廊灯箱以及各种其他功能，甚至只是你为网站创建的“整洁眼睛糖果”，而不必一次又一次地手动更新一个新主题，创建一个插件是一个不错的选择，不管是为了 jQuery、WordPress 还是两者兼有。

最终，这取决于你和你的舒适度，以及对项目最有利的做法，但我发现，除了一些例外，我们将在后面的章节中提到的例子，尝试让大多数 jQuery 增强功能不要嵌入 WordPress 主题中对我来说效果很好。

摘要

现在你应该理解以下内容：

• WordPress 主题、WordPress 插件和 jQuery 插件是什么。

• 如何编辑主题并创建自己的基本 WordPress 和 jQuery 插件。

• 了解何时编辑和自定义主题，或者制作 WordPress 插件、jQuery 插件或三者兼有的最佳实践！

掌握了这些信息，我们将继续进行下一章，在那里我们将看看如何使用一个 jQuery 插件与一个即插即用的 WordPress 插件。我们还将讨论如何通过 jQuery 增强和扩展 WordPress 插件的功能。准备好用灯箱模态窗口迷住用户，并用易于使用的表单给用户带来惊喜。

第四章：用更少的东西做更多的事情：利用 jQuery 和 WordPress 的插件

在这一点上，你已经足够了解 jQuery 和 WordPress 基础知识，以及将它们整合在一起的不同方法，你可以开始在解决方案中真正发挥创造力。在本章和接下来的三章中，我们将卷起袖子，为一些经常请求的项目制定解决方案，并开始让 jQuery 在我们的 WordPress 网站中执行一些有用且很酷的工作。

我们将把 WordPress 和 jQuery 的所有可用组件结合起来。在本章中，我们将：

• 使用非常强大和受欢迎的 jQuery 插件 ColorBox，由Jack Moore 的 Color Powered 提供。

• 我们还将使用由Oliver Seidel 的 Deliciousdays 提供的强大且受欢迎的 WordPress 插件 cforms II。

• 然后，我们将自定义我们的默认主题，使其与 cforms II 和 ColorBox 无缝配合，为我们的网站提供无缝的活动注册体验。

• 我们还没有完成！然后，我们将通过 jQuery 来增强 cform II 已经很棒的验证，以获得流畅的用户体验。

准备好让你的 WordPress 网站发挥作用！

项目概述：无缝活动注册

虽然我们将继续使用默认主题，但我们将为这一章的 jQuery 增强设想一个不同的假想客户和情景。

在这种情况下，“客户”是一个非营利性/意识组织。他们在他们的 WordPress 网站中创建了一个活动类别，每当计划举办新活动时，每个活动的协调员都可以将有关即将举办活动的信息发布到活动类别。

他们大多数的活动都是免费的，但非常混乱，因为每个协调员决定如何接受活动的注册，通过电子邮件或电话。人们感到困惑，向网站上的错误人发送电子邮件，然后无法确定谁参加了哪些活动，以便组织的领导者可以从忙碌的活动协调员那里收集统计数据，以跟踪活动对其事业的有效性。

好消息是，我们仍然可以帮助他们解决所有这些问题。

“客户”想要什么

在坐下来讨论所有选项之后，最终，他们希望有一个简单的注册表单，可以将活动名称传递给它，然后通过电子邮件发送给活动管理员，后者将 RSVP 分配给各个活动组织者。

他们还收到了注册者的反馈，抱怨活动的发布日期使他们困惑：他们不注册活动，因为除非协调员将日期加粗或将其放在标题中，否则看起来就像活动是在那一天发生的，或者已经过去了。因此，客户希望重新设计并清理一下他们的活动发布模板，以便更容易识别它们为活动，而不是网站上的其他帖子。

最后，也是最重要的是，他们对最近在几个网站上看到的反馈和其他形式印象深刻并受到影响，他们真的很希望他们的注册表单在模态框中打开，这样人们就可以在停留在活动页面的同时注册活动。当他们完成活动注册后，他们可以继续浏览活动类别并轻松注册更多活动。

第一部分：准备好所有设置

幸运的是，有了一点 WordPress 和 jQuery 知识，这个任务并不像听起来那么复杂。在上一章中，我赞美了将设计和功能分开以及将您的 jQuery 增强功能包装在 WordPress 插件中的优点。我还提到了总有例外的事实。好吧，这里有一个场景，我们倾向于直接将我们的增强功能应用于主题的几个原因：

• 我们将调整主题以创建一个用于活动的自定义类别页面。

• 而且，我们还需要为可以加载到模态框中的表单创建一个自定义页面模板，而不需要重新加载站点的页眉和页脚

因为这些请求要求客户端明白，如果他们想要更新或替换他们的主题，他们就需要小心，我们可能会充分利用 WordPress 主题 API 为这一增强功能提供的全部功能。

我们需要什么

让我们从增强的主要部分开始：我们需要一个具有电子邮件功能的表单和一个加载它的模态框。其余的我们将通过几个自定义的 jQuery 脚本和对 WordPress 主题的自定义来完成。

ColorBox

对于模态框，有几个很好的 jQuery 插件。你可能听说过很好的 ThickBox，但我个人更喜欢 ColorBox，因为有几个使用和美观的原因。

你可以从这里下载 jQuery ColorBox 插件：www.colorpowered.com/colorbox/。

注意

为什么选择 ColorBox 而不是 ThickBox？

ThickBox 插件与 WordPress 捆绑在一起，我是 ThickBox 的忠实粉丝，但我也更喜欢 jQuery LightBox 的简洁性（jQuery LightBox 仅适用于图像）。当我发现 ColorBox 时，我感到非常惊讶，有几个原因：

• ThickBox 和 ColorBox 插件都提供了不仅仅是图像的模态窗口。

• 你可以调用内联元素、外部文件和 iFrame，以及基本的 AJAX 调用。一点问题都没有。

然而，与 ThickBox 相比，ColorBox 有一些优势。对于 ColorBox，Jack Moore 确实花了一些时间和精力设计了五种非常漂亮的模态窗口样式，以及一套不错的回调和扩展函数供更高级的开发者使用。其次，模态窗口组件（透明背景、关闭、下一步和上一步按钮）的所有图像加载都完全在样式表中处理，因此设计师很容易自定义模态窗口的样式。有几次，我不得不手动编辑 thickbox js 文件，以便让图像正确加载，如果它们不是相对于插件 js 文件的方式，那是 ThickBox 的意图，或者如果我需要添加新图像。

最后，ThickBox 依赖于您手动向要从中启动模态窗口的元素添加 .thickbox 类属性。虽然这种方法对于有幸手工编码所有内容的 Web 开发者来说效果很好，但对于在 WordPress 等发布平台内实现的 less 技术性用户来说是一种痛苦。必须指导（和劝说）客户将他们的管理面板编辑器设置为HTML并自定义添加 class 属性到他们的标记中，这简直是一种痛苦。对于 ColorBox 来说，这一切都是不必要的。它可以轻松通过 jQuery 选择器进行控制，因此主题或插件开发者可以根据 WordPress 的 HTML 输出进行选择，从而使内容编辑者只需专注于他们的内容而不需要任何 HTML 理解。

Cforms II

要创建注册表单，我们有许多 WordPress 插件可供选择，但我发现最好的是 cforms II。Cforms II 在一开始就声明：“诚然，cforms 不是最容易的表单邮件插件，但它可能是最灵活的。” 他们是对的。并且在使用一次后，你会发现它比你想象的要简单得多。

您可以从这里下载 WordPress 的 cformsII 插件：www.deliciousdays.com/cforms-plugin/。

安装 WordPress 插件

下载 cforms II 插件后，请按照开发者提供的说明进行安装和激活。

本质上，这意味着解压包，将 cforms 目录放置在您的 WordPress 安装的 wp-content/plugins 目录中，然后导航到管理员的 管理插件 页面。然后您将为插件选择 激活。

安装并激活插件后，让我们开始使用它。

使用 cforms II 设置注册表单

cforms II 插件为不那么技术性的 WordPress 管理员提供了许多强大的表单构建功能。作为一个更技术性的 WordPress 开发者，它可以帮你节省大量时间。cforms 管理界面确实需要一些时间来适应，但它是我在 WordPress 中使用过的最强大和灵活的表单插件。

CformsII 是一个复杂的插件，需要大量的管理空间和多个屏幕页面。因此，一旦你激活了该插件，你会发现在左侧管理区域有一个全新的面板可用。

出厂设置中，cformsII 允许使用 AJAX，在不重新加载页面的情况下提交和更新表单。它还允许非常轻松地创建所有基本类型的表单元素：input、select、check和radio框以及textarea框。你可以用legend文本标签包装自定义的fieldset标签，方便对相关表单元素进行分组。

内置了强大的服务器端验证。很容易将字段指定为必填项并检查有效的电子邮件地址。除此之外，你还可以轻松地为自定义验证分配自己的自定义正则表达式。cforms 帮助！面板甚至为你提供了可以使用的有用的正则表达式示例。

小贴士

安全地设置 cforms II

你会想要查阅 cforms 文档，并且如果可能的话，与网站管理员或托管提供商的技术支持进行交谈。你需要仔细查看全局设置面板，并确保你的 cforms II 安装对你的表单需求尽可能安全。

如果可能的话，尽量使用验证码字段来减少垃圾邮件，并在不需要时关闭文件上传功能。

平衡：表单应该简短易懂，同时检索到有用的信息。

表单的目标是在尽可能从用户那里获取尽可能多的信息的同时，不让他们感觉到你在要求过多的个人信息，或者至少不让他们因为填写过多字段而感到无聊。

我把这个注册表单保持得非常简短和简洁。首先，我填写了表单名称，并将其设置为启用 Ajax。这将对我们有所帮助，因为页面将在模态框中加载，所以当它刷新时，它不会弹出到一个新页面，在模态窗口之外。

接下来，使用已提供的默认表单集，让我们设置一个带有legend文本和事件协调员需要了解的五个表单输入的fieldset。

首先是事件，即事件名称将通过邮政传递，而不是由用户填写，但我想显示它，并且需要将其放在表单元素中以便发送给管理员。

在事件字段之后，我们需要询问用户的姓名。由于没有交换金钱，而且这个表单更多是为了统计人数，所以我将其保留为单个字段。这是一个必填字段，但我允许用户随意或正式填写。

接下来，我们将要求输入电子邮件地址。这是必填项，我选择了使用右侧的复选框进行服务器端验证。如果用户表示他们可以为活动带来一些东西，活动协调员可能希望回复他们并与他们保持联系。此外，可能需要向注册者广播有关活动的更新，因此有效的电子邮件至关重要。

现在，让我们设置一个下拉框，询问注册者可以带多少位客人参加活动。

最后，消息区域是一个文本区域，其中包含一些文本，建议注册者提供一些东西，并且如果他们可以的话，在消息区域中说明他们可以提供什么。

好了。所以这是我们的表单。为了查看它，现在需要将它放在 WordPress 页面或帖子中。我们将把它放在自己的页面中，这意味着我们应该在 WordPress 中创建该页面。

使用 WordPress 3.0 的自定义菜单选项创建注册页面

如果您查看管理面板左侧的页面列，您现在会发现 pageMash 插件是选项之一。

我们只需从 页面 下的左侧菜单中选择 添加新，并创建一个名为 注册 的页面。我们将内容区域留空，但是您现在会注意到，在 编辑 视图中，编辑面板中有一个 cforms 按钮用于页面/帖子。

单击该按钮将允许您选择要放置在页面上的表单（您可以在 cforms II 中创建多个表单，甚至在单个帖子或页面中放置多个表单，但这对我们来说太过了）。选择表单后，您应该会看到一个用于占位符的空间。

您现在应该在站点上的 注册 页面中看到您的表单，如下截图所示：

使用 WordPress 3.0 的自定义菜单选项

然而，我们不希望 注册 页面出现在我们的页面导航中，并且我们需要它在自己的模板页面中，以便更好地加载到我们的模态框中，而不带有主题的页眉和页脚图形和样式。我们需要修改我们的模板，但首先，让我们在 WordPress 3.0 中创建一个自定义菜单，该菜单将覆盖 页面 菜单，然后我们可以轻松指定应显示哪些页面，以便注册页面不会出现在我们站点的导航中。

首先，您需要在管理面板中导航至外观 | 菜单。一旦进入，您可以点击 +（加号）选项卡创建一个新菜单，然后从右侧选择要添加到菜单的选项。然后，您可以在右上面板中设置菜单为您的“主要导航”，这将覆盖 Twenty Ten 默认主题页眉中的标准页面导航。以下屏幕截图说明了设置新的主导航并将其分配为站点主导航的三个主要步骤：

您还可以将事件类别包括在菜单中，如下面的屏幕截图所示（稍后我们将需要访问此页面）：

好了！现在我们有一个“隐藏”的页面，保存着我们的注册表单。让我们开始进行主题自定义。

自定义主题

再次，我们需要以两种方式自定义主题：首先，我们需要一个自定义页面模板来容纳我们的注册表单，该表单将加载到模态框中；其次，我们需要创建一个自定义分类模板并修改它，以便仅显示分配给事件类别的帖子，并在其中启动包含注册表单的模态框。

创建自定义页面模板

首先，我们需要创建一个新的页面模板，以便将我们的注册页面分配给它。我们将从创建page.php模板的副本开始，并将其重命名为registration-page.php。

此表单的整个目的是加载 ColorBox 模态窗口，因此使用我们主题的页眉和页脚样式会有些分散注意力。我们将从此模板页面中简单地删除get_header()和get_footer() WordPress 模板标记命令。

接下来，虽然我们不需要页眉和页脚样式，但我们需要页面成为一个格式正确的 HTML 页面，可以加载 jQuery。我们将手动添加一个 doctype，并从header.php文件中借用一些 WordPress 页眉代码，从一个body标记到这个模板的循环的开头，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<style type="text/css">
<!--
.cform fieldset{
border:1px solid #036;
}
.success{
font-size: 140%;
font-weight: bold;
}
-->
</style>
</head>
<body>
...

您会注意到，与header.php文件的head标签代码相比，我们简化了它很多。我们不需要担心此页面上的注释或侧边栏，因此这些 PHP WordPress 代码块已被删除。我们确实需要加载 jQuery，我还额外添加了一些手动样式，以美化我们的表单。

然后，我们将在此模板页面的循环正下方添加这个新的页脚标记；即在模板页面的循环的下方添加关闭的body和 HTML 标记：

...
<?php wp_footer(); ?>
</body>
</html>

提示

在自定义模板页面时不要忘记插件挂钩

注意，我确保wp_head()和wp_footer()手动放置在我们的注册模板页面中。许多插件需要这些钩子在主题中才能正常工作。如果你正在创建自定义页面，请确保它们包含在页眉或页脚中，或者如果主题的header.php和footer.php文件不会被包含，则手动放置它们，就像这个模板页面一样。

最后，为了使这个新页面被识别为 WordPress 的特殊模板，我们必须在文档的最顶部添加一个模板头部，以 PHP 的注释形式添加，如下所示：

<?php
/*
Template Name: Register Form
*/
?>
...

注意

与我们在第三章中的插件一样，深入挖掘：理解 WordPress 和 jQuery，请确保在<?php标记之前没有空格或硬回车。否则，你可能会收到已发送头文件的错误信息。

现在，如果我们回到管理面板中的注册页面，在右侧，我们将看到我们的新页面模板可以分配给该页面。

我们现在可以看到，如果我们使用浏览器的地址栏导航到我们注册页面的 URL，它会加载而没有任何其他 WordPress 样式，并且已经准备好加载到我们的 ColorBox 模态窗口中。

这是我们解决方案的第一半。现在让我们完成它。

创建自定义分类模板

现在我们需要为活动类别创建一个特殊的分类模板。同样，我们希望每个事件都有一个注册链接。该链接将事件的标题传递给注册表单。

要开始这个过程，如果你还记得第三章中的模板层次结构，深入挖掘：理解 WordPress 和 jQuery，category.php模板页面优先于archive.php模板页面。事实证明，我们正在使用的默认模板没有category.php页面。我们只需通过复制archive.php页面并将其命名为category.php来创建一个。

但等等；我们不只是想让这个页面显示任何类别。我们只想显示活动类别。你还会记得在第三章中，深入挖掘：理解 WordPress 和 jQuery，你可以通过特定的category-ID.php模板页面进一步取代category.php模板，例如category-3.php。

在我的本地 WordPress 设置中，事件类别的 ID 恰好是 3，所以我们将文件命名为这个。

注意

查找你的分类 ID

在您自己的 WordPress 安装中工作的人，类别 ID 号是在创建类别时分配的。首先，您需要确定您的Events类别的 ID 号是多少。您可以通过在管理面板中导航到Posts | Categories页面，然后在Events类别下选择编辑来执行此操作。然后您可以检查该类别编辑页面中的 URL。在 URL 的最后，您将看到该类别的 ID 号。

现在我们准备好自定义 Events 页面的category-3.php模板了。

首先，正如我们在上一章节中看到的，这个页面调用了get_template_part( 'loop', 'category' )函数，来自loop.php模板页面。我们实际上只想要一个自定义、非常简单的设置，仅限于Events类别。虽然我们确实可以更新loop.php中的if...else语句，添加一个额外的自定义循环（这略微超出了本书的范围，敬请期待 Packt 出版社即将推出的 WordPress 3.0 主题设计 书籍！），但对于这个自定义客户项目，我们只需注释掉对该循环的调用，并添加我们自己非常简单的循环，多亏了模板层次结构，这个循环只会在我们的Events类别页面上起作用。

<?php
//start the loop:
while (have_posts()) : the_post(); ?>
<div <?php post_class() ?>>
<h2 id="post-<?php the_ID(); ?>" class="entry-title">
<a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to
<?php the_title_attribute(); ?>">
<?php the_title(); //adds the title ?></a></h2>
<div class="entry">
<?php
//add the content
the_content() ?>
</div>
<?php //add the registration button ?>
<p><a class="register"
href="/wp-jqury/register/?evnt=<?php the_title(); ?>">
Register</a>
</p>
<div class="register-separate"></div>
</div>
<?php endwhile; ?>

注意

如果您还没有这样做，您可能想要停用我们在上一章节中构建的 添加作者简介 插件。这对这个项目不是必需的，虽然激活它不会有什么坏处（它将只是坐在那里，在活动的帖子中）。

注意在底部的循环中，我们制作了一个引用注册表单的link标签。我修改了一个名为evnt的 变量字符串 到该链接，并使用get_title()模板标签添加了事件的标题，如下所示：

...
<p><a class="register"
href="/wp-jqury/register/?evnt=<?php the_title(); ?>">
Register</a>
</p>
<div class="register-separate"></div>
...

现在我们将回到模板页面的顶部，确保标题的设置是合理的。顶部有一堆if...else语句，检查返回的内容是否来自存档、类别或标签（请记住，这个页面是从默认模板的archive.php页面复制的）。由于这个模板页面现在只会加载事件帖子，所以我们实际上不需要所有那些 PHP，但也没什么坏处。主要是，我们将想要添加一个带有以下标记和代码的主标题：

...
<h1 class="pagetitle"> Upcoming Events <?php single_cat_title(); ?></h1>
...

这将在页面上给我们一个名为即将举行的活动的标题（或者实际上您给自己的Events类别命名的任何名称，即，Shows、Parties 等等——您可以自己命名。那个 single_cat_title() 模板标签会为您提取它）。

在主题的style.css样式表的最底部，我们将添加以下规则来为我们的注册链接设置样式，并将其浮动到右侧：

...
.register {
display:block;
background-color: #ccc;
border: 1px solid #069;
width: 100px;
padding: 10px;
text-align: center;
}
p a.register{
float: right;
}
.register-separate{
clear:both;
padding-top: 10px;
border-bottom:1px solid #999;
}

现在当我们查看一个事件帖子时，我们会看到我们的事件帖子底部有一个动态链接到注册的链接：

将 jQuery 纳入规划

好了！我不知道你怎么想，但我觉得这是相当多的准备工作。当我们加载 ColorBox 插件并编写最后几个自定义 jQuery 脚本时，一切都会结合在一起。

包括 ColorBox 插件

在我们的主题中，让我们创建一个 js 目录，在该目录中，让我们创建一个名为 colorbox 的附加目录。这将允许我们放置 ColorBox 插件的 CSS 表和图像资产，并保持一切整洁和按照它喜欢在 colorbox.css 表中工作的方式进行。

我们将解压缩我们的 ColorBox 插件，并将缩小版移到我们的 js/colorbox 目录中。然后，我们将从 example1 文件夹中获取样式表和资产（我最喜欢它，有条纹的，透明的背景和圆角非常棒），并将它们放入 colorbox 目录中。然后，我们将转到我们主题的 header.php 文件，并像下面所示，在主题的主样式表下方包括 colorbox.css 样式表：

...
<link rel="stylesheet" type="text/css" media="all"
href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/colorbox/colorbox.css" type="text/css" media="screen" />
...

然后，在 wp_head 函数的上方，我们将按照前几章学到的方法添加我们的主要 jQuery 包括以及 ColorBox 插件，利用脚本 API 如下所示：

...
wp_enqueue_script( 'jquery' );
wp_enqueue_script('colorbox', get_bloginfo('stylesheet_directory') . '/js/colorbox/jquery.colorbox-min.js', array('jquery'), '20100516' );
...

编写自定义 jQuery 脚本

现在，在我们的 js 目录的根目录中，让我们创建一个新的 custom-jquery.js 文件，并确保在我们的 header.php 文件中包含它，在我们的 ColorBox 包含项 下方，如下所示：

...
wp_enqueue_script('custom-jquery', get_bloginfo('stylesheet_directory') . '/js/custom-jquery.js', array('jquery'), '20100510' );
...

现在准备一些 jQuery 的乐趣。由于我们辛苦地手动将 ColorBox 插件包含到我们的 WordPress 主题中，我们也可以确保它能够加载图像，以及我们的注册表单。

为了确保 ColorBox 只加载图片，而不是页面上的每个链接，我们会想到一些在第二章中的示例，在 WordPress 中使用 jQuery，并进行一些创造性的选择。我们将把这个规则添加到我们的 custom-jquery.js 文件中：

jQuery(function(){
jQuery(".entry-content a:has(img)").colorbox({height:"98%"});
});//end docReady

此选择仅适用于帖子中位于 .entry 类中的标签链接，其中 有 缩略图 img 标签。没有其他链接会触发 ColorBox。

现在，为了让注册页面启动 ColorBox，我们要聪明一点。虽然我已经添加了一个 .registration 类，但我不想依赖它来启动 ColorBox。唯一应该触发模态窗口的链接是指向注册表单的链接，所以我一定要为此选择。在我的 cb-registration.js 文件中，在我的文档就绪函数内以及在我的图片选择 colorbox 函数之后，我将添加此脚本：

...
jQuery("a[href*='register']")
.colorbox({iframe:true, width:"500px", height: "600px"});
...

那个特定的 jQuery 选择器将确保只有包含（这就是星号 * 的作用）href 属性中包含 register 一词的链接才会触发 ColorBox 模态窗口，在 ColorBox 的 iframe 模式下。

你会注意到我还使用了 ColorBox 提供的参数来为注册表单的模态框设置约束的高度和宽度。

现在，只有我们的注册链接和带缩略图的图片链接启动 ColorBox：

总结：需要一个微小的 cforms II hack

你还记得我们设置了我们的注册链接通过GET 调用（有时称为变量字符串）将事件的名称以 URL 方式传递到注册表单。

目前，cforms 管理面板无法捕获该变量，但对于 cforms 来说，有一个快速且相当常用的"hack"可以确保您可以向表单传递自定义变量。

cforms II 为它可以捕捉的变量创建了有小括号括起来的模板名称，比如添加变量模板：{Title}将显示表单所在的帖子或页面标题。我们希望传递一个来自另一页的文章标题（而不是手动将此表单添加到每个事件帖子），因此我们将向 cformsII 插件添加我们自己的变量模板。

提示

定制插件？记笔记！

WordPress 和 jQuery 开发者通常会不断更新和改进他们的插件。你最好的选择是尽量寻找一个不需要你编辑实际插件源文件的解决方案。然而，就像在这种情况下一样，如果你发现你确实编辑了插件的源文件，那就在目录中添加你自己的customization-readMe.txt文件，并详细记录你在插件中修改或编辑的内容。当开发者发布并升级他们的插件时，尤其是有时需要更新以跟上当前 WordPress 核心版本的 WordPress 插件，当你更新插件时，你会丢失你的修改和黑客。你的笔记将使重新整合它们变得容易。

在 cforms II 插件目录中，定位lib_aux.php文件。在大约第 421 行，就在看起来像...$m = str_replace( '{BLOGNAME}',..的代码之后，添加这行代码：

...
$m = str_replace( '{Event}', esc_attr($_GET['evnt']), $m );
...

然后，在我的注册表单的 cforms 管理面板中，我们现在可以向lib_aux.php页面中的{Event}变量添加到Event字段。让我们还确保该字段设置为"只读"。

为了清晰起见，我希望事件名称也显示在表单的标题中。标题不是 cforms 的一部分，而是页面模板的一部分。在我的主题目录中，我将打开registration-page.php，在第 41 行的标题the_title()模板标签旁边，我将添加以下代码：

...
<h2><?php the_title(); ?> for: <?php $evnt = esc_attr($_GET['evnt']); echo $evnt;?></h2>
...

当表单启动时，你现在会在标题和事件字段中看到事件的名称，该字段设置为只读，不可由用户编辑。现在表单提交并发送给管理员时，清楚地显示了注册是为哪个事件。

现在我们有了一个事件页面，显示用户即将到来的事件，并让他们无缝注册参加这些活动，这将在一个模态窗口中加载。干得好！让我们看看如何使这种体验变得更好。

第二部分：表单验证——确保提交的内容是正确的

令人振奋的消息是，cformsII 已经内置并准备好了漂亮、令人赞叹的 CSS 样式的服务器端验证。您可以看到，如果我在未填写必填详细信息或格式不正确的电子邮件地址的情况下点击提交，表单将重新加载，显示我填写错误的字段。

但为什么要等到用户点击提交按钮呢？虽然服务器端验证是必不可少的，也是唯一正确验证数据的方法，但通过添加一些客户端验证，使用 jQuery，我们可以很容易地提升并加快用户的流程，通过在用户填写表单时提醒他们丢失细节或数据格式不正确。

注意

为什么服务器端验证很重要？

使用 JavaScript 和 jQuery 进行客户端验证绝不能全部依赖于数据验证或防止提交不正确格式的信息到服务器。用户始终可以在浏览器中禁用 JavaScript，然后提交他们想要的任何值（有时使用不正确格式的值通过表单入侵您的服务器）。出于这个原因，客户端验证应该仅用于增强用户体验，而不是实际保护服务器或数据完整性。

客户端验证的技巧：不要只告诉他们错误时发生了什么！

每个人都对积极的反馈做出回应。与其等待用户弄错或忘记一个字段，借助 jQuery 和一些样式，您可以通知他们已经正确填写了字段，并可以继续进行。

使用 Inkscape，我做了一组简单的“√”和“×”图标，可以作为由 jQuery 添加的 span 的背景图应用。使用 CSS 精灵图像技术来调整背景位置显示“√”或“×”图标，用户将迅速看到表单字段是否被正确填写，并且可以继续。

空输入验证

为了设置基本验证，我们将编写一个 jQuery 脚本，该脚本选择输入项目，并在blur时启动一个功能。让我们把这个脚本放在registration-page.php中，就在循环代码下面，wp-footer()挂钩上面，如下所示（注意代码中粗体的注释，以便跟踪每个 jQuery 语句的操作）：

...
jQuery(".cform :input").blur(function(){
/*this "if" makes sure we don't target the submit button or email field*/
if (jQuery(this).val() != "Submit") {
/*this "if" targets only empty fields*/
if (jQuery(this).val().length == 0) {
jQuery(this).after('<span class="wrong"> ! </span>');
}else{
/*"else" otherwise field is fine*/
jQuery(this).after('<span class="correct"> thanks. </span>');
}//end if no length
}//end ifelse !submit
});//end blur function
...

以前的代码对于无效的、空的字段会附加一个感叹号 (!)，对于有效的、填写完整的字段则附加一个快速的 thanks。然而，当用户焦点和模糊输入字段时，span 会不断地附加上 after 函数。为了补偿这一点，我们将在我们的 blur 脚本下方添加一个工作于 focus 上的自定义脚本。它将删除附加的 after spans，如下所示：

...
jQuery(".cform :input").focus(function(){
jQuery(this).next("span").remove();
});//end focus function
...

这给了我们一些非常好的基本验证，检查空输入。您会注意到我们的 span 标签已经添加了类。我已经将 "check" 和 "x" 图像添加到我的主题的图像目录中，现在，在我的主题的 style.css 样式表的最底部，我将添加以下类规则：

...
/*for registration form*/
.wrong{
display:block;
float:right;
margin-right: 120px;
height: 20px;
width: 20px;
background: url(images/form-icons.png) no-repeat 0 -20px;
text-indent: -3000px;
}
.correct{
display:block;
float:right;
margin-right: 120px;
height: 20px;
width: 20px;
background: url(images/form-icons.png) no-repeat 0 0;
text-indent: -3000px;
}

最终结果是在你鼠标或者通过字段切换时，留下两个必填字段为空，然后再点击 Submit 按钮时发生的一个非常好的、明显的视觉显示。

正确格式的电子邮件验证

让我们再向前迈进一小步。留下电子邮件地址为空是一回事，但我们也可以指出它是否格式良好。史蒂夫·雷诺兹在他的网站上有一篇关于使用 jQuery 验证电子邮件地址的绝佳文章。你可以在这里阅读：www.reynoldsftw.com/2009/03/live-email-validation-with-jquery/。

史蒂夫的代码演示特别有趣，值得一看，因为他使用 jQuery 的 keyup 函数实时检查电子邮件表达式的验证。

对于我们的目的，我们将借用史蒂夫的正则表达式函数，并将其适应到我们已经开始的验证检查中，这个检查是在 blur 函数上工作的。

首先，在我们现有的脚本下面，我们将添加史蒂夫的 isValidEmailAddress 函数，如下所示：

...
function isValidEmailAddress(emailAddress) {
form validatione-mail address, validatingvar pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}//is valid e-mail
...

接下来，我们将仔细检查我们现有的脚本。我们想要做的是，在检查到没有值（val().length == 0）之后，我们会再次检查输入字段是否不是电子邮件字段。

使用 Firefox 和 Firebug，我探索了 DOM 并发现电子邮件字段表单具有一个名为 .fldemail 的唯一类。

我们将把我们的新语句作为我们当前的 if 语句的扩展，并在我们一般的 else 语句之前使用一个 else if 语句。

我们更新的 blur 脚本现在如下所示（注意加粗的新的电子邮件验证，if...else 语句）：

...
jQuery(".cform :input").blur(function(){
/*this if makes sure we don't target the submit button or email field*/
if (jQuery(this).val() != "Submit") {
/*this "if" targets empty fields*/
if (jQuery(this).val().length == 0) {
jQuery(this).after('<span class="wrong"> ! </span>');
/*This "else if" targets if the field is the email field*/
}else if(jQuery(this).hasClass("fldemail") == true){
var email = jQuery(this).val();
/*Run's Steve's function and return true or false*/
if(isValidEmailAddress(email)){
//This shows the user the form is valid
jQuery(this).after(
'<span class="correct"> thanks. </span>');
}else{
//This shows the user the form is invalid
jQuery(this).after('<span class="wrong"> ! </span>');
}//if...else
//end email check
}else{
/*otherwise field is fine*/
jQuery(this).after('<span class="correct"> thanks. </span>');
}//end if no length
}//end if...else !submit
});//end blur function
...

现在我们不仅可以检查空字段，还可以在字段输入的 blur 时检查有效的电子邮件地址：

提示

验证提示：不要过度使用！

cforms II 插件的服务器端验证已经足够了。再次强调，我们只是想通过一点客户端验证来加快速度，并且不想因为为数据创建了一堆严格的格式化规则而让用户感到沮丧。有些人的电话号码或邮政编码的格式可能与您预期的有所不同，但就大多数情况而言，这是可以接受的。您最好使用 jQuery 验证来提示提示和内联帮助，并指导用户，而不是强迫他们遵守精确的数据格式。

最后的想法和项目总结：一切都关乎优雅的降级

与您使用 jQuery 所做的一切一样，您需要记住，您正在创建的是非常有用的增强功能，这些功能很棒，但如果某个用户由于某种原因没有启用或可用 JavaScript，流程或站点不会中断。

我们的客户对我们无缝的注册解决方案非常满意。禁用 JavaScript 进行注册过程时，注册过程使用标准浏览器返回键完全可以正常工作。我唯一发现的缺点是，注册表单会在 WordPress 主题之外加载，这是我们必须做的，以便它可以很好地加载到 ColorBox 模态窗口中。

总的来说，我不认为这是一个很大的问题。浏览了我的各种网站统计数据后，我很难找到一个没有启用 JavaScript 的访客。那两三个没有启用 JavaScript 的可能是在纯文本浏览器中，所以缺少 WordPress 主题可能根本不会被注意到（事实上，对于使用文本转语音浏览器的残障用户来说，不必费力浏览头部信息以到达表单可能是一件好事）。

因为在这个标题中我们总是考虑假设情况，如果恰好，客户决定在事件 JavaScript 被禁用的情况下，希望表单在 WordPress 模板之外正常工作，我想出了以下解决方案：

首先，您需要将表单加载到两个 WordPress 页面中。一个命名为register，就像我们在特殊模板中所做的一样，另一个命名为register-b（这只是永久链接的缩略名，标题仍然可以在两个页面上都是Register）。对于register-b页面，您不会分配特殊模板；您会将页面模板保留为默认模板。您可以在尽可能多的页面和文章中放置一个 cform，因此在两个位置放置此表单绝对不会成为问题。

接下来，您将进入category-3.php事件模板页面，并更改链接以调用替代的默认主题页面，如下所示（请注意，粗体的-b是与我们原始链接唯一的不同之处）：

...
<p><a class="register" href="/wp-jqury/register-b/?evnt=<?php the_title(); ?>">Register</a></p>
...

最后，在你的 custom-jquery.js 文件中，你只需创建一个 jQuery 脚本，将 href 链接重写为删除 -b 的模态页面表单。确保将此脚本 放在 您的 colorBox 功能脚本之前，只是为了确保在设置 colorBox 功能之前 href 转换。

...
jQuery("a[href*='register']").each(function(){
this.src = this.src.replace(/register\-b/, "/register/");
});
...

如果启用了 JavaScript，jQuery 将更改所有注册的 href 实例，并且整个流程将按计划使用 ColorBox 插件进行。如果没有，用户将使用标准的 WordPress 主题表单注册，而不会受到任何影响。

正如您在以下截图中所见，如果 JavaScript 被禁用，表单将只作为站点的一部分加载：

摘要

我们现在学会了如何：

• 真正利用主题来帮助 jQuery 增强。

• 使用 jQuery ColorBox 插件和一些自定义脚本增强非常强大的 cforms II WordPress 插件。

而这只是许多实现这个特定解决方案的方法之一！由于本书的目标是在 WordPress 中使用 jQuery，我选择了更注重 jQuery 和易于访问的 WordPress 功能的路线。但当然，我们可以将 ColorBox 插件制作成插件；我们可以将整个东西制作成插件！或者制作一个仅扩展 cforms 插件的插件。解决方案策略的列表几乎是无穷无尽的。

再次，您需要查看每个项目并据此评估。在下一章中，准备好通过一些流畅的基于 HTML 和 CSS 的图表动画以及图库幻灯片和旋转器，以及一些其他巧妙的方法来吸引用户的注意力。

第五章：在 WordPress 中的 jQuery 动画

我们将继续在 jQuery 和 WordPress 的知识基础上深入探讨使用 jQuery 进行动画处理。动画是 jQuery 的强项之一，虽然您可能认为动画是轻浮的或者是廉价的技巧，只是为了“眼睛糖果”，但如果正确实现，它确实非常有用。

通过对 CSS 属性、颜色和界面元素进行 jQuery 动画处理，可以确保用户清楚地看到警报、错误和确认消息。动画还使界面对象能够淡入和淡出以获得更好的用户体验。最重要的是，一点点“眼睛糖果”肯定不会影响网站对用户的兴趣和受欢迎程度。

在本章中，我们将使用动画来实现：

• 吸引用户的注意力并将其引导到警报

• 节省空间并通过一系列旋转的置顶帖子进行动画处理

• 创建一些流畅的、动画的鼠标悬停效果和简单的动画图表

让我们开始将实用的、高端的动画应用到我们的 WordPress 站点上。

jQuery 动画基础

首先，我们已经有一点 jQuery 动画的经验。让我们回顾一下：在第二章，在 WordPress 中使用 jQuery，在事件和效果部分，我们了解了以下函数：show(), hide(), fadeIn(), fadeOut(), fadeTo(), slideUp(), slideDown()和slideToggle()。我还提到了animate()和stop()函数。

我们在之前的项目中已经使用过几种这些函数，分别是第二章，在 WordPress 中使用 jQuery；第三章，深入挖掘：理解 jQuery 和 WordPress；和第四章，以更少的工作做更多事情：利用 jQuery 和 WordPress 的插件，特别是，show()和hide()，以及fadeTo()和slideToggle()。正如我们所看到的，这些快捷函数可以轻松满足您的大部分动画需求，但同时也受到它们的限制。现在让我们更仔细地看一下animate()函数，并掌握一些对我们的 jQuery 动画具有精细控制的方法。

CSS 属性的魔法

.animate()函数允许您对任何数字CSS 属性进行动画处理。px是大多数数字属性值的理解规范，但您可以指定em和%（百分比）单位。几乎您可以放置在便捷的.css()函数中的任何东西，都可以在.animate()函数中使用。

此外，您可以将快捷字符串"show", "hide"和"toggle"添加到任何属性中，而不是数值。它们基本上会将值从 0 变为 100，或者反之，或者从 0 或 100 切换到相反的数字。

让我们快速看一下这个聪明函数的一个简单示例。记住，你会想把你编写的任何 jQuery 脚本放在document ready 函数内：jQuery(function(){//code here})；同样也要放在<script> 标签内，这样你的 jQuery 将在 DOM 加载完成时启动：

...
jQuery('.post p').animate({ fontSize: '140%',
border: '1px solid #ff6600',}, 3000);
...

此代码片段将为页面上的所有.post p段落标签添加动画效果，增大字体大小并添加边框。

你会注意到我添加了一个没有单一数值的border 属性。当你在你的网站上测试这段代码时，你还会注意到，边框不会动画显示出来；相反，在动画完成时，它只会在最后一刻出现。添加不是基本数字值的 CSS 属性（如边框或背景颜色、十六进制值）将不会进行动画处理，但是你可以使用.animate() 函数添加所有 CSS 属性，一旦完成运行，它将像.css() 函数一样运行。这可能不是添加常规 CSS 属性的最佳方法，但如果你无论如何都要进行动画处理，只要知道你可以添加其他非数值 CSS 属性，它们只是不会动画显示。

小贴士

你的属性不起作用吗？

你可能早在第二章 在 WordPress 中使用 jQuery 就注意到了这一点，使用.css() 函数时，但以防万一你没有注意到：属性名称必须采用驼峰命名法才能被.animate() 和.css() 函数使用。这可能有点令人困惑，因为你可能只把它们当作在实际 CSS 样式表中使用的属性，但是你需要指定paddingBottom 而不是padding-bottom，marginRight 而不是margin-right。

使它多姿多彩

你可能同意，尽管.animate() 函数很酷，但如果没有颜色（并且颜色突然在动画结束时发生变化，这样会有点刺眼），它并不那么令人印象深刻。你渴望在灿烂的颜色中交叉淡入。谁不希望呢？不幸的是，核心的 animate 函数并不够强大，无法计算单个十六进制网络颜色中的所有变化，更不用说两个十六进制颜色之间的变化了（让我们只说，这涉及到一些严重的数学问题）。这比从 0 到 100 移动一个值，或者再次移动回来要复杂得多。

好消息是，animate 函数可以通过 Color 插件进行扩展。更好的消息？是的，这个插件已经捆绑在 WordPress 中了！

让我们像这样使用wp_enqueue_script 将这个插件添加到我们的主题中：

...
<?php wp_enqueue_script("jquery-color"); ?>
<?php wp_head(); ?>
...

小贴士

注册并包含一个只需要在特定页面加载的脚本？

在第二章中，在 WordPress 中使用 jQuery，你会记得，你可以将你的wp_enqueue_script()函数包裹在if语句中，这些语句使用 WordPress 的条件标签来检查站点所在的页面：is_home()，或is_front_page()，或is_admin()等等。一定要善用这些条件标签，帮助你的站点尽可能地保持优化，并且不要通过加载不需要的脚本来不必要地减慢网站速度。要了解更多关于条件标签的信息，请查看它们在第二章中与脚本 API 一起使用的情况，以及在第九章中的条件标签快速参考，jQuery 和 WordPress 参考指南。你也可以查看 WordPress 的 Codex 网址：codex.wordpress.org/Conditional_Tags。

再次强调，这个插件扩展了现有的.animate()函数，所以没有新的属性需要学习！一旦你将 Color 插件包含到你的项目中，你就可以随心所欲地动画化背景颜色了。

...
jQuery('.post p').animate({'backgroundColor':'#99ccff'}, 2000);
...

现在你应该看到.post段落优雅地淡化成一个漂亮的浅蓝色，就像下一个截图中所示的那样：

放松一下，用缓动控制

如果你熟悉使用各种视频编辑工具或 Adobe Flash 进行动画制作，你可能听说过缓动。缓动是动画中加速和减速的控制。它最常见的用途是给动画一个更自然的感觉，模仿现实世界中发现的各种物理属性，而不是计算和刚性的运动。

几乎与动画化十六进制颜色值一样复杂，缓动将虚拟物理属性应用于被动画化的对象，使用各种算法来控制动画的速度，使其在开始和结束时加速。这确实是严肃的数学。jQuery 带有一种内置的缓动类型，所以我们不必真正考虑其中的任何问题。

jQuery 的默认缓动选项称为“swing”。从技术上讲，有两个选项——“linear”和“swing”。线性缓动简单地沿着从点 A 到点 B 的值动画对象，就像一个良好的编程脚本应该做的那样。没有加速或减速，所以是的，它有点“僵硬”。

Swing 缓动开始时速度较慢，达到最大速度，然后随着动画完成而再次减慢。jQuery 选择 swing 作为默认的缓动选项，因为它在大多数情况下看起来最好。这可能是因为这就是我们现实世界中大多数物体的反应方式；在达到最大速度时稍微缓慢启动，然后在靠近停止时减速和减慢（前提是物体在最大速度时没有撞到任何东西）。

由于摆动缓动是默认的，让我们看看我们之前用来使文章段落背景色动画的脚本，并看看我们能否检测到差异：

...
jQuery('.post p').animate({'backgroundColor':'#99ccff'
}, 2000, 'linear');
...

这是微妙的，但明显的差异在那里。线性缓动更加严格。

小贴士

高级缓动：有一个插件可以做到！

正如你可能猜到的，许多“数学派”的人已经找出了各种各样的缓动算法变体，以模仿各种不同的物理环境，是的，有一个 jQuery 插件可以做到这一点。虽然这个插件没有与 WordPress 捆绑在一起，但这不应该阻止你下载并尝试它。你可以在这里下载并测试所有可用的缓动选项：gsgd.co.uk/sandbox/jquery/easing/。

这个插件，就像 Color 插件一样，扩展了 .animate() 函数，并为你提供了超过 25 个缓动选项，其中包括一些非常酷的选项，比如 jswing bounce 和 elastic，以及一系列向量缓动路径，如圆形和正弦波。

大多数项目中这些选项都有点过度了，但我确实喜欢弹性和弹跳的缓动选项。顺便说一下，如果你是我刚才提到的那些“数学派”的人之一，你会喜欢查看这里缓动算法背后的魔力：www.robertpenner.com/easing/。

时间把控至关重要：顺序、延迟和控制动画队列

如果你对动画很熟悉，无论是传统动画、视频，还是与 Flash 进行多媒体工作，你可能已经了解——时间把控至关重要。你对动画的时间和播放控制得越多，越好。例如，缓动效果取决于给对象动画和移动多少时间。无论你想让一个对象移动得有多“平滑”，如果你只给它一秒钟或更少的时间来穿过屏幕，它看起来都会相当颠簸。让我们看看掌握时间和播放的三种主要方法。

让你的事情井然有序：把它们链接起来

我们在之前的章节中讨论了函数链，你很可能知道你在 jQuery 语句中链接在一起的任何事件会按照它们被附加到链中的顺序启动。据我所知，并根据专家的说法，你可以链接任意多的函数，无限地（或直到浏览器崩溃）。

总的来说，我发现将 jQuery 函数分布在单独的行中，具有它们自己的选择器集，可能会占用一些空间，但会使您的 jQuery 脚本更有组织和可管理性。请记住，您始终从包装器集的初始选择器开始执行 jQuery 语句，但基于额外的链式函数，可以使您在 DOM 中移动并获取其自己的选择器，您会发现您可以仅通过一个语句在 DOM 中移动和影响很多。沿途，可能会生成一些相当壮观的“意大利面代码”，很难跟踪，并且会让任何不得不与您合作的开发人员憎恨您的内心。

但是，对于需要在单个初始选择器集上运行的函数，特别是动画函数，我真的很喜欢 jQuery 链，因为它们有助于保持我的动画序列按照我想要的顺序开始，而且很明确哪个包装器集将受到链的影响。

以下是一个示例：

...
jQuery('.post:first').hide().slideDown(5000, 'linear').fadeTo('slow', .5);
...

现在，即使最初简明的动画链也可能变得有点复杂。没关系；与一些脚本语言不同，JavaScript 和 jQuery 依赖于分号 ";" 作为清晰的结束语句，而不是实际行的结尾。因此，您可以将链组织成单独的行，以便更容易跟踪和编辑，如下所示：

...
jQuery('.post:first')
.hide()
.slideDown(5000, 'linear')
.fadeTo('slow', .5);
...

延迟订单！

因为时间至关重要，我经常发现我希望函数的动画完成，然而，根据缓动选项，特别是弹性或反弹，我并不一定希望下一个函数就这么快开始！从 jQuery 1.4 开始，使用.delay()函数可以轻松暂停链。让我们在我们的链中放置一个三秒的暂停，如下所示：

...
jQuery('.post:first')
.hide()
.slideDown(5000, 'linear')
.delay(3000)
.fadeTo('slow', .5);
...

提示

检查您的 jQuery 版本！ delay() 需要 1.4+

一旦此功能可用，我就在我的 jQuery 动画中以各种无价的方式使用它。但是，如果您发现延迟函数不起作用，那么您可能正在使用版本 1.3.2 或更早的 jQuery。延迟函数仅在版本 1.4+中可用。您可能想回到第二章，在 WordPress 中使用 jQuery并查看关于从 Google CDN 注册 jQuery 或直接将其包含在主题中的内容。

插队

队列——这些令人烦恼的队列确保每个人或每件事都按照它们到达的顺序公平处理。jQuery 的动画队列工作方式类似，只处理每个对象的动画请求，按分配给对象的顺序进行处理。有时会出现不应该被迫在队列中浪费时间的特殊需求和要求。

到目前为止，我们已经看到.animate()函数，除了 CSS 属性之外，还可以传递各种可选参数，指定 持续时间（slow、fast 或数字毫秒）和 缓动 类型（swing、linear 或插件扩展缓动）。

que参数是一个真或假布尔值，如果你不想让动画函数等待其轮到，则可以设置它。对于你希望一个对象同时运行多个动画以与彼此并行的实例，比如同时滑动和淡化，禁用queue在你的动画函数中将起作用。

为了在你的代码中设置queue选项，而不是使用我们之前一直在使用的语法，你将不得不将所有其他选项包装到更高级的语法中，清楚地标记每个可选参数，像这样：

...
jQuery animationqueue, jumpingjQuery('.post:first')
.hide()
.fadeTo(0, .1)
.css("height","5px")
.animate({
height: '+=500px',
},
{
duration: 4000,
easing: 'swing',
queue: false
}
)
.fadeTo(4000, 1);
...

以下屏幕截图显示了帖子在淡出同时同时改变高度：

通过前面的屏幕截图可以看出，我们刚刚编写的代码在下滑时淡化了第一个.post div。如果你将false改为true，然后重新加载页面，你会发现第一个.post div 滑动到500像素高度后然后淡入。

完成跳转

可以传递到.animate()函数的最终选项是step和complete。step参数允许你设置一个额外的函数，在每个动画步骤完成后调用它（有时对于你正在动画化的多个 CSS 属性很有用）。complete参数允许你指定一个回调函数，当整个动画函数完成时调用。请记住，你可以链接多个动画函数，而具有完成参数的步骤是属于它们所属的每个动画函数的唯一实例。

如果你有一个动画绝对不应该在当前动画函数完成之前启动的情况，.delay()函数可能不是最好的方法。你可以使用step和complete参数按照你希望的确切顺序启动其他函数和动画。

...
jQuery('.post:first')
.hide()
.fadeTo(0, .1)
.css("height","5px")
.animate({
height: '+=500px',
},
{
duration: 4000,
easing: 'swing',
queue: false,
step: function() {alert('step done!');},
complete: function() {alert('completely done!');}
}
)
.fadeTo(4000, 1);
...

前面的代码片段将在.animate()函数完全完成后在完成的步骤中生成 JavaScript 警报。

我个人从未需要钩入 WordPress 项目的step参数，但我可以看出它如何在钩入和创建一系列级联类型效果方面非常有用。我发现完整的parameter对我的许多动画非常有用。

吸引用户的注意力

好了，除了示例代码片段，现在是时候开始工作了！回到“假设的世界”，我们的前一些客户热情地向几位同事推荐了我们的 jQuery 解决方案，现在我们收到了很多有关 WordPress 网站的帮助请求。让我们看看一些新的假设客户情况，看看我们是否能解决他们的问题。

首先：许多网站采用的一种常见方法是“置顶”帖子以及如何利用一点 jQuery 动画来增强它们。

项目：动画提示置顶帖子

这是一个快速简单的情况。你有一个客户，他有一个好朋友，经营着一个非营利性教育组织的网站，他们需要一个帮助（意思是：请"免费"做这个，请）。

组织的课后照顾根据公立学校的时间表运行（因为许多孩子是从不同的学校乘坐校车过来的）。如果公立学校系统放假或发生其他紧急情况，课后项目也会关闭。组织尽力通过他们的 WordPress 站点通知人们。

尽管向家长明确表示他们有责任查看网站或致电了解中心的时间表，但是有一些人声称他们查看了网站但 "没有看到关闭警报"。显然，即使他们将帖子设置为 "sticky"，使其保持在顶部，但这些帖子看起来与网站的其他内容非常相似。

你很乐意帮忙（特别是因为他们是由一个有高薪工作的客户推荐给你的）。这是一个真正容易解决的问题。首先，你可以简单地在他们主题的 style.css 文件中添加几个 .sticky 样式，这样在网站上粘性帖子就会更加突出。

他们明确表示，他们只使用 "sticky" 功能来发布日托和其他影响组织中心建筑对公众开放的警示，因此你决定快速搜索 "creative commons, public domain, alert icon svg"，并从 commons.wikimedia.org/wiki/File:Nuvola_apps_important.svg 下载了一个非常漂亮的 SVG 文件。

让我们将 SVG 文件打开到 Inkscape 中，并将其缩小到 48 像素宽以保存一个透明的 .png 文件（我冒昧地给阴影加了一点模糊，但你可能不想要）。将 PNG 命名为 sticky-alert.png。

然后，你将新的 sticky-alert.png 图像添加到他们主题的图像目录，并在样式表的最底部或下面已存在的 .sticky 类之后，如果存在的话，用一些 .sticky 调用的类规则更新它，如下所示：

...
/*change the .sticky background */
.home .sticky { background-color: #ffff9c;}
/*add the icon to the entry-content div inside the sticky post*/
.home .sticky .entry-content{
background: url(images/sticky-alert.png) no-repeat 0 20px; }
/*nudge the paragraph and lists out of the way of the icon*/
.home .sticky .entry-content p,
.sticky .entry-content ul{margin-left: 60px;}
...

以下截图展示了新样式的粘性帖子：

这已经足够好了。现在无论是否可用 JavaScript，任何访问站点的人都肯定会注意到。但是，嘿，既然你已经在主题中挖掘了，而且决定注册 jQuery，从 WordPress 捆绑包中添加 jQuery Color 插件，并将 custom-jquery.js 页面包含到他们的 header.php 文件中，你也可以加入这几行漂亮而简单的代码。

jQuery(function(){
jQuery('.home .sticky')
.animate({'backgroundColor':'#ff6600'}, 'slow')
.animate({'backgroundColor':'#ffff99'}, 'slow')
.animate({'backgroundColor':'#ff6600'}, 'slow')
.animate({'backgroundColor':'#ffff99'}, 'slow');
});

前面的代码将我们的粘性帖子从浅黄色渐变为较深的橙色，然后再次重复以突出显示。以下图像显示了帖子渐变为较深的橙色：

在书中很难看到动画效果，但我们确保了警报 .sticky 帖子在加载时会淡入到橙色 (#ff9900)，然后再淡出到黄色 (#ffffcc)，然后再重复一次，产生了相当明显的 "橙色警报" 效果。

现在警报帖子非常明显了，组织对你感激不尽！这已经足够补偿你几分钟的工作了。

创建简单、动态的图表

这个非营利组织对你的警报粘性帖子解决方案印象深刻，他们已经调拨了一些资金，并向你提出了另一个请求。他们注意到你如何使用 Inkscape 修复了警报图标，并询问你为另一个他们发布的帖子生成一个月度图表会有多大麻烦。这篇帖子是关于他们的绿色回收项目的前五个统计数据。

虽然项目符号列表对网站管理员来说非常容易实施，但人们并不真正注意或记住信息，因此他们正在考虑在网站上发布图表，但需要有人来绘制或以某种方式生成它们。

浏览他们的网站，你注意到编辑总是一贯地格式化发布的信息。所有的帖子标题都包含 "... 月度统计"，所有的信息都是用项目符号列出的，百分比数字始终位于冒号 ":" 之后。管理员一直保持如此一致是很好的。这将使得解决方案的制定变得非常容易，让编辑继续做他们一直以来做的事情。当前的帖子看起来像这样：

你告诉管理员只要他/她继续一贯地格式化帖子，你可以为他们撰写一个 jQuery 脚本来为他们绘制图表。他们几乎不相信你，很高兴让你继续进行。

要开始，我们首先需要确保我们只针对 月度统计 的正确帖子。我们将通过设置一个 jQuery 选择器来实现这一点，如下所示：

...
jQuery('
.post h2:contains(Monthly Stats)')
.siblings('.entry-content')
.children('ul:first')
.css({background: '#ccffee'});
...

如我们所见，这个小的 "测试" 选择抓取了所有包含 "月度统计" 文本的 .posts 内部的 h2 标签。然后我们沿着 DOM 移动并定位 .entry-content div，然后定位其中的 第一个 ul。我们可以通过改变背景颜色来看到先前的代码正确地定位了我们在这些帖子中想要的内容，如下一张截图所示：

现在我们可以针对特定的帖子进行定位，而无需更改主题的输出或让我们的客户做任何工作，让我们开始着手处理剩下的图表吧！

首先，因为我们将加载一个背景图片，而这些图片从主题的样式表中加载起来会更加顺畅（更容易定位图片），让我们再次使用 Inkscape 来帮助我们创建一个基本的背景，大约 450 像素宽，显示从 "刚刚开始" 到 "Yes!" 的进展，如下所示：

让我们导出该图形的 PNG 并将其添加到客户主题的图像目录中。然后，使用 jQuery，让我们动态地向所有目标ul添加一个类：

...
jQuery('.post h2:contains(Monthly Stats)')
.siblings('.entry-content').children('ul').addClass('greenStats');
...

现在，我们可以进入客户主题的样式表，并且就像我们为粘性警报发布的那样，为我们的新类创建自定义 CSS 规则。打开主题的style.css样式表，并在末尾添加以下规则：

...
.entry-content .greenStats{
margin: 0;
background:url(images/greenBackground.png) no-repeat;
border: 1px solid #006633;
padding: 40px 20px 5px 20px;
}
.entry-content .greenStats li:before{content:none;}
.entry-content .greenStats li{padding-left: 10px; margin: 0}
...

第一条规则添加了我们的新的greenBackground.png图表图像，并设置了一些基本属性，以便列表项可以开始适应我们即将添加的 jQuery。接下来的两条规则修复了客户主题（在本例中为默认主题）放置在每个.entry-content div 中的每个li元素上的特定.entry-content li问题。我们不希望在我们的图表项目之前有“小方块”，我们希望每个li的填充再多10px。同样，我们只想在 jQuery 添加了我们的.greenStats类时才影响.entry-content li 项，所以务必将该类名添加到 CSS 规则中。

现在，我们准备进行一些严肃的 jQuery 魔术了。我希望你到目前为止已经对选择器和 DOM 遍历非常熟悉了。我们将不得不运用相当多的这方面的知识来完成接下来的几项任务。

我们想要在我们的目标li上放置一个.each()函数项，并开始操纵其中的内容。

我们将从设置这个 jQuery 语句开始：

...
jQuery('.post h2:contains(Monthly Stats)')
.siblings('.entry-content').children('ul').children('li')
.each(function(){
//code here
});//end jQ li
...

接下来，在我们的.each()函数内部，我们将放置一些代码，开始操纵每个li对象内部的 HTML 和文本。我们想要查找冒号“:”，并将其用作在其后的数字周围包装一个div的点。之后，我们将寻找结束的</li>标签，并使用它作为关闭我们开始的div的点。我们将使用.text()和.replace()函数来实现这一点，代码如下：

...
var string1 =
jQuery(this).text().replace(': ',':<div class="nVal">');
var string2 = string1.replace('</li>','</div></li>');
//place back into the li element as html markup and text:
jQuery(this).html(string2);
...

前面的代码片段现在为我们提供了自定义带有类.nVal的div，我们可以开始使用它。.nVal div 最终将成为我们绿色统计图中的“柱形”。在上一个代码下面，我们将继续完善我们的.each()函数，并再次在.each()函数中内部放置以下代码：

...
//set the default css values of each nVal div:
jQuery(this).children('.nVal').css({width: '0',
padding: '10px 0 10px 20px', fontSize: '130%',
color: '#ffffff', marginBottom: '5px'});
//retrieve the number text from inside the nVal div:
var nVar = jQuery(this).children('.nVal').text();
//animate the nVal divs with the nVar values:
jQuery(this).children('.nVal').delay(600)
.animate({backgroundColor: '#006600', width: nVar*(3.8)}, 2000);
...

在前面的代码片段中，请注意我使用了.delay()函数。如果您没有使用 jQuery 1.4.2 或更高版本的库，则该函数是可选的。我只是认为，为了确保用户注意到动画，有一个大约半秒的暂停是有帮助的。

我们再次使用.text()函数从.nVal div 中提取文本，并将其用于数学方程以计算.animate()函数中 div 的width。我们将nVar乘以3.8，因为在我们的图表设计中，大约 380 像素宽的 div 相当于 100%。如果您的图表尺寸不同，您需要相应地更改这些尺寸，以确保图表柱正确地延伸出去。

结果看起来很棒！这是我们开始动画的图表：

在完成时，这就是它的样子，一个有趣、视觉清晰的组织绿色统计图的展示：

深入了解动画

多亏了你的动态绿色统计图表，你已经准备好应对一些稍微复杂的请求了：客户坚持要求 Flash 开发。作为一个在 90 年代通过 Flash 进入 Web 开发的人，Flash 开发的请求没有问题。无论你抱怨多么多，你都必须承认，Flash 确实可以做动画。

然而，Flash 确实需要一个插件，尽管它是最流行的桌面浏览器插件，但并不总是显示你希望确保每个人都能看到的核心内容的好方法，更不用说像网站导航这样的基本元素了。此外，虽然 Flash 是最受欢迎的桌面/笔记本浏览器插件，但在 iPhone 的 Safari 移动版和大多数智能手机的基于 WebKit 的浏览器中，Flash 是“不适用”的。

在当今浏览器中，随着 CSS 和 JavaScript 在浏览器中的支持不断进步（尤其是移动浏览器），我对 Flash 请求的第一个问题总是：“好的。首先，告诉我你想要做什么，然后我们再看看。”确实，我们的客户希望他们的主导航面板具有动画效果。

Flash 当然可以做到这一点，但 jQuery 也可以，而当 JavaScript 不是一个选择时，它会优雅地退化为漂亮的样式化 CSS 元素，并且在最坏的情况下，没有 CSS，页面将加载我们的 WordPress 主题的干净、语义化的 XHTML 到纯文本浏览器中。

虽然有很多种方法来提供 Flash 内容和应用程序，使它们优雅地退化为符合 HTML 标准的替代方案（并且当使用 Flash 播放器时，你应该总是提供这些替代方案），但如果这不是必要的，为什么要增加额外的开发和复杂性呢？客户不需要提供流媒体视频，也不需要定制卡通角色动画，更不用说想要一个深度的、多媒体浸润和混搭的丰富界面应用程序（RIA）。因此，让我们把 Flash 留给 Flash 最擅长的事情，并使用 jQuery 来增强我们客户的 WordPress 网站已经做得最好的事情。

幸运的是，客户是理性的，并且愿意在我们诉诸 Flash 之前看看 jQuery 能做些什么。让我们通过一点 jQuery 的灵感展示一下他们的 WordPress 网站是由什么组成的。

项目：创建时髦的导航

我们受到 Flash 启发的客户经营着一个回收和翻新 NASA 和其他空间机构废弃并出售的材料的业务。他们希望他们的导航面板能够向用户展示这种未来主义（同时也是复古）的感觉，并提供一个页面导航，根据客户的说法：“具有流畅的动画和我们的徽标/图标火箭作为指针”。

让我们继续准备主题，以便我们可以开始。我们将继续使用默认主题，并使用我们在第二章中制作的页面导航 CSS 更改，在 WordPress 中使用 jQuery 工作。我们将增强导航栏的效果，使其在菜单项上悬停时触发平滑的缩进和释放动画。最后，我们将添加一个酷炫的浮动指针选择器（也是站点的太空飞船图标）。

首先，我们需要将客户的标志中使用的太空飞船图标追踪成基本的轮廓形式，以便我们可以创建一个浮动指针。同样，这可以很容易地通过 Inkscape 完成：

我们会在这里多做一步，旋转飞船，并且由于它将成为一个透明的 PNG 文件，添加一个漂亮的阴影和光泽效果，使其更有深度：

我们将把这张图片导出为一个宽度为 37 像素的透明.png文件。接下来，我们需要准备我们主题的样式表以接受这个背景图片。我们将在 jQuery 中创建一个名为#shipSlide的div来容纳这张图片，因此我们的样式表需要适应那个id名称：

...
#shipSlide{
position: absolute; margin-top: 12px; margin-left: -7px;
width: 37px; height: 20px;
background: url(images/spaceship-icon.png) no-repeat;
}
...

注意

同样，就像本书中的许多示例一样，为了保持流程简洁易懂，我们将尽可能直接地进行操作，但不一定尽可能优化。在实际项目中，您可能想为此类项目创建一个单独的样式表，或者将您的 jQuery 工作包装到一个插件中，甚至在 WordPress 插件中使用我们在第三章中介绍的技术，深入了解 jQuery 和 WordPress。这完全取决于您希望增强的 jQuery 后续功能有多灵活和可移植。

现在，我们将在 jQuery 中开始工作。像往常一样，对于每个项目，您都要确保将 jQuery 包含到主题中，并且已经包含并设置为工作的custom-jquery.js文件。此外，对于此导航，我们将使用 Color 和 Easing 插件。您可以注册捆绑的 Color 插件，但是您需要手动从以下位置下载并包含自定义 Easing 插件到您的主题中。获取地址：gsgd.co.uk/sandbox/jquery/easing/。

在我们特定的默认主题中，我们将使用一些 jQuery 来使我们的导航条更清晰一些。

我们的第一部分 jQuery 看起来像这样：

...
//this adds our #shipSlide div
//under the twenty ten theme's menu header div
jQuery('.menu-header').prepend('<div id="shipSlide"> </div>');
//this fades the ship div to 40%
jQuery('#shipSlide').fadeTo('slow', 0.4);
...

在我使用 jQuery 的.fadeTo()函数淡化#shipSlide div 之前，我将其加载到浏览器中检查并确保背景图片是从 CSS 中加载的。下面的截图显示了船图像被我们初步的 jQuery 脚本加载并淡化：

好的，接下来，让我们设置一个基本动画，将导航li.page_item对象从左侧推入 35 像素，相对于它们的位置。 然后，我们将针对标签，并更改它们的背景颜色。 我们将使用.hover函数确保这发生在li.page_item对象的悬停和移出时：

...
jQuery('li.menu-item')
.hover(function() {
//animates each menu item to the right (from the left)
jQuery(this).animate({paddingLeft: '+=25px'}, 400, 'swing');
//this over rides the style sheet's background on hover
jQuery(this).find('a').css('background','none');
//ship move code will go here
}, function(){
//returns the menu item to it's location
jQuery(this).animate({paddingLeft: '-=25px'}, 400, 'swing');
});//end hover
...

最后，在第一个悬停函数内，在 a 对象的颜色动画的下方，我们将添加以下代码片段，它将将#shipSlide对象移动到li.item_page的位置（注意只有粗体代码）：

...
//this custom moves the ship image
var p = jQuery(this);
var position = p.position();
jQuery("#shipSlide").fadeTo('slow', 1)
.animate({marginLeft: position.left-175},
{duration: 600, easing: 'easeOutBack', queue: false});
...

在这里，我们设置了一个名为position的变量，并且还使用了一个名为.position()的函数，以便能够从li.page_item对象中提取一系列信息。

#shipSlide对象的动画函数将船向左移动到page_item的position.left，减去 175 个像素的marginLeft位置。

在前面的代码片段中，您还会注意到我们将animate函数中的queue设置为false，并且我们正在使用easeOutBack缓动方法，这仅因为我们包含了缓动插件。

我们需要的最后一小部分代码，在li.page_item .hover()代码的下方是另一个 jQuery 选择和.hover()函数，它将在#mainNav对象悬停时使#shipSlide对象淡入和淡出。同样，将此 jQuery 放置在所有其他导航代码的下方：

...
//this fades and moves the ship back to it's starting point
jQuery('.menu-header').hover(function(){
jQuery("#shipSlide").fadeIn(1000);
}, function(){
jQuery("#shipSlide").fadeTo('slow', .4)
.animate({marginLeft: '-5px'},
{duration: 600, easing: 'easeOutBack', queue: false});
});//end hover
...

最终结果看起来很棒，船和菜单项目动画流畅，客户对他们新的时髦导航非常满意。

项目：创建旋转的置顶帖子

早些时候，我们发现使用 WordPress 的特色帖子非常简单！这很好，因为我们的“我想要 Flash”客户现在请求了一个额外的增强解决方案。 他们使用 WordPress 的特色帖子来让网站观众了解他们正在推广的产品。 牢记这些帖子的内容，使他们的产品推广置于前列（通常一次两到四篇），而他们的常规新闻帖子和更新则在产品功能下方流动。

但是，当他们要展示两个以上的产品时（尤其是当他们要展示三个或更多产品时），他们当前的帖子会被推到下面，有时甚至被推到页面底部以下。 他们担心只偶尔瞥一眼网站的人如果不花时间向下滚动并查看当前的帖子，可能会觉得网站过时。

他们已经看到了许多网站示例，这些网站具有非常酷的图像旋转器，带有幻灯片或交叉淡入淡出效果，位于特色项目的顶部，并且他们想在他们的网站中加入类似的东西。 他们最初认为他们会在 Flash 中完成这个过程并放弃方便，但是由于 jQuery 导航面板效果很好，他们想要创建一个解决方案：

• 节省空间，避免将其他帖子推至“折叠”下方

• 看起来非常漂亮，并且引人注目的吸引注意力的特色文章

• 这意味着他们的营销管理员仍然很容易实现新的特色项目（只需要创建一个帖子并将其标记为“置顶”！）

这个客户的主题已经稍微改变了置顶帖子的 CSS 样式，在底部的 style.css 样式表中，我们可以找到简单的背景，使帖子具有暗色渐变以及一些字体颜色变化。

...
.sticky { background: #000 url(images/sticky-background.png)
repeat-x; color: #ccc;}
.sticky small.date{display:none;}
.sticky h2 a{color: #0099ff;}
...

结果看起来像这样，你可以看到只有三个置顶帖子不留任何空间供查看下面的当前帖子，并且使用户需要滚动相当多的距离：

本质上，我们希望将这些置顶帖子叠在一起，如果可能的话，可能使它们稍微缩短一点，隐藏除了第一个置顶帖子之外的所有帖子，然后开始逐渐显示第一个帖子上方的其余帖子。

首先，这似乎是显而易见的，但再次确保你已经注册并将 jQuery 与之前讨论过的 Color 和 Easing 插件一起包含到主题中。你可以以任何你想要的方式包含 jQuery，但我将使用 WordPress 3.0 包中讨论的 1.4.2 版本，正如第二章中讨论的那样，在 WordPress 中使用 jQuery。另外，你还需要确保在主题中包含一个 custom.js 文件，这样你就可以将 jQuery 代码从 WordPress 的 header.php 模板中移出（这也在第二章中有所涉及，在 WordPress 中使用 jQuery）。

一旦 jQuery 和你的插件包含在主题中，我们将开始使用 jQuery。因为网站的功能是完全符合要求的，而且客户也接受这种替代视图，我们将保持主题和 style.css 不变，并确保我们所有的增强都是通过 jQuery 完成的。

注意

再次说明，下面的代码可能不是实现客户目标最优雅的方式，但它是写成的，以确保发生的每一步都是清晰可见的。

让我们首先改变置顶帖子的 CSS 属性，使它们都堆叠在一起。这样做的最简单的方法？将 .sticky 类的 position: absolute。让我们也确保宽度和高度正确，并且任何溢出都被隐藏，像这样：

jQuery(function(){
jQuery(".sticky")
.css({
position: 'absolute',
top: '0',
margin: '0',
width: '650px',
height: '320px',
overflow: 'hidden'
});
...

接下来，我们将把 h2 标题向上移动一点，最重要的是，由于我们实际的帖子是处于定位绝对的 .sticky 帖子下面，我们将把它们移下来，使它们显示在即将动画化的置顶帖子下面。我们还将调整图片的右侧边距一点以便放置。

...
//move the header back over if it's affected by the css
//you could also do this in the CSS directly
jQuery('.sticky h2').css({margin: '0', padding: '0'});
//move the margin over a bit
//you could also do this in the CSS directly
jQuery('.sticky img').css('marginRight','30px');
//this pushes the other posts down out of the way
jQuery('.post:not(.sticky):first').css('margin-top','360px');
...

特别注意前一个代码片段中粗体的 jQuery 选择器。如果需要复习选择器的使用方法，你可以参考第三章，深入挖掘：了解 jQuery 和 WordPress。基本上，我们在定位第一个未分配.sticky类的.post div。很好！

结果如下所示：

好的！jQuery 有一个我们之前看过的非常好的函数，叫做.each，它将在包装集合中的每个对象上运行附加函数。如果我们只想遍历每个项目一次，我们可以使用这段代码：

...
jQuery('.sticky')
.hide()/*hide each post*/
.each( function (i){
/*i = numeric value that will increase with each loop*/
jQuery(this)
/*make sure each div is on it's own z-index*/
.css('z-index','i+10')
//using the animate function to fade in each div
//3 seconds apart*/
.animate({'backgroundColor': '#000000'}, i*3000, function(){
/*actual div fade in*/
jQuery(this).fadeIn('slow');
}
);//end animate
});//end each
...

看起来不错！然而，一旦最后一个div淡入，它就停止了，不再继续。

没有，没有超级流畅的 jQuery 方法来保持.each()函数的继续。然而，一个.each()函数如此容易设置，不利用它，即使是用于“无限循环”，也是一种遗憾。

现在，这里快速解释一下：如果你敢的话，你可以通过谷歌搜索"infinite animation loops jquery"，看看约一万条结果中，看起来有大约一万种 JavaScript 开发人员喜欢设置重复或无限循环的方法，每个开发人员似乎都认为（当然！）他们的方法是可用的最好方法。我更倾向于求助于常规 JavaScript，并使用一个setInterval函数和一些自定义变量设置的方式，这样可以很容易地利用我的现有 jQuery.each()语句和函数。

要开始创建我们的循环，我们将采用我们现有的 jQuery 语句，并将其放置在自己的函数内。你需要确保这个函数位于你的主要jQuery(function(){...文档准备好函数之外。否则，setInterval函数将无法正确启动它。

让我们称之为我们的新函数loopStickies。除了第一个语句之外，你会觉得它很熟悉：

...
function loopStickies(duration){
/*note the variable "duration" being passed*/
///we'll need to make sure everything fades out
//except the first sticky post*/
jQuery('.sticky:not(:first)').fadeOut();
/*this should look almost the same*/
jQuery('.sticky')
.each( function (i){
/*i = numeric value that will increase with each loop*/
jQuery(this)
/*make sure each div is on it's own z-index*/
.css('z-index','i+10')
/*using the animate function & "duration" var for timing*/
.animate({'backgroundColor': '#000000'}, i*duration,
function(){
jQuery(this).fadeIn('slow');
}
);//end animate
}); //end each
}//end loopStickies

好的，这只是一个开始，现在我们有了我们的loopStickies函数，位于 jQuery 文档准备好函数之外，让我们将剩下的代码放回jQuery(function(){...文档准备好函数内。跟随粗体中的注释：

...
/*set the stickies in a wrapper set to overflow hidden*/
jQuery('.sticky').wrapAll('<div id="stickyRotate"
style="position: absolute; padding: 0; margin-top: 5px;
width: 650px; height: 320px; border: 2px solid #000;
overflow:hidden;"></div>');
//make sure the first .sticky post fades in:
jQuery('.sticky:first').fadeIn();
//set the "duration" length to 6 seconds for each slide:
//(this is the var our function uses)
var duration = 6000;
/*create the interval duration length, based on the duration:*/
var intervalDuration = duration * jQuery('.sticky').length;
/*the function needs to run once before the setInterval kicks in*/
loopStickies(duration);
//the setInterval will kick off loopStickies in
//18 seconds: (6secs x number of sticky posts) */
setInterval( 'loopStickies("'+duration+'")', intervalDuration
);
...

这个工作原理是，我们的原始 jQuery 语句和.each()函数通过调用loopStickies函数在 jQuery 选择中的每个粘性帖子上运行。同时，setInterval函数被启动，但由于我们将intervalDuration变量设置为计算我们的duration变量乘以粘性帖子数量，它将不会在 18 秒后启动。正好是我们的原始函数完成的时候！setInterval函数会接管并将我们的粘性帖子循环到无限远。

好的，让我们来看看；我们现在有一组非常好的便签，持续六秒钟，然后淡出到下一个便签！

添加一点额外的努力：添加循环指示器

旋转便签非常棒！然而，尽管客户一次只会有三到四个便签在旋转，但至少让用户知道他们要查看所有旋转的时间大致是个好习惯。大多数旋转幻灯片都会在某个地方添加指示器，让用户知道将显示多少个面板，并允许用户在面板之间导航。

让我们看看如何将此功能添加到我们的旋转便签中。首先，我们需要创建一个小的界面。在我们之前创建的#stickyRotate包装器内，添加在最后一个便签对象后的一个带有内联样式的div。再次强调，这对于一个工作项目来说不一定理想，但我想让每一步都清晰明了。实际上，你可能会创建自定义样式表或修改你正在工作的主题。无论如何，这是我们的交互容器。我把这段代码放在了我的前一个代码的底部，在 jQuery 文档准备好函数内部：

...
jQuery('.sticky:last')
.after('<div id="stickyNav"
style="position: absolute; padding: 10px 0 0 0; margin-top: 280px;
height: 25px; width: 650px; color: #eee; background: #000;
text-align: center"></div>');
...

并在那段代码下面，我们将添加一些更多的 jQuery 代码，这些代码将把每个便签的编号插入到我们刚刚创建的#stickyNav div 中：

...
rotating sticky postsloop indicator, addingjQuery('.sticky')
.each( function (i){
jQuery('#stickyNav').fadeTo(0, 0.8)
.append("<div class='sN'
style='display:inline; margin: 0 5px;
border: 1px solid #999;
padding: 2px 5px;'>"+(i+1)+"</div> ");
});
...

这段代码使用了另一个each函数，但我们只需要，并且希望它运行一次，并将数字 1 到 3（或者我们有多少个便签）附加到#stickyNav div 中。

最后，为了真正完成这个效果，我们需要回到我们的loopStickies函数内部。在.animate函数的回调函数内部，我们将添加以下粗体代码：

...
jQuery('.sticky')
.each( function (i){
/*i = numeric value that will increase with each loop*/
jQuery(this)
/*make sure each div is on it's own z-index*/
.css('z-index','i+10')
/*using the animate function for timing*/
.animate({'backgroundColor': '#000000'}, i*duration, function(){
jQuery(this).fadeIn('slow');
//interactivity
jQuery("#stickyNav .sN").css('color','#666666');
jQuery('#stickyNav .sN:eq('+i+')').css('color','#ffffff');
}
);//end animate
}); //end each
...

在前面的代码中使用:eq()选择器，我们能够定位到界面显示中的相应编号，并使其与其他编号突出显示。这样可以让用户看到有多少个幻灯片，以及他们在哪个幻灯片上。

总结

你现在已经是使用 jQuery 处理动画的专家了！通过这些示例，你可能会发现几种方法来进一步增强你的 WordPress 站点。你现在应该知道如何：

• 使用动画引导用户注意关键信息

• 生成动画条形图

• 创建一些非常流畅、带有动画的页面导航

• 开发旋转便签

接下来，让我们看看 jQuery UI 插件以及它如何使 WordPress 站点受益的许多方法。

第六章：WordPress 和 jQuery 的 UI

我们现在准备好去看看 jQuery 最受欢迎的插件了：UI。当然，UI 代表用户界面。jQuery UI 插件简化了已经通过 jQuery 简化的许多最受欢迎的任务。我知道，很难想象它会变得更简单，但这正是这个插件所做的。最重要的是，虽然增强的效果很好，但 UI 插件提供了界面小部件以及一种简单的方式来对其进行样式化或“主题化”，而无需编写特定的界面元素代码，如选项卡、对话框等等。

在本章中，我们将：

• 快速了解 UI 插件的内容和入门方式

• 学习如何将 jQuery UI 小部件应用到我们的 WordPress 站点中，使其更加直观、易于理解内容，并鼓励用户采取行动。

• 学习如何使用常见的 WordPress 功能实现流行的 UI 功能和小部件

让我们开始吧。

了解 jQuery 的 UI 插件

您可以访问 www.jqueryui.com 了解 jQuery UI 插件的使用方法。

UI 插件提供了一组标准化的小部件、交互和效果。让我们详细看看每种类型的提供内容。

小部件

jQuery 中的“小部件”一词与 WordPress 的小部件有些不同，WordPress 的小部件是设计成在主题的侧边栏中很好地显示的小插件。在 jQuery 的 UI 插件中，小部件描述了一组完整功能的用户界面控件，这些控件在项目中通常是必需的，并由 jQuery 开发人员创建。UI 小部件为 jQuery 开发人员节省了大量时间，他们不再需要编写 jQuery 语句和链接函数来创建相同的界面和效果。以下是 jQuery UI 提供的界面小部件：

• 手风琴：此小部件通过点击每个部分的标题来展开和折叠被划分为逻辑部分的内容。在任何给定时间只能打开一个部分。

• 自动完成（1.8+）：这是 1.8 版本中提供的新功能。自动完成小部件在您输入时提供建议。建议源以基本的 JavaScript 数组形式提供。

• 按钮（1.8+）：1.8 版本中的新功能是按钮小部件。这使您可以采用不同类型的标记并将 UI 的按钮样式和功能应用于它。

• 日期选择器：日期选择器小部件可以应用于标准表单输入字段。聚焦输入字段会在一个小叠加层中打开一个交互式日历。

• 对话框：此小部件是页面内的一个叠加层。它有一个标题栏和一个内容区域，并且可以通过默认情况下的“x”图标或通过传递给它的额外按钮参数来移动、调整大小和关闭。

• 进度条： 进度条 小部件旨在通过传递给它的值参数简单显示当前进度完成的百分比。它默认缩放以适应其父容器内。

• 滑块： jQuery UI 滑块 小部件将对象（例如空的div标签）转换为滑块。有各种选项，例如多个手柄和范围，然后可以将其传递给其他对象和函数。您可以使用鼠标或箭头键来更改滑块的位置。

• 选项卡： 选项卡 小部件用于将内容分成多个部分，可以通过单击选项卡标题来交换，以节省空间，就像手风琴一样。

交互

jQuery UI 交互采用了一组更常见的复杂 jQuery 行为，开发人员通常需要为项目创建，然后将它们打包成方便易用的函数，如下所示：

• 可拖动： 这种交互使所选元素可通过鼠标拖动。

• 可放置： 这种交互与可拖动元素配合使用，并使所选元素可放置（即它们接受可拖动元素放置在其上）。

• 可调整大小： 这种交互通过在对象上添加可视的“手柄”使所选元素可调整大小。您可以指定一个或多个手柄，以及最小和最大宽度和高度。

• 可选择： 这种交互允许通过在元素上用鼠标拖动“套索”或框选来选择元素。

• 可排序： 这使所选元素可通过鼠标拖动进行排序。

特效

主要特点是.effect()函数，但 jQuery 中可用的标准动画函数和快捷方式都已经通过 jQuery UI 插件的“效果核心”进行了增强。该核心还包括对颜色、动画的能力，还包括额外的缓动选项；因此，如果将其包含到项目中，您将不再需要之前我们一直在使用的 Color 或 Easing 插件。jQuery 效果包括：

• 效果： 此函数允许您为任何对象分配来自 15 种效果中的一个。

• 显示： 这种增强型显示方法可选择接受 jQuery UI 高级效果。

• 隐藏： 这种增强型隐藏方法可选择接受 jQuery UI 高级效果。

• 切换： 这种增强型切换方法可选择接受 jQuery UI 高级效果。

• 颜色动画： 我们在第五章中学到的 Color 插件被包含到 jQuery UI 效果核心中。同样，它简单地扩展了animate函数，以便能够同时动画化颜色。

• 添加类： 将指定的类添加到一组匹配元素中的每个元素，可选择在状态之间进行可选的过渡。

• 删除类： 从一组匹配元素中删除所有或指定的类，可选择在状态之间进行可选的过渡。

• 切换类： 如果不存在指定的类，则添加指定的类，并在存在指定的类时删除指定的类，使用可选的过渡。

• 切换类： 从第一个参数中定义的类切换到第二个参数中定义的类，使用可选的过渡。

WordPress 中捆绑的 jQuery UI 插件版本

大多数 jQuery UI 插件的主要小部件和交互核心都捆绑到了你的 WordPress 安装中。如果你正在使用 WordPress 2.9.2，你已经捆绑了 jQuery 1.3.2，并且 UI 插件核心是 1.7.1，并且你还可以使用以下 jQuery UI 小部件和交互：对话框、可拖动、可放置、可调整大小、可选择、可排序和选项卡。

如果你正在使用 WordPress 3.0+，你的安装中已经捆绑了 jQuery 1.4.2，并且捆绑了 UI 核心 1.7.3。同样，这是与上一段提到的相同的小部件和交互。

如果你想利用 UI 插件的效果，或者如果你正在使用 jQuery 1.4.2 并想利用 UI 插件的 1.8+ 功能，你需要通过从 jQuery UI 网站或 Google 的 CDN 单独下载 UI 插件版本 1.8+ 的副本。

从 jQuery UI 网站挑选和选择

从 jQuery UI 网站下载的优点是你可以为你的项目挑选你需要的内容。如果你去下载页面www.jqueryui.com/download，你会在右侧看到可以选择版本1.7.3或1.8.4并单击下载按钮；这将给你一切。

为了开发目的，你可以直接下载整个文件。ZIP 文件超过 4 MB，但其中包含一个充满示例和文档的开发捆绑目录；这些内容都不会加载到你的项目中。

选择所有选项后，你加载到 WordPress 项目中的实际 UI 插件的 .js 文件约为 200 KB，根据你从网站选择了什么或者你如何自己创建，你可以添加大约另外 100 KB 到项目中的 CSS 主题中。如果你确切地知道你要使用哪些功能，你可以通过只选择你想要使用的内容来减少一些千字节。

下载页面很棒，因为它不会让你取消选择依赖于你选择的另一个功能的任何内容，而你想要使用它。这是一个关于选择你需要的东西的警报的截图：

提示

确保下载与你的 jQuery 版本相匹配的正确 UI 插件版本！

如果你的项目使用的是 WordPress 2.9.2，捆绑的版本是 jQuery 1.3.2，所以你需要确保下载 UI 插件版本 1.7.3。如果你使用的是 Google CDN 或你自己的 jQuery 下载版本是 1.4+，你可以下载并使用 jQuery UI 插件版本 1.8+。

让它看起来正确：简易 UI 主题化

无论你从哪里引入 UI 插件，你自己的下载，Google CDN，还是 WordPress 捆绑的 UI 选项，你都需要为其提供自己的样式。你可以在你的项目中包含许多出色的主题，或者轻松地自己“创建”一个以最好地匹配你站点设计的主题。

在 jQuery 的 UI 网站上从导航栏中选择 Themes，或者访问：jqueryui.com/themeroller/。

你可以直接调整生成的主题的 CSS 样式表，或者简单地在你的 WordPress 样式表之前加载 jQuery UI 样式表。在 Firefox 中使用 WebDeveloper 的 Toolbar 或 Firebug，可以很容易地查看 UI 生成的样式并在主 WordPress 样式表中覆盖它们。

将 jQuery UI 插件功能包含到你的 WordPress 站点中

到目前为止，你应该已经非常熟悉将 jQuery 插件包含到你的 WordPress 站点中。因为 UI 插件的 特定组件 已经捆绑在 WordPress 中，我们将以几种不同的方式讨论将它们包含到你的项目中。

从 WordPress 的捆绑包含 jQuery 的 UI

WordPress 捆绑的 jQuery 的 UI 插件被拆分成单独的 .js 文件。你首先必须在你的项目中注册 UI 核心文件，以及你想要包含在项目中的每个小部件或特定交互。再次强调，唯一可用的小部件和交互是：Dialog、Draggable、Droppable、Resizable、Selectable、Sortable 和 Tabs。

在你的 WordPress 主题中注册核心：

...
<?php
if (!is_admin()) {//checking for is_admin makes sure that the UI doesn't load in admin
//adding array('jquery') means the ui-core requires jquery
wp_enqueue_script("jquery-ui-core", array('jquery'));
}//end of is_admin
?>
...

然后，注册你想要的特定小部件：

...
<?php
if (!is_admin()) {//checking for is_admin makes sure that the UI doesn't load in admin
//requires jquery AND the ui-core
wp_enqueue_script("jquery-ui-dialog",
array('jquery','jquery-ui-core'));
}//end of is_admin()
?>
...

只需重复上述代码以添加额外的小部件。小部件 .js 文件名称如下：

jquery-ui-tabs
jquery-ui-sortable
jquery-ui-draggable
jquery-ui-droppable
jquery-ui-selectable
jquery-ui-resizable
jquery-ui-dialog

注意

再次，WordPress 的捆绑 JavaScript 的完整列表可以在 Codex 中找到：codex.wordpress.org/Function_Reference/wp_enqueue_script。

从 Google CDN 包含

你可以非常类似于通过 Google CDN 包含 jQuery，包含 jQuery 的 UI 插件。UI 插件路径是：ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js。注意这里的粗体版本号。你可以将它更改为你需要的 UI 插件版本。如果你使用的是 jQuery 版本 1.3.2，请确保目标是 1.7.2。如果你使用的是 1.4.2，你可以选择 1.8.0。

让我们回顾一下如何使用 wp_register_script 来调用从捆绑包或从 Google 的 CDN 可用的脚本：

...
if (!is_admin()) {//checking for is_admin makes sure that UI doesn't load in admin
wp_deregister_script( 'jquery-ui-core' );
wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js');
/*this brings over the entire 1.8 core and all widgets, interactions and effects from the Google CDN*/
}//end of is_admin
...

您应该注意，虽然我们正在注销捆绑的 jquery-ui-core 文件，但我们从 Google CDN 加载的是 完整的 jQuery UI 插件，可以访问其所有小部件、交互和效果。最好在您的代码中添加注释，以便其他开发人员知道他们无需在项目中注册单独的小部件和交互。

从您的主题或插件目录加载您自己的自定义下载

如果您已将 UI 包含到您的主题或插件目录中，您将通过以下方法重新加载，再次使用 wp_enqueue_script：

从主题中包含 UI 插件的本地副本：

...
if (!is_admin()) {//checking for is_admin() makes sure that UI doesn't load in admin
wp_enqueue_script('jquery-ui-1.8.custom.min', get_bloginfo('stylesheet_directory') . '/js/jquery-ui-1.8.custom.min.js', array('jquery'), '20100410' );
}//end of is_admin()
...

同样，在脚本末尾添加 array('jquery')，这让 WordPress 知道 jQuery 是必需的，以防尚未注册。

要从 WordPress 插件中包含 UI 插件的本地副本，请使用以下 wp_register_script 函数：

...
function myPluginFunction(){
if (!is_admin()) {//checking for is_admin makes sure that the UI doesn't load in admin
wp_register_script('jquery-ui-1.8.custom.min',
WP_PLUGIN_URL . '/js/jquery-ui-1.8.custom.min.js');
}//end of is_admin
}//end of myPluginFunction()
add_action('wp_head', 'myPluginFunction');
...

不要忘记您的样式！

无论您从哪里获取 UI 插件，WordPress、Google 的 CDN 还是您自己的下载，您都需要为 UI 插件包含 CSS 样式。如果之前没有玩过主题设置器，请返回并进行操作。选择一个主题或修改其中一个主题使用主题设置器，或者从头开始创建自定义的主题，以创建与网站现有设计相匹配的小部件。

完成后，您可以选择您的主题或自定义的主题并将其放置在您的主题或插件目录中。请确保包含随主题提供的图片目录。然后，您可以将其包含在header.php 主题文件中或使用我们之前使用的 wp_enqueue_style 函数将其包含到插件或主题中，通过 functions.php 页面：

要直接在您的 WordPress 主题中直接包含 UI 主题，请使用以下链接：

...
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/js/smoothness/jquery-ui-1.8.custom.css" type="text/css" media="screen" />
...

从主题的 functions.php 页面使用 wp_enqueue_style 将 UI 主题包含到 WordPress 主题中：

...
<?php
function addUIstyles(){
wp_enqueue_style('ui-theme', bloginfo('stylesheet_directory')
'/js/smoothness/jquery-ui-1.8.custom.css', array('style'), '1.0', 'screen');
}
add_action('init', 'addUIstyles');
?>
...

将 UI 主题包含到 WordPress 插件中使用 wp_enqueue_style 与上面的示例类似，但请确保使用 WP_PLUGIN_DIR 以定位您的插件目录。

...
wp_enqueue_style('ui-theme', WP_PLUGIN_DIR .
.'/js/smoothness/jquery-ui-1.8.custom.css',
array('style'), '1.0', 'screen');
...

使用 jQuery UI 增强效果

您可能会认为在选择主题或创建自定义主题后，我们会立即开始使用小部件。我们会的！但是，在我们从 第五章 中仍然清楚地记得动画和交互的时间内（尽管，如果您在跳来跳去，不用担心），您会感兴趣了解，设置大部分那些动画和效果是这么容易，事情可以变得更加引人注目很多次，使用 UI 插件。

首先，目前 这些效果未捆绑 在 WordPress 中。因此，为了使用这些 UI 效果，您需要通过您自己的下载或从 Google CDN 导入 UI 插件。

轻松制作效果

插件所做的是添加一个名为.effect()的新函数，提供了大约 15 个新的、时髦的动画效果。特别是，blind，像百叶窗一样卷起物体；shake，稍微晃动一下；以及explode，它成功地“打破”了对象并将其片段分散在几个方向上。

让我们在鼠标悬停在标题上时对我们的文章应用shake效果。除了在我们的 WordPress 项目中注册和/或包含必要的 jQuery 和 jQuery UI 插件文件之外，你还应该将一个custom-jquery.js文件包含到你的主题中以使用。完成这些步骤后，包含以下代码：

jQuery(function(){
jQuery(".post h2").hover(function(){
jQuery(this).effect('shake', 200);
}, function(){
jQuery(this).effect('shake', 200);
});
});

你可以（在某种程度上）在以下截图中看到这个效果：

缓动同样容易

除了.effects函数外，UI 插件还扩展了 jQuery 的现有.animate函数以及快捷函数，例如.hide, .show, .toggle, .addClass, .removeClass和.toggleClass。与我们在第五章中介绍的优秀的缓动插件（由罗伯特·彭纳引入）一起，在 WordPress 中使用 jQuery 动画。因此，如果你使用 jQuery UI 插件并将效果核心包含在下载中，那么在项目中单独包含缓动插件是没有必要的。

使用 jQuery UI 进行颜色动画

除了包含的缓动插件外，jQuery UI 还内置了颜色动画插件。在第五章，在 WordPress 中使用 jQuery 动画 中，我们使用了与我们的 WordPress 安装捆绑在一起的 Color 插件。但是，如果你打算使用已下载的版本或 Google CDN 版本的 UI 插件，就像使用缓动插件一样，你就不需要单独使用或从 WordPress 捆绑包中注册它了。

为了在我们的项目中测试它，我们没有注册 Color 插件，但正在引用我们下载的 UI 插件版本 1.8，让我们应用easeOutBounce缓动选项来动画化我们标题文本的颜色：

...
jQuery(".post h2").hover(function(){
jQuery(this).animate({'backgroundColor':'#ccccff'}, 2000,
'easeOutBack');
}, function(){
jQuery(this).animate({'backgroundColor': '#999999'}, 2000,
'easeOutBack');
});
...

然后，它会动画到浅蓝色，如下截图所示：

然后，回到灰色：

你注意到，在 jQuery UI 插件的效果核心中使用颜色动画和缓动功能与使用独立的 Color 动画或缓动插件没有区别。同样，除了哪个版本更方便和有用外，即独立插件还是 UI 插件，应该没有任何区别，对你的 WordPress 项目而言。

提升 WordPress 站点的用户界面

我们可以看到 jQueryUI.com 上的 UI 演示确实看起来很酷，但是既然我们已经将 UI 插件加载到我们的项目中，那么我们如何真正地在 WordPress 项目中使用这些功能呢？不同类型的界面可以帮助我们更轻松地组织和关联各种类型的信息，并减少混淆。WordPress 的主题 API 允许以逻辑块的形式在网站设计中显示各种类型的信息，主要是帖子和列表。让我们看看我们是否可以使用 UI 功能来增强其中的任何信息。

我们已经看到 UI 插件提供了：手风琴、选项卡、对话框、日期选择器，以及实现拖放和排序的简单方法。此外，如果您使用的是最新版本，即 1.8 或更高版本（本章示例使用的是），还有像自动完成和按钮这样的酷炫小部件。让我们再假设有另一个客户，并看看一些小的界面增强如何帮助他们的网站。

项目：将帖子转换为选项卡

你可能最近在网站上看到越来越多地使用选项卡。在您的网站中使用选项卡的主要原因是，它允许用户轻松地一次查看一组相关内容（这就是为什么“选项卡样式”网站导航也很受欢迎的原因）。作为设计师，它还允许您将内容放入一个方便的模块中，节省宝贵的屏幕空间。

在我们的第五章中，在 WordPress 中使用 jQuery 动画，我们学会了如何堆叠置顶帖子，使它们以幻灯片方式旋转。虽然对不相关的内容进行动画处理很有效，以确保每个人都能一瞥，但将内容加载到选项卡中意味着内容是相关的，是的，您还想节省空间，也许将信息放在折叠部分之上，以便用户更有可能接受它。

你最新的假设性客户有三个与了解他们公司相关的信息。这些内容变化不大，但他希望网站的用户能够在一开始就获得信息概览，并有下载白皮书的选项，而无需滚动。

客户已经在他的网站上有了这些内容。这些帖子被分配到一个名为我们的结构的唯一类别中。这些帖子现在已经相当陈旧，甚至在网站的主页上都没有显示出来，所以客户一直在手动在网站的各个其他页面中链接到这些帖子的永久链接。

要开始，我们决定从 WordPress 主题中获取一点帮助会对我们有所裨益。

在 WordPress 主题中设置自定义循环

让我们从进入客户主题开始，并设置一个仅从 我们的结构 类别中提取的循环。然后，使用 jQuery UI，我们将以一组选项卡的形式显示这些帖子，这样大部分内容都可以在“折叠”部分查看，确保站点访问者可以首先获得组织的最重要信息概述，而一般的帖子项目将会在下方流动。

首先，在 index.php 页面中，我们将创建一个新循环，在现有的仅显示 我们的结构 类别的 loop.php 包含之上。不过，在我们这样做之前，我们将转到 jQuery UI 网站，并查看选项卡设置的演示：jqueryui.com/demos/tabs/。

本质上，我们看到演示选项卡具有列出标题的 ul，包裹在调用指向内容 div 的 href 的锚点中。这意味着我们的主题实际上将需要 两个 自定义 WordPress 循环来适应此小部件。

我们将在我们的 index.php 模板文件中设置它们，就在我们的主要内容 loop.php 包含的上方，在我们正在使用的主题中的 #content div 内部，这是默认主题。第一个循环将设置我们的自定义 #ourStructure div，其中包含标题的 ul 列表：

...
<div id="ourStructure">
<ul>
<?php//start custom loop
//get posts in the proper category
$postList = get_posts('category=4');
foreach($postList as $post):
setup_postdata($post);
?>
//set up a list item with a unique anchor link
<li>
<a href="#post-<?php the_ID(); ?>">
<?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
<!--//second loop goes here-->
</div><!--//end of ourStructure-->
...

接下来，在上一个循环之下，但仍在 #ourStructure div 内部，我们将再次运行循环，现在专注于帖子的标题和内容，如下所示：

...
<!--//second loop goes here-->
<?php
//again, call correct category
$postContent = get_posts('category=4');
foreach($postContent as $post):
setup_postdata($post);
?>
//assign a unique ID to div
<div id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?></h2>
//add content:
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
</div>
<?php endforeach; ?>
</div><!--//end of ourStructure-->
...

这给我们带来了一个看起来像下一个屏幕截图的结果。虽然不是非常漂亮，但它是功能齐全的，而且肯定能将重要信息展示出来，并允许用户链接到 id 实例的锚点名称。

然后，我们将使用 jQuery 的 UI 选项卡增强该标记，如下所示，通过针对 #ourStructure div，我们在我们的 custom.js 文件中设置以下 jQuery 语句：

...
jQuery("#ourStructure").tabs();
...

是的。难以置信，但多亏了 WordPress 的灵活性和我们使主题为我们完成的工作，这就是我们需要的 全部 jQuery！

不错！现在内容使用我们选择的 jQuery UI 主题 "Smoothness" 包含在顶部（再次强调，我们正在使用撰写本书时随 3.0 一起提供的默认 WordPress 主题）。让我们看一些 UI 插件的其他用法。

使用 jQuery 完全实现选项卡

通过调整 WordPress 主题，我们实现了上述选项卡方案，包括在 HTML 中包含标题的 ul 列表，然后在下面使用 div 标签包裹帖子内容。这样做很有效，因为它生成了一个 ul 列表，其中包含指向锚点名称的 href 链接，即使在未启用 JavaScript 的浏览器中，仍然可以呈现内容并正常工作。

但是，对于其他情况，例如 WordPress 已经呈现您需要的内容（例如，一篇帖子或页面中已经包含了一组h2或h3标题和内容），或者您只是无法编辑主题，可能更容易通过在前面应用一点 jQuery 来生成 UI .tab功能所需的 DOM 对象。

对于在单个页面或 WordPress 帖子中添加的h3标题和p段落标签的列表，我们仍然可以将该内容包装在 UI 标签小部件中。

下一张屏幕截图描述了关于页面，其中已经包含了所有内容；我们只需“调整”它以尽可能满足 jQuery UI 标签的要求：

首先，我们将目标页面。WordPress 也可以输出唯一的页面 ID 以及一系列类名；您将不得不在浏览器中查看 WordPress 主题的 HTML 输出的查看源代码，看看主题是否利用了这个功能（大多数良好的 WordPress 主题都会这样）。这种能力可以帮助我们仅针对我们想要影响的内容进行定位。例如，如果我们只想增强我们的关于页面，我们可以查看源代码，并看到帖子的唯一 ID 是#post-104。这样我们就可以通过首先在ul标题列表前面添加一个ul列表来定位我们想要添加标签的帖子。

一旦我们有了ul列表，我们需要将所有内容包装在一个新的、可选的带有 ID 为#aboutUs的 div 中。然后，我们将循环遍历每个h3项，创建带有锚链接的单独的li列表项，并将每个后续的h3和p标签都包装在其自己的带有锚点命名的iddiv 中。

阅读代码中的粗体注释以便跟踪：

...
//add in a ul list on the About page only, before the first h3
jQuery("#post-104 h3:first").before("<ul></ul>");
//select the ul, the h3's AND the h3's p tags
//and wrap them in a new div
//use the .add() function to make sure everything is selected
jQuery("#post-104 ul").add("#post-104 h3")
.add("#post-104 h3+p").wrapAll("<div id='aboutUs'></div>");
//for EACH h3 item:
jQuery("#post-104 h3").each(function(i){
//add text to the ul list w/ anchor links
var titleTxt = jQuery(this).text();
var htmlTxt = "<li>
<a href='#name-"+i+"'>"+titleTxt+"</a></li>";
jQuery("#post-104 ul").append(htmlTxt);
//wrap each h3 AND p in a div with anchor names
//this time, use .andSelf to make sure everything is selected
jQuery(this).next("p").andSelf()
.wrapAll("<div id='name-"+i+"'></div>");
});
//remove .entry class so list items don't have right quotes
//this is a list style in the default theme
jQuery("#post-104 .entry").removeClass('entry');
//Last, create the tabs widget
jQuery("#post-104 #aboutUs").tabs();
...

现在刷新页面显示如下：

再次强调，您对 WordPress 主题和 jQuery 的了解越多，您就越能决定哪种路线在决定是否操纵主题以帮助您的 jQuery 增强功能，或者是否更好地使用纯 jQuery 方面更快或更好。。

项目：使边栏成为手风琴

手风琴几乎具有与标签相同的功能。大多数情况下，它们只是垂直而不是水平的。与标签一样，您将希望将它们用于将相似的信息组合到一个更整洁的空间中，从而使站点用户能够按逻辑块查看信息，而不必沿着站点或滚动条向下浏览。

在我们一直使用的默认主题中，边栏上的页面导航有一些信息，我们希望人们能够一目了然地看到，并且不会将标题推到可能错过它们的地方。通过将各节分组成可以展开并显示附加信息和链接的手风琴，我们可以节省一些空间，并确保当页面加载时用户至少可以看到重要的组织标题，并知道可能需要展开并查看更多信息。

手风琴小部件与列表非常配合，这就是侧边栏的用途。正如您可以通过jQueryUI.com/demos/accordion的示例代码看到的那样，该小部件识别并与一致的、分层次顺序设置的标题和段落或 div 标签一起工作。您还可以使用各种选项将特定的 DOM 对象设置为标题和导航元素。

我们默认主题的 WordPress 侧边栏是一个大的 ul 列表，位于一个 div 内。这对手风琴小部件来说是完美的，但由于我们设置了一些自定义 CSS，使页面列表显示更像导航按钮，我们想要针对导航列表项 下面 的下两个列表进行定位。不用担心，很容易选择并应用手风琴小部件到下列项目中，如下所示：

...
//select the proper li level and exclude the inner ul lists then wrap in a targetable div
jQuery(".xoxo ul li:gt(10)").not(".xoxo ul li ul li")
.wrapAll('<div id="sideAccordion"></div>');
//select the new target and assign the widget
jQuery('.xoxo').accordion().css({'marginTop':'30px'});
...

小部件的默认状态是显示顶部手风琴打开。客户希望它完全关闭。为了实现这一点，我们将向小部件添加一些参数，包括 active: -1，通常用于选择要打开的条，但通过将其设置为 -1，它们都将关闭：

...
jQuery('.xoxo')
//options for the accordion
.accordion({header: 'h2', collapsible: true, active: -1})
.css({'marginTop':'30px'});
//last, some extra styles to the headers and ul lists
//to line them up
jQuery(".xoxo h3")
.css({'padding':'5px 0 5px 25px', 'height':'15px'});
jQuery(".xoxo ul").css({'height': 'auto', 'margin': '0px',
'paddingLeft': '25px', 'paddingTop': '5px',
'paddingBottom': '5px'});
...

我们页面导航下的侧边栏现在以一种漂亮的样式成为手风琴式，与我们页面的标签相匹配。

当页面加载时，这些手风琴标题是关闭的，这样网站用户就可以选择要探索的内容。

现在让我们继续进行我们客户的最后一个增强。

项目：向下载按钮添加带图标的对话框

对话框是提醒和引导人们注意非常重要信息的好方法，确保他们理解下一步需要采取的步骤，以及确认操作。

我们的客户对主页的选项卡信息和精简的手风琴侧边栏非常满意。他们只需要进行一个增强。主页上的第一个选项卡提供了一个关于他们的方法、产品以及各种用途信息的白皮书的 PDF 下载。正如您可以从下一个截图看到的那样，客户希望用户了解他们正在下载有版权的信息，并且该文档不能自由分发。

正如您可以在接下来的截图中看到的那样，他们在 PDF 文件的下载链接之前放置了一些免责声明语言：

一般来说，这就是他们的法律部门声称他们需要的全部，但他们希望更清晰一些。我们可以通过使用按钮小部件使下载过程更加突出，并将以前的 免责声明 文本变成对话框来进一步增强这一下载过程。用户随后必须在对话框上选择 同意 才能继续 PDF 下载，客户可以放心，通过启用 JavaScript 的浏览器下载他们的白皮书的大多数人肯定意识到免责声明。

首先，让我们设置好将 免责声明 文本放在我们的对话框内。我们将定位段落并如下所示应用对话框小部件：

...
//select p that contains the disclaimer text
jQuery("#post-98 p:contains(Disclaimer:)")
.wrapAll("<div id='disclaimer'></div>");
//create the disclaimer dialog widget
jQuery("#disclaimer").dialog();
...

如果重新加载页面，您会看到 免责声明 文本现在以对话框的形式出现如下：

对话框的默认设置是将文本“居中”对齐。对于单行文本来说很好，但我们的段落看起来有点奇怪，所以我们已经向我们的 .wrapAll HTML 添加了样式，如下所示：

...wrapAll("<div id='disclaimer' style='text-align:justify'></div>");...

接下来，我们真的不希望对话框立即出现，所以我们将其选项 autoOpen 设置为 false。我们还希望确认按钮出现，以及对话框顶部栏上的标题。对话框小部件还可以容纳按钮，所以我们将它们添加进去，并为其添加功能，如下所示：

...
//create the disclaimer dialog widget
jQuery("#disclaimer").dialog({
//set the dialog to close
autoOpen: false,
//set the title
title: 'Download Agreement',
// set up two buttons
buttons: {
//activates the URL placed in the a href
"I Agree": function() {
//get the URL of the PDF
var pdfFile = jQuery("#post-98 a").attr('href');
//direct the browser to that URL
window.location.href = pdfFile;
},
//close the dialog box
"Close" : function() {
jQuery(this).dialog("close");
}
},
});
...

上面的方法效果很好——或者至少我们认为是这样。现在对话框的 autoOpen 选项已设置为 false，我们无法确定！我们需要 下载 PDF 链接来启动对话框，顺便说一句，我们需要确保链接的 href 不会触发 PDF 下载。

如果你有在关注，你可能已经准备好使用 .removeAttr() 函数从链接中移除 href 属性并使其无效。这是一个好主意；然而，在前面的代码片段中，我们引用了链接的 href 属性。该引用直到对话框出现后才会触发，这意味着在我们将其从对象中移除之后，我们的 window.location.href JavaScript 将不知道要去哪里。

我们最好使用另一个称为 preventDefault() 的出色函数，它将保留链接的所有属性，但阻止其像点击链接一样操作。让我们添加这个新的链接功能：

...
jQuery("#post-98 a")
//set up a click function on the link
.click(function(event){
//open the dialog box
jQuery("#disclaimer").dialog("open");
//ensures that the link to the href is disabled
event.preventDefault();
});
...

最后，在刷新页面并查看之前，让我们先把 PDF 下载链接变得更“可点击”一点。因为我们使用的是来自 Google CDN 的 jQuery 版本 1.4.2，以及 jQuery UI 插件的 1.8 版本，我们可以通过选择链接并为其添加按钮小部件来实现这一点。

注意

如果您没有使用 UI 插件的 1.8 版本，则此步骤是可选的。您可以简单地使用 CSS 样式或 .css() 函数来自定义链接的样式。

我们将简单地在现有的链接选择之后 链式 使用 .button() 小部件函数，在 .click() 函数之后，如下所示：

...
jQuery("#post-98 a")
//set up a click function on the link
.click(function(event){
//open the dialog box
jQuery("#disclaimer").dialog("open");
//ensures that the link to the href is disabled
event.preventDefault();
})
//add the button widget
.button();
...

你可以刷新页面并查看新按钮，如下截图所示：

尽管按钮化的链接看起来很棒，但只需稍加努力，再添加一些图标，就可以清楚地表明点击按钮将给人们带来什么，并鼓励他们采取行动。

jQuery UI 插件主题附带一系列 框架图标。如果你将 image 目录相对于你的 jQuery UI 样式表，你就可以访问它们。

按钮小部件允许将图标放置在“主要”和“次要”位置。主要位置位于按钮左侧，次要位置位于按钮文本之后的右侧。让我们按照以下方式将“circle-arrow-s”图标和“document”图标添加到我们的按钮中：

...
jQuery("#post-98 a")
//set up a click function on the link
.click(function(event){
//open the dialog box
jQuery("#disclaimer").dialog("open");
//ensures that the link to the href is disabled
event.preventDefault();
})
//add the button widget
.button({
//add the icons
icons: {primary:'ui-icon-circle-arrow-s',
secondary:'ui-icon-document'}
});
...

一旦人们点击按钮，我们的“标志性”按钮和对话框如下所示：

小贴士

想找出小部件可用的图标？请查看主题定制器：jqueryui.com/themeroller/。在页面底部，你会看到所有框架图标。将鼠标悬停在它们上面将显示它们的 title 标签信息，其中包含你要在 jQuery 语句中引用的名称。

通过此增强功能进行测试的最后一项任务是，点击 我同意 将启动下载，如下截图所示，功能正常！

这实际上是向网站添加的大量互动性，同时，它也会很好地降级，而且没有 JavaScript 的情况下也能正常工作。这真是很好地利用了 jQuery 和 jQuery UI 插件。

总结

这是我们对 jQuery UI 插件的看法，以及它如何真正有益于 WordPress 网站的一些方式。有数十种，甚至数百种方法，这取决于你的站点或项目及其需求。

请记住，jQuery 在客户端、浏览器中运行，WordPress 为浏览器提供成品 HTML 页面。这意味着你不仅可以增强 WordPress 内容，还可以增强大多数 WordPress 插件，例如 cforms II，大多数边栏小部件应该很容易通过 jQuery 和 jQuery UI 插件来增强。

在本章中，我们看到了：

• UI 插件及各种在 WordPress 中包含它并开始使用它的方法

• 理解将 UI 元素应用于我们的 WordPress 网站如何使其更直观、更易理解，并鼓励用户采取行动。

• 使用常见的 WordPress 功能实现流行的 UI 功能的常见方法

现在让我们继续下一章，看看如何使用 jQuery 来帮助我们创建 AJAX 交互。

第七章：使用 jQuery 和 WordPress 进行 AJAX

AJAX 是 杰西·詹姆斯·加勒特 在 2005 年创立的用户体验专家，他是www.AdaptivePath.com的创始人，AJAX 是一个缩写词。 它很快就变成了一个流行词，其描述性（以及动词性）远远超出了其实际缩写定义。 我们将快速了解 AJAX 究竟是什么，以及它有多容易实现，更不用说为我们的“假想”客户想出更多酷炫的解决方案。

在本章中，我们将重点讨论以下内容：

• 使用 jQuery 的 AJAX .load() 函数和更健壮的 .ajax() 函数的基础知识

• 使用 JSON 和连接到其他站点的 API

• 创建自定义 AJAX 增强首页和评论表单

• 使用动画和事件来优化该功能

让我们开始看看 jQuery 为 AJAX 做了什么。

AJAX 是什么，不是什么：一个快速入门

首先，如果您对 AJAX 不熟悉，我只想指出 AJAX 其实并不是一种技术或语言！ 这个缩写代表 Asynchronous JavaScript and XML。 它是使用 JavaScript 和 XML 在 Web 浏览器和 Web 服务器之间发送和接收数据的技术。 这种技术最明显（也是最酷的）的用途是，您可以通过调用服务器动态更新网页上的一部分内容，而无需重新加载整个页面。

此技术的实施使许多 Web 开发人员明白他们可以开始创建高级 Web 应用程序（有时称为 Rich Interface Applications(RIAs)），这些应用程序的工作方式和感觉更像是桌面软件应用程序，而不是网页。

如上所述，AJAX 这个词开始拥有自己的含义（正如您在本书和其他书籍中偶尔看到的一样，以及网络上到处都是的正式名词：“Ajax”，而不是全大写的缩写）。 例如，一个主要使用 Microsoft 技术的 Web 开发人员可能会使用名为 VBScript 的浏览器脚本语言，而不是 JavaScript，来对内容进行排序和显示，这些内容转换成了称为 JSON 的轻量级数据格式，而不是 XML。 你猜对了，该开发人员的站点仍然会被视为 AJAX 站点，而不是 “AVAJ” 站点（承认吧，AJAX 听起来更酷）。

实际上，正如我们在 第五章 中所指出的 jQuery Animation within WordPress，现在几乎网站上的任何东西（不是 Flash 中的）都会被视为“具有 AJAX 特性”的网站，包括滑动、移动、淡入、弹出而不会渲染新的浏览器窗口。 实际上，大多数这样的网站并不真正符合使用 AJAX 的标准，如果你在 WordPress 站点中仅使用本书中的几个 jQuery 示例，它可能会被认为是具有 AJAX 特性的，尽管没有异步调用服务器。 但在本章之后，它将是。

AJAX：使用 jQuery 更好

在过去，当我为 AJAX 撰写介绍或者与我的客户讨论在他们的项目中使用 AJAX 的利弊时，我过去常常为使用 AJAX 技术提供长篇的、深入的免责声明和警告：讲述最坏情况的故事和对于特殊需求用户而言丧失的浏览器功能，更不用说破坏了可访问性。虽然其中一些担忧仍然存在，但使用 jQuery 的“实施恐惧”基本上已经消失了。

就像我们到目前为止学到的所有 jQuery 东西一样，重点是创建出色的增强功能，逐渐降级到基本的、可工作的 HTML 功能。只要以 jQuery 深思熟虑地实现了 AJAX 技术，你会发现同样适用。如果你的网站的核心内容或功能可以在浏览器中启用 JavaScript 的情况下访问和检索，你会发现所有用户，无论他们的浏览器或可访问性要求是什么，都应该能够享受你的内容并有效地使用你的网站。你的大部分用户将能够使用你的网站，并且能够使用使网站更易于使用并且甚至可以帮助理解内容的时髦、视觉上令人愉悦的增强功能。

评估 AJAX 是否适合你的网站——一个较短的免责声明

当然，除了可访问性和合规性之外，还有一些考虑因素要考虑你网站的用户。尤其是，当你开始意识到 AJAX 技术可以为你的网站带来的强大功能时，你将希望努力遵守标准网络实践的惯例。基本上，大多数网络用户希望网页，即使是非常酷的网页，都简单地像网页一样运行！

这并不意味着你不能打破标准惯例，尤其是如果你的网站更像是一个 RIA 而不是一个纯内容网站。只要确保你告诉用户可以期待什么。例如，如果导航面板不在网站的顶部或侧边栏，你需要找到一些方法提前告诉人们它在哪里以及为什么你认为将其放置在那里更加方便。如果你使用的不是下划线和按钮框之类的不同指示符来指示可点击对象，告诉人们要寻找什么，这样他们就知道什么是可点击的，什么是不可点击的。

话虽如此，让我们来看看我们最新一批假设客户向我们提出了什么问题，并开始工作。

开始使用 jQuery 的 AJAX 功能

jQuery 的 AJAX 功能的核心是.ajax()函数。这个小家伙让你能够完成一些繁重的工作，并且为你所有的XML HTTP 请求 (XHR) 需求提供了一切。

对于那些有一点 AJAX 经验的人来说，你会高兴地发现，这个函数符合 jQuery 的真正形式，它消除了设置传统的if/else语句来测试对XMLHTTPRequest对象的支持以及如果没有的话，则是对ActiveXObject（对于 IE 浏览器）的需要。

使用.ajax()函数

让我们快速看一下.ajax调用中可用的一些功能：

jQuery.ajax({
type: //"GET" or "POST",
url: //"url/to/file.php",
dataType: //"script", "xml", "json", or "html"
data: //a query string "name=FileName&type=PDF"
beforeSend://a callback function
function(){
alert("Starting Request");
}
success: //a callback function
function(){
alert("Request successful");
}
complete: //a callback function
function(){
alert("Request complete");
}
error: //a callback function
function(){
alert("Request returned and error!");
}
});
...

例如，在 WordPress 中实现，一个.ajax()调用可能是这样的：

...
jQuery(".ajaxIt").click(function(){
//.ajaxIt is a class assigned to link in the first post
jQuery.ajax({
//url to the about page:
url: "/wp-jquery/about/",
data: "html",
success: function(data){
//limit the overflow and height on the first post
jQuery('.post:first')
.css({overflow: "hidden", height: "310px"})
//add in the data
.html(data);
//alert just shows the function kicked off
alert('loaded up content');
}
});
});
...

在给定的代码中，当用户在下一张截图中看到的那样点击.ajaxIt对象的 jQuery 选择器时，.ajax函数将整个关于页面加载到第一篇文章的.post div 中：

通过改变 div 上的 CSS 属性来隐藏溢出并设置高度，我们可以避免它看起来太凌乱：

就是这样！这是你在 WordPress 中使用 AJAX 的第一次！不过，你可能会想：“为了某事我在现实生活中可能并不想做的事情，这也太费事了。（将整个网站重新加载到一个包括头部在内的 div 中？呃！）”

你说得对。让我们来看看如何在一些更易访问和更有用的功能上快捷操作。

缩短路径

你可以看到.ajax()函数相当强大和灵活。尽管它很酷，但你可能已经希望有一个快捷方式。不用担心，与我们已经使用过的.animate()函数类似，jQuery 已经很好地将一些更“常规”的任务分解成了更易于使用和利用的小函数。以下是对 WordPress 用户最重要的几个：

• .load—你可以通过这个函数进行 POST 和 GET 调用，然后从中提取特定的、经过 jQuery 选择的内容，并将其轻松地塞进其他 jQuery 选择的区域。

• .get—和.load类似，但只执行 get 请求。

• .post—和.load一样，但专注于 POST 请求。

• .getJSON—允许你拉取 JSON 数据（如果你进行跨站点脚本编写，即从其他 URL 中拉取数据，比如twitter.com，那么这是一个好方法）。

• .getScript—允许你启动一个不附加到你的 WordPress 主题的脚本中隐藏的操作。（如果您想添加不希望其他人轻易找到和搜索的功能，这将非常有用，您还可以从其他域中引入 JavaScript 以进行操作。）

在大多数 WordPress 项目中，你会发现你根本不需要使用.ajax()函数。你会使用.load, .post或.get，有时是.getJSON或.getScript。但是，就像.animate()函数一样，偶尔会出现需要.ajax函数的灵活性和细粒度控制的情况。

所有这些快捷功能中最有用的，也是我们将重点关注的功能是.load函数。

指定.load()位置

我们可以通过这里简化的代码获得我们在完整的.ajax()函数中得到的完全相同的效果：

...
jQuery('.post:first').css({overflow: "hidden",
height: "310px"}).load('about-2/');
...

再次，有点酷，代码片段变得简单多了。这就是 AJAX；页面本身不重新加载，但为什么你想要这样做呢？（为了避免示例太凌乱，我使用了 .css 函数来改变 CSS 属性，隐藏溢出和锁定 .post div 的高度。）

这似乎很少有项目会对这有用（如果有用的话，一个iframe会实现相同的效果）。我们真正想做的是能够将另一页中的关键内容加载到我们当前页面中。好消息是，我们可以很容易实现：

...
jQuery('.post:first').load('about-2/ #post-104');
...

通过扩展 .load 函数的 url 参数，给定的代码片段将用关于页面关于的 #post-104 div 的内容替换我们的第一个 .post div。结果是这样的：

你还会注意到我能够删除 .css 函数，因为只有有用的内容被加载进来，清爽而干净。

转换加载的内容

假设我们需要转换一些我们加载进来的内容。没问题。有一个基本的“成功”回调函数可用。我们可以这样利用它：

...
jQuery('.post:first').load('about-2/ #post-104', function(){
jQuery('h3').css("color","#ff6600");
jQuery('#post-104 p:first').css("font-weight","bold");
});
...

正如你所看到的，内容现在“成为”了我们页面的一部分，并且在 ajaxed 内容中被更改的 DOM 对象集，以及页面上的其他选定匹配项（例如 h3），也随之改变。现在这似乎更有用。我打赌你可以想出很多像这样的功能用途！猜猜——我们的“客户”也可以。

项目：使帖子 AJAX 化

假设你有一个客户（放松，这是最后一个假设的客户！），他是一位“开源媒体设计师”，想要一个非常简洁和稀少的首页。如此稀少，他只想让两个特定类别中最新帖子的标题列表出现。（在理想的世界中，像这样的决定将确保他们网站出色的设计能在用户面前沉淀下来，然后再向他们提供内容。）

他们当然想要它看起来漂亮。当你点击一篇文章的标题时，它会通过 AJAX 加载，非常流畅。没有重新加载到单独的内容页面。

要开始处理这个请求，我们必须参考我们对模板层次结构和自定义循环的理解。我们将创建一个 home.php 模板页面，它将成为默认的主页，仅显示 "WordPress 设计" 和 "Inkscape 插图" 类别中最近的五篇帖子。听起来很简单，让我们开始吧。

首先创建一个名为 home.php 的新自定义模板页面，并插入你的 #content div 标记以及主题的页眉和页脚（以及其他任何你想要的内容）。

<?php get_header(); ?>
<div id="content" role="main">
</div><!--//content-->
<?php get_footer(); ?>

接下来，在我们的 #content div 内部，我们将放置加载"WordPress 主题"和"Inkscape 插图"类别的自定义循环。我们知道类别 ID 分别为 5 和 6 ，因此我们的自定义"迷你循环"看起来是这样的：

...
<div style="float:left; width: 380px;">
<h2>What's new in WordPress Themes:</h2>
<ul>
<?php global $post;
$wpposts = get_posts('numberposts=5&category=6');
foreach($wpposts as $post):
setup_postdata($post);?>
<li><a href="<?php the_permalink() ?>">
<?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div style="float:right; width: 380px;">
<h2>Inkscape: Draw freely covers it all</h2>
<ul>
<?php global $post;
$inkposts = get_posts('numberposts=5&category=7');
foreach($inkposts as $post):
setup_postdata($post);?>
<li><a href="<?php the_permalink() ?>">
<?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div style="clear:both;">&nbsp;</div>
...

自定义循环将导致一个看起来像这样的页面：

因为我们设置了我们的循环以在单页布局的 href 链接内显示标题，如果我们在 WordPress 中检查到目前为止的内容，我们将看到帖子标题，如果点击它们，我们将被带到完整的帖子页面，如下一个截图所示：

这就是我们想要的。如果用户由于任何原因未启用 JavaScript，则站点仍将正常工作并向他们提供所需的信息。这总是我们使用 jQuery 时要从基础、可工作的 HTML 和 CSS 开始的地方。目标始终是 增强 而不是排除那些由于各种原因不使用最新浏览器或没有启用 JavaScript 的酷手机的人。

此时，我们将利用我们在第六章中略微尝试过的技术。我们将“劫持”帖子的链接（这种技术通常称为“劫持”），并在 jQuery 的 .load 命令中利用 URL 以获取优势。

首先，我们需要将内容加载到某个地方，因此在我们的 custom-jquery.js 文件中，我们将一个新的 div 追加到 #content div 的底部。

...
jQuery('.home #content').append('<div class="displayPost"></div>');
...

现在，正如我们在先前的示例中看到的那样，我们当然不希望加载从开头的 body 标记到结尾的 所有 内容！我们真正想要的只是 .post div。因此，让我们设置我们的 .load 函数并缩小加载内容的范围如下：

...
jQuery('#content li a').click(function(event){
//This keeps the href from reloading the page
event.preventDefault();
//grab the page link
var page = jQuery(this).attr('href');
jQuery('.displayPost')
//use the grabbed link in the load function
.load(page+' .post')
.fadeOut()//fade out the previous content
.slideDown(2000);//slide in the new content
});
...

你能相信这是多么简单吗？点击的任何链接都会 淡出 加载的内容，并 滑入 新内容！我们现在在我们的首页上有了一个非常简单地使用 AJAX 的超级流畅效果。

.getJSON：小鸟获得最多转发

如今，Twitter 极其受欢迎，因此已经有大量出色的 jQuery 插件可以连接到它。我个人最喜欢的是：Damien du Toit 的 jQuery Plugin for Twitter： coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter。如果你真的想要对你的 Twitter 显示有很好的控制权，那么这个插件绝对不会让你失望。

然而，Twitter 搜索和用户时间线 API 方法对于 JSON 来说相当简单；因此，这对于如何使用 jQuery 的 .getJSON 函数进行“快速教程”非常适合。

另外，你猜对了，我们假想的客户认为初始首页布局可能“太稀疏”，询问我们是否可以只添加他们用户名下的三条最新推文。

JSON 和 jQuery 基础知识

在我们深入了解 Twitter 和其他服务之前，让我们先了解 JSON 的基础知识以及如何与 jQuery 结合使用。

JSON（经常发音为 Jason）是JavaScript 对象表示法的首字母缩写。本质上，它是一种简单的机器可读数据交换格式，使在 JavaScript 中构建和处理 API 应用程序变得轻而易举（它也可以与其他编程语言一起使用）。如果您想了解其历史，可以访问json.org了解更多信息。

JSON 是什么样的

您会惊喜地发现，JSON 标记语法看起来与您到目前为止在 jQuery 中或与 CSS 一起使用的大多数参数/值语法相同。它基于大多数 C 语言对象表示法，如 Java 和 JavaScript，因此在处理 JavaScript 和 jQuery 时非常方便。

例如，jQuery 的.css()函数可以在{}大括号内传递多个值，如下所示：

.css({background: '#ff6600', color: '#333333', height: '300px'});

以同样的方式，JSON 数据可以设置如下：

{"results":[{"text":"text string here",
"to_user_id":0001,"user_name":"ThunderCat"}]}

非常相似对吧！让我们看看如何在 jQuery 中使用它。

在 jQuery 中使用 JSON

让我们仔细看看.getJSON函数。

jQuery.getJSON(
url, //the location of the data
data, //if you need to send anything to the service POST
function(){
//callbackfunction
}
);
...

此函数的第一个参数与.load函数非常相似；您将放置您计划阅读的 URL。如果您需要将数据 POST 到 URL（您可以在查询字符串或数组对象中执行此操作），则使用data参数。回调函数不是必需的，除非您从自己的服务器以外的服务器调用 URL。

现在让我们看看如何在我们的 WordPress 网站中使用.getJSON。

使用 .getJSON 与 Twitter

首先，在处理其他服务的 API 时，没有理由不阅读并使用它们的文档。服务经常更新其 API 以使其更好、更快，但连接到它们并使用它们的方法有时会发生变化。要使代码与 API 保持最新有时需要相当多的努力。Twitter 的 API 文档可以在这里找到：apiwiki.twitter.com/Twitter-API-Documentation。

另外，许多 API 服务要求您注册为开发者，并使用 OAuth 使用其中一些或全部服务（或他们自己的身份验证系统来保护您的用户登录和数据）。

注意

OAuth 是什么？

OAuth 是一种开放标准，允许用户向托管数据的服务提供商提供令牌而不是用户名和密码。许多 API 服务提供商使用它，您可以从他们的网站了解更多信息：oauth.net/about/。

在本节中，我将介绍在 Twitter API 中连接到用户时间线方法的基础知识。只要用户有一个公开可见的 Twitter 流，此方法就不需要 OAuth，因此您不需要注册 OAuth 应用程序（但是注册也不会有害）。

使用 Twitter 的用户时间线方法

我们的.getJSON函数中的 URL 参数将包含以下 API，格式化的 URL：

http://api.twitter.com/1/statuses/user_timeline/username.format

你可以选择以下格式（但猜猜我们将使用哪一个！）：

• atom

• json

• rss

• xml

首先，我们需要将我们的推文放在主页上。

这里我们有两个选项，我们可以进入home.php模板文件并创建一个“实际的”div和ul列表，或者我们可以完全使用 jQuery 创建它。

说实话，这样的调用完全取决于你。在本书的这一部分，你应该已经非常熟悉编辑和调整你的主题文件，或者使用 jQuery 生成有用的 DOM 对象了。

因为推文完全依赖于 JavaScript 的启用，并且我们不试图使用模板标签定制显示任何 WordPress 内容，所以我很乐意在 jQuery 中完成所有工作。

我们将从我们的custom-jquery.js文件开始，在文档准备就绪的语句内，像这样创建推文的空间：

...
//we'll want to make sure we add our div to the home page only,
//referencing the WordPress body class .home (make sure your theme is
//using the template tag body_class() in the body HTML tag!)
jQuery('.home #content')
//this .append string is a div, h2 heading, and three list items
//in a ul with a Follow Us link:
.append('<div class="tweets"><h2>Our Tweets:</h2>
<ul><li></li><li></li><li></li></ul>
<p>
<a href="http://twitter.com/ozoopa">Follow Us!</a>
</p></div>');
...

接下来，我们将使用我们“客户”的 Twitter API URL 作为一个变量（我们将使用我的其中一个：ozoopa）。

...
var tweetURL = 'http://api.twitter.com/1/statuses/user_timeline/ozoopa.json?callback=?';
...

现在我们可以设置我们的getJSON调用：

jQuery.getJSON(tweetURL, function(twitter){
//'twitter' is the callback function that returns the tweets
//for each li in the twees class we'll drop in the text
jQuery('.tweets li').each(function(i){
//we only want the tweet text, nothing else
jQuery(this).html(twitter[i].text);
});
});
...

正如你在下一张屏幕截图中所看到的，我们的推文显示得非常好！

推特在发送什么？

我们注意到，我们只专注于获取“推文”文本本身。以下是推特实际通过 JSON 在 URL 中发送的内容（粗体部分是我们实际使用的）：

[{"coordinates":null,"in_reply_to_screen_name":null,"geo":null,"favorited":false,"truncated":false,"in_reply_to_status_id":null,"source":"web","in_reply_to_user_id":null,"contributors":null,"user":{"profile_background_image_url":"http://s.twimg.com/a/1274899949/images/themes/theme1/bg.png","profile_link_color":"0000ff","url":"http://ozoopa.com","description":"","followers_count":14,"profile_background_tile":false,"profile_sidebar_fill_color":"e0ff92","location":"","notifications":null,"friends_count":3,"profile_image_url":"http://s.twimg.com/a/1274899949/images/default_profile_3_normal.png","statuses_count":10,"profile_sidebar_border_color":"87bc44","lang":"en","favourites_count":0,"screen_name":"ozoopa","contributors_enabled":false,"geo_enabled":false,"profile_background_color":"9ae4e8","protected":false,"following":null,"time_zone":"Central Time (US & Canada)","created_at":"Tue Sep 15 21:54:45 +0000 2009","name":"ozoopa open source","verified":false,"profile_text_color":"000000","id":74567461,"utc_offset":-21600},"created_at":"Tue May 11 19:34:09 +0000 2010","id":13805349673,"place":null,"text":"Thanks for the Aptana 2.x install on Ubuntu freedomcreations.com, right up our alley!"}, ...//more tweets follow...]

正如你所看到的，你得到了很多数据可以使用！再次强调，深入研究 API 并查看可利用的内容是值得的；你也可以花几个小时尝试显示 JSON 源中可用的各种项目，这也很有趣。

使用 Flickr 的 getJSON

客户喜欢它！当然，他们现在认为主页“文字太多”。那么在边栏中添加来自 Flickr 图像标记为"wordpress theme"的最新的六张图片如何？这应该平衡一下。

幸运的是，这也不是一个问题。

再次强调，你的首选应该是 Flickr API 文档：www.flickr.com/services/api/。

但我们将继续开始，在主页边栏中为图像创建一些空间：

...
jQuery('.home).append('<div class="flickr">
<h2>Latest Flickr:</h2></div>');
...

这里有他们的公共照片流方法 URL：

...
var flickrURL = 'http://api.flickr.com/services/feeds/photos_public.gne?tags=wordpress,themes&tagmode=all&format=json&jsoncallback=?';
...

现在我们可以设置我们的getJSON调用：

...
jQuery.getJSON(flickrURL, function(flickrImgs){
jQuery('.flickr li').each(function(i){
jQuery(this)
.html('<img src='+flickrImgs.items[i].media.m+'
width="100" height="100" />');
});
});
...

Flickr 的 JSON 字符串返回一个名为items的数组，其中提供了各种各样的数据。你会注意到，当定位我们想要的信息时，与 Twitter API 相比，情况有所不同。通过将media.m的 URL 拉取到缩略图，我们能够创建一个快速的图像列表。

它看起来像是这样的，在我们的推文下面：

提供 JSON 格式的其他受欢迎的服务

乐趣不必止步于此！现在您熟悉了如何使用.getJSON，您的世界就可以在您的 WordPress 站点中实现各种自定义跨站混搭和解决方案。理解 JSON 和.getJSON函数还使您更能熟练地将良好的 WordPress 或 jQuery 插件"调整"以更好地处理您的定制需求。

以下流行的服务提供带有 JSON 支持的 API：

• YouTube：code.google.com/apis/youtube/2.0/developers_guide_json.html

• Netflix：developer.netflix.com/

• delicious：delicious.com/help/api

• bitly：code.google.com/p/bitly-api/wiki/ApiDocumentation

• goodreads：www.goodreads.com/api

• LibraryThing：www.librarything.com/api

环顾四周！如果您使用的优秀服务提供任何类型的"社交"功能，它们可能会提供以 JSON 格式提供数据的 API。您可能需要向该服务注册为开发者，以便验证您的请求（通常使用 OAuth），但如果您得到的最终结果是一个 JSON 字符串，您就可以使用 jQuery 和您的 WordPress 项目了！

项目：Ajax-化内置评论表单

从我们到目前为止完成的.load和.getJSON的工作样本中，您可能会想到许多极其酷的方式来在您的 WordPress 站点中实现 AJAX。其中最有用的应用是评论表单。

首先，我们甚至不需要修改任何模板页面 HTML 或 WordPress 模板标签、PHP 代码。这很棒，因为我们总是希望我们的站点尽可能（实际上是一直）在没有 jQuery 增强的情况下工作。

Ajax 化 WordPress 评论表单其实很简单。对于您这些"高级"主题开发者来说，这是一种吸引人们下载您主题的好方法："内置 AJAX 评论！"。这是我们希望完全控制的东西，因此我们将使用.ajax()函数而不是.load（看，我告诉过您.ajax偶尔会派上用场）。

首先，在尝试评论表单的实验中，我们希望将其 CSS 属性更改为警示用户错误。我发现最好将表单的 CSS 设置为一致的内容，然后可以轻松在 jQuery 中进行其他用途的更改。将以下代码添加到您的custom-jquery.js文件中，以更改默认主题评论表单样式的 CSS 属性。

...
jQuery('#commentform input')
.css({border: '1px solid #ccc', padding: '5px'});
jQuery('#commentform textarea')
.css({border: '1px solid #ccc', padding: '5px'});
...

现在我们准备"控制"表单。提交后，我们希望我们的 jQuery 发挥作用，而不是表单的"action"属性。因此，我们将使用一个方便的函数叫做.submit()，如下所示：

jQuery('#commentform').submit(function(){
//turns all the form info into an object
var formData = jQuery("#commentform").serialize();
//so we can display the comment back to the user
var comment = jQuery('textarea#comment').val();
});
...

注意我们使用了另一个方便但不太知名的 jQuery 函数叫 .serialize()。这个函数将我们的 #commentform 表单中的所有数据在提交时转换为一个方便的对象，现在我们可以将其传递给我们的 .ajax 函数。

在 .submit 函数内，在 comment 变量之下，让我们添加我们的 .ajax 调用。我们将使用这个函数，因为我们需要一点额外的控制，并且将利用其success: 和 error: 回调函数。阅读代码中粗体注释以跟随：

...
jQuery.ajax({
type: "POST",
//this is the script that the comment form submits to:
url: "/wp-jqury/wp-comments-post.php",
//formData is our serialized content object
data: formData,
success: function(){
//on success load content and fade in:
},
error: function(){
//on error, inform user of what to do:
}
});
//this makes sure the page doesn't reload!
return false;
...

这就是要点。我们现在准备通过设置 success: 和 error: 函数来开始工作。让我们从 success: 函数开始。

我们首先要创建一个包含消息的 div。然后，我们将我们的消息添加到该 div 中，以及我们稍早设置的 comment 变量（在我们的 formData 序列化对象之下）来将表单中输入的评论拉入我们的代码中。

我们还会确保添加一点 jQuery 的“闪光”，并利用 第五章 中的一些动画技巧，在 WordPress 中使用 jQuery 动画，以确保success响应加载得顺畅而漂亮。在 success: function() 大括号内，插入以下代码：

...
//on success load content and fade in:
//create the div that the message goes in
jQuery('#respond').prepend('<div class="message"></div>');
jQuery('#respond .message')
.html("<div style='border: 1px solid #ccc; padding: 5px 10px'>
<b>Thank you.</b><br/>
<span style='font-size: 90%;'>
<i>Your comment may be pending moderation.</i>
</span><br/> "+comment+"</div>")
.hide() //then hide it!
.fadeIn(2000); //then fade it in nicely
...

当表单填写正确时，最终结果是这样一个淡入的消息：

现在我们准备处理那些没有正确填写表单的人。如果必填字段没有填写，wp-comments-post.php 文件会抛出一个错误。我们可以利用这一点，只需使用 error: 函数检查错误即可。

Nice，我们刚刚使用 AJAX 为我们的 WordPress 站点创建了一些流畅的评论功能！

小贴士

难道这些例子中应该有一些是 WordPress 插件吗？

如 第三章 所述，深入挖掘：理解 jQuery 和 WordPress，如果你创建了一个不需要对 WordPress 主题进行任何调整或编辑，并且适用于大多数公开发布的主题的 jQuery 增强功能，你可能需要考虑将你的脚本打包成一个单独的 WordPress 插件。

如果你很忙，不想每次更换主题时都要修改新主题的所有自定义 jQuery 脚本，或者如果你是一个较大项目的一部分，有很多人，或者你只是想与不太懂技术的 WordPress 用户分享你的 jQuery 工作，那么这是一个方便的做法。按照 第三章 中的步骤，将你的 jQuery 脚本和插件打包成简单的 WordPress 插件，以便任何不太懂技术的管理员可以轻松地将它们添加到他们的项目中或将其移除。

还要记住，第三章也向您展示了如何创建 jQuery 插件。你可能可以通过将代码放入一个 jQuery 插件中，然后将其包装成一个 WordPress 插件来压缩和清理你的代码。这样也可以更轻松地管理脚本的更新和增强功能。然后，你将拥有更好组织的代码，可以与两个世界分享和共享：jQuery 开发人员和 WordPress 爱好者。

不过想想看：如果一个 jQuery 增强功能依赖于你编辑主题生成的任何自定义特殊标记（例如我们在本章开头的文章列表示例），最好将该 jQuery 脚本作为主题的一部分留下，因为它在外部无法正常工作。这对于超级自定义或高级主题来说是一件好事。通过将您的增强功能作为主题的一部分，您可以吸引人们下载它，因为它提供了他们无需再去寻找单独的 WordPress 插件的功能。

概要

谁知道 AJAX 如此容易呢？正如你所看到的，利用 WordPress 主题的优势和 jQuery 的 AJAX 事件和请求，可以非常容易地创建一些功能强大的动态站点。在本章中，我们了解了以下内容：

• 创建自定义加载内容并劫持（hijack）链接以按照我们的意愿操作

• 使用.getJSON和其他站点的 API

• 创建我们自己的自定义 AJAX 加载评论表单（可能是 WordPress 站点所有者最受欢迎的增强主题功能和插件之一）

• 进一步增强我们的 AJAX 工作，使用简单的 jQuery 动画功能

现在你已经了解了如何将 jQuery 应用于 WordPress 站点的特定增强功能和特性。我们从基础知识开始，真正学习了如何利用选择器，以便您的 WordPress 编辑工作流程不必中断，并将其应用于一些非常令人兴奋的增强功能，包括流畅的动画、UI 插件和 AJAX。我们还介绍了如何将这些解决方案集成到 WordPress 站点的主题、WordPress 插件以及 jQuery 插件中。对于你大多数的 WordPress 和 jQuery 开发需求，你已经准备好了！

在下一章中，我们将看一些与 jQuery 和 WordPress 一起工作的技巧和诀窍；本书的最后附录是一个精简的“速查表”，包含关键的 jQuery 函数以及重要的 WordPress 函数和模板标记和类，都是为了帮助您进行 jQuery 和 WordPress 的开发。

第八章：jQuery 与 WordPress 工作的技巧和诀窍

您现在已准备好将您的 jQuery 知识应用到 WordPress 的世界中。但首先，让我们看看本章将涵盖的内容：

• 适当加载我们的 jQuery 脚本的技巧和诀窍，确保它们与其他脚本、库和插件兼容

• 一些使用 Firefox 和 Firebug 以加速和帮助您 jQuery 开发的技巧和诀窍

• 有效的 WordPress 标记的优点以及如何让网站的内容编辑人员更轻松

以下是使用 jQuery 和 WordPress 所需的技巧和诀窍。

保持一个代码武器库

“片段集合”，或者我称之为“代码武器库”，将帮助您大有作为，不仅仅是与 jQuery 和 WordPress 代码相关，还可以帮助您处理一般 HTML 标记甚至您创建的 CSS 解决方案，更不用说您工作的其他任何代码语言了。

我很不擅长记住代码，标记和 CSS 的语法。我经常知道我需要什么，但从来不记得应该如何正确地编写。我过去常常花费数小时查看以前项目的各种样式表，标记和代码，将它们复制到我当前的项目中，还要不断地在网页上搜索（并“再次搜索”）我需要的语法示例。

如果您经常发现自己处于类似情况，常用的 HTML/代码编辑器中通常具备的“片段”或“剪辑”功能将为您摆脱这个乏味（和非常耗时）的任务。您只需在编辑器中的“片段”或“剪辑”面板中键入或粘贴 WordPress 模板标签，功能，PHP 代码，关键的 CSS 规则和 jQuery 函数（以及您发现最需要使用的任何其他代码语法），应用程序会为您保存它，以备将来使用。

当您参与不同的项目时，您可能会提出您可能希望在将来再次使用的解决方案，比如，用于无序列表的一组 CSS 规则，以使之成为一个漂亮的画廊视图，或两个 jQuery 函数的非常巧妙的使用。每当您创建您认为可能会派上用场的东西（它确实会再次派上用场），请务必立即保存它，供将来参考。

诸如 Dreamweaver、HTML-Kit 和 Coda 等优秀的编辑器通常具有组织片段的功能，可使它们逻辑分组，易于访问。一些编辑器甚至允许您分配自定义的“键快捷键”，或直接将片段拖放到您的工作文件中。多么简单呀！

解放您的武器库

一旦你发现这有多方便，你可能想要让你的工具箱在你使用的其他程序中也可用，特别是如果你在多个编辑器和创作环境之间切换。我建议你投资一个多剪贴板应用程序，它可以让你保存和组织你的代码片段。当我使用 PC 时，我用了一个叫做 Yankee Clipper 3 的很棒的小应用（免费，网址是 www.intelexual.com/products/YC3/），现在在 Mac 上，我使用 iPaste（价格适中；网址是 www.iggsoftware.com/ipaste/）。除了可以从任何应用程序方便地使用你的工具箱之外，当你在项目上工作时，能够回溯最近复制到剪贴板的大约 10 个项目，真的可以节省时间。

你的随身工具箱

最后，我发现我喜欢随身携带大部分工具。如果你使用手持设备或者有一个笔记应用程序，可以让你对笔记进行分类和搜索（尤其是那种可以从桌面或网络服务同步的应用程序），你可能会发现把你的部分或所有工具箱都放在其中是很有用的，这样你可以随时轻松查找你的工具箱中的语法。我偶尔会在需要我使用他们的计算机而不是我的笔记本电脑的地方做自由职业工作，所以在我的设备上访问我的工具箱非常有用。

多年来，Palm 的原生笔记应用非常适合我；现在我把大部分工具都存放在 Google 文档中，并使用一个名叫 NoteSync 的小桌面应用，它让你可以快速写作和查看 Google 文档的笔记（他们很快就会推出安卓应用，但目前我在安卓设备上使用 Gdocs 来查看我的笔记）。我有很多朋友都对 EverNote 的系统赞不绝口（尽管他们的移动应用目前仅在 iPhone 上离线可用，而在安卓上尚未支持）。

一旦你所有经常使用的和创造性的一次性解决方案都位于一个方便的（希望是分类和关键字可搜索的）地方，你会惊讶于你的开发速度提高了多少，以及这样做会让你的开发更加轻松。

在 WordPress 中使用 jQuery 的技巧和诀窍

让我们先来谈谈我喜欢的一些 jQuery 技巧和诀窍，然后再关注 WordPress。这些项目中的大多数已经在书中详细讨论过了，这是为了提醒你它们很重要（在某种程度上，这是第一个“提示”，不要省略基本要点）。这里还有一些尚未涵盖的小贴士，将帮助你加快 jQuery 开发速度。

尝试使用最新版本的 jQuery

这是使用捆绑的 WordPress 版本的缺点之一：它可能会落后于当前版本的 jQuery，直到下一个 WordPress 版本出来为止。我完全赞成保持在最新版本上，因为 jQuery 版本发布的主要目标不仅是提供新功能，而且不断简化和改进现有功能的性能和速度。如果 CDN 上提供的最新版本的 jQuery 大于捆绑的版本，请务必先deregister jQuery，或者使用我们在第三章学到的if else语句限制您的新版本，以便它仅在所需页面上的站点前端加载。否则，您可能会在使用捆绑的 WordPress 版本的插件中出现问题。

与谷歌 CDN 保持最新

保持最新的最佳方式就是简单地使用谷歌的 CDN。我在第二章和附录 A 中介绍了这一点。这里还有从谷歌 CDN 加载的额外优势。您的站点可以同时从谷歌 CDN 加载主要库以及其他本地 jQuery 脚本和附件，而不必从您的服务器一次加载 JavaScript、库和资源。好处是对于访问过其他加载自谷歌 CDN 的站点的用户，jQuery 将被缓存。务必查看附录 A，获取有关wp_enque_script的完整参考。

保持在无冲突模式下

WordPress 的一个伟大之处在于一个站点可以有很多人以许多不同的方式为其做贡献：撰写内容、工作在主题上，并添加 WordPress 插件。WordPress 的一个最糟糕之处在于，许多人可以轻松地根据他们的管理员状态为站点做出贡献，一些其他的合作者可以向他们添加，或者他们可以安装什么样的插件。

对于 WordPress 来说，保持在无冲突模式下是必须的。这与使用wp_enque_script来在 WordPress 中加载确保 jQuery 不会被“挤出”是一起的，如果有人加载任何其他使用 MooTools 或 Scriptaculous 或甚至只是旧版本 jQuery 的插件。

保持在noConflict模式下很容易。最简单的方法就是我们在整本书中一直在做的！只需在脚本前使用jQuery，而不是快捷符号$。

jQuery('.selector').function();

确保主题或插件中的其他脚本使用 Script API

如果你正在使用第三方的主题或插件，请浏览主题的 header.php 文件或插件的 PHP 页面，并仔细检查所有的脚本是否已经使用 register 和 wp_enqueu_script 方法加载。我曾经遇到过一些相当令人沮丧的情况，导致一些头发被拔掉，因为我们试图弄清楚为什么我的 jQuery 脚本无法工作，或者想知道我是如何在将它们转移到现场时"破坏"它们的。事实证明，现场网站安装了一个我的沙箱网站没有的插件，并且你猜对了，该插件包含了一个旧版本的 jQuery 和一个使用硬编码 script 标签而不是 wp_enqueue_script 方法的自定义脚本文件。一旦这个问题被找到并解决了，将所有东西设置为 noConflict 模式，一切都恢复正常了！

检查你的 jQuery 语法

这个总是让我困扰。你编写了一个漂亮的 jQuery 链，对它进行了一些调整，然后这该死的东西就停止工作了。而且你知道它是对的！嗯，至少，你认为它是对的。对吧？这就是一个好的代码编辑器派上用场的地方。你会希望有一些不错的查找功能，让你逐步查看并查看每一个返回的查找，以及让你不仅可以对整个文档进行查找，还可以对单个选择进行查找。我喜欢选择 "有问题的链" 并对其运行以下查找功能，看看会出现什么情况。

冒号和分号

对于 :（冒号）进行查找，你可能会发现一些意外地设置为;（分号）在你的函数的各种对象参数中，或者你可能在应该是分号的地方输入了冒号。

闭合括号

我还会运行一次对于闭合括号 ) 的查找，并确保每一个出现的括号都是一个持续的链的一部分，或者是用 ; 标记的链的结束。

不匹配的双引号和单引号

最后，快速检查匹配的单引号和双引号有时会显示我哪里搞错了。Panic's Coda 允许你在查找中放入"通配符"，因此搜索 "'* 或 '*"' 通常会发现一个讨厌的问题。

大多数优秀的代码编辑器都有颜色编码语法，这在识别语法错误时非常有帮助，比如根本没有闭合引号或括号。但是，上面的问题往往很棘手，因为它们通常会显示为正确的颜色编码语法，所以在运行脚本之前你不知道有什么问题。

使用 Firefox 和 Firebug 来帮助调试

Firebug 有一个名为“控制台日志”的功能。在我看来，这是 Firebug 的众多优秀功能之一。多年来，我经常借助 JavaScript 的“alert”语句来尝试显示“内部”工作，但 Firebug 控制台处理的远不止于此。这真的很有用，因为有时您必须调试“实时”站点，并设置 JavaScript 警报有点冒险，因为您可能会使站点的访问者感到困惑。使用 Firebug 的控制台日志可以消除这种困惑。

首先，有 console.log和console.info 语句，您可以将它们添加到您的 jQuery 脚本中，以将信息传递给您，并返回有关您的脚本的大量有用（有时是不那么有用，但有趣的）信息。

``console.profile和console.time 对于测量浏览器处理脚本的速度非常有用。

要全面了解 Firebug 控制台的所有功能，请查看：[www.getfirebug.com/logging](http://www.getfirebug.com/logging)。

了解 jQuery 对 DOM 的影响

再爱 Firefox 也不为过，尽管我喜欢 Opera 和 Chrome，但是当我无法选择页面上的文本和对象，并右键单击**查看选定的源**时，我感到无助和盲目。

如果您的 jQuery 脚本在运行时动态创建了新的 DOM 对象或者在操作对象，则右键单击**查看页面源代码**将仅显示服务器提供的内容，而不会显示 jQuery 和 JavaScript 在浏览器中创建的内容。

这是一个很好、快速且简单的方法，可以查看 jQuery 是否添加了该类，或者是否将所选元素包装在您的新 div 中。选择由 jQuery 生成的内容或者应该受到您的 jQuery 脚本影响的内容，并右键单击**查看选定的源**以查看 DOM 中实际内容。

![了解 jQuery 对 DOM 的影响](https://gitee.com/OpenDocCN/freelearn-jquery-zh/raw/master/docs/wp3-jq/img/1742_08_01.jpg)

Web 开发工具包：查看生成的源代码

如果您发现必须进行选择限制，并且希望查看整个“生成的”源代码是什么样子，您可以使用 Web 开发工具包来查看 jQuery 影响的页面。

![Web 开发工具包：查看生成的源代码](https://gitee.com/OpenDocCN/freelearn-jquery-zh/raw/master/docs/wp3-jq/img/1742_08_02.jpg)

查看 Firebug 的视图

查看 DOM 中生成的 HTML 对象的最可靠方式来自于使用 Firebug 的**HTML**视图。通过选择**HTML**标签以及**单击页面中的元素以检查**标签，您可以在 HTML 视图中将鼠标悬停在任何元素上，并立即查看其在嵌套下拉对象中的外观。

起初，我发现这个视图有点繁琐，因为我通常只是试图确认新对象或操作的属性是否存在，但我很快就习惯了它的强大之处，它能帮助我调试 jQuery 脚本，我们将在下一个提示中看到，甚至编写选择器。

![查看 Firebug 的视图](https://gitee.com/OpenDocCN/freelearn-jquery-zh/raw/master/docs/wp3-jq/img/1742_08_03.jpg)

编写优秀选择器的技巧

如果你碰巧只是浏览或跳过了第二章，在 WordPress 中使用 jQuery（或者还没有看过的话），你会想要回去仔细复习一下。你还会发现接下来的附录有顶级“备忘单”选择器过滤器要点，一旦你了解了选择器的基本原理，这会很有帮助。

熟悉了你的选择器意味着你能够用 jQuery 做任何你想做的事情。真的！我还没有遇到过必须推迟回到 WordPress 内容编辑器的问题。但有时当涉及开始我的 jQuery 脚本时，定位我需要的选择器可能会有一点挑战，特别是当与一个陌生的自定义主题一起工作时。

再次，Firebug 拯救。还记得我们之前用 HTML 视图的技巧吗？你可以使用那个视图来选择你想要用 jQuery 影响的内容，并轻松看到如何为其构建一个选择器。

例如，看一下以下截图的高亮区域：

如果我们想选择那个段落<p>标签，很明显我们只需编写我们的 jQuery 选择器：

jQuery('**.entry p**')... 

我们还可以看到，我们可以更具体地定位 id 为#post-125，如果我们只想影响那个特定的帖子中的<p>标签。通过点击显示 ID 和类名层次结构的顶部区域中的特定类或 ID，它将扩展具有该类或 ID 的对象，这样我们就可以完全看到我们的选项。例如，我们也可以定位category-inkscape-illustration中的段落。

不要忘记你的选择过滤器！

记住：有时候告诉 jQuery 你不想选择什么使用:not过滤器，或者告诉它你特别想选择什么，比如:first或:has()过滤器。附录 A,"jQuery 和 WordPress 参考指南" 中有关于在 WordPress 中使用的最佳选择器过滤器概述，当然，第二章，“在 WordPress 中使用 jQuery”，有一个全面的列表和示例集。

就是这样。简单易懂的 jQuery 选择器！你在使用 jQuery 选择方面越有经验，你会发现生成你自己的 HTML 和对象来辅助你的 jQuery 增强会更容易。这很有用，因为我们的下一个技巧是让网站的编辑者简化一切。

让 WordPress 编辑器的工作流“流畅”

几年前，当我第一次开始使用其他知名的 JavaScript 库时，我发现它们对于我自己编写的项目或前端界面项目非常有用，但是在像 WordPress 这样的 CMS 网站上实现它们及其插件通常令人失望。大多数脚本都依赖于向 HTML 中添加特殊的标记或属性。这意味着网站编辑必须知道如何将这些标记添加到他们的文章和页面中，如果他们想要这个功能，而他们大多数人都做不到，导致我面对沮丧的客户，他们不得不推迟回到我或其他网络管理员，只是为了实现内容。

另外，这会增加我的工作量，消耗了我本来可以用来为网站编写其他功能的时间（输入内容到网站的 CMS 中，并不是我喜欢的网站开发的一部分）。jQuery 改变了这一切，使编写增强功能非常容易，这些功能可以轻松地与页面上已有的任何 HTML 一起工作！

尽管如今几乎所有东西都在线上 "云" 上，但大多数人并不擅长 HTML。事实上，随着我们从 Web 2.0 完全进入 Web 3.0，以及更远的未来，越来越少的人会知道任何 HTML，或者根本不需要知道，这是因为有了众多优秀的基于网络的应用程序，如 WordPress 和各种社交网络平台，它们将用户的原始信息组织好，以及样式化和展示给世界。

如果你的增强功能要求用户转到HTML视图，并手动添加特殊的标签或属性，那就不是有效的 jQuery 增强！不要这样做！

用户应该能够添加内容并使用内置的可视化所见即所得编辑器进行格式化。你，伟大的 jQuery 和 WordPress 开发者，将开发一个与现有 HTML 兼容的解决方案，而不是强加要求，你的客户和编辑将为此而惊叹，并永远爱你。

但是我的 jQ 脚本或插件需要具体的元素！

正如我们在本书的几章中所看到的，事实上，你的 jQuery 插件可能需要 DOM 中存在某些元素才能将内容转换为小部件或交互。

记住这件事：如果 HTML 元素可以构建以使增强功能正常工作，你可以使用 jQuery 在 DOM 中动态创建这些 HTML 元素。你不必强迫你的客户在编辑器中创建它们！

查看我们在第六章中的工作，WordPress 和 jQuery 的 UI，使用 UI 插件，我们将简单的基本h3标题和段落动态包装在适当的 jQueryUI 标签小部件中。或者，甚至在之前的第五章中，WordPress 中的 jQuery 动画，我们拿客户的独特帖子文本（与 HTML 没有任何关系！）并且能够用它构建一个可爱的动画图表。

jQuery 的核心在于选择器，这是真实的。有时，要开始工作，您需要首先选择清晰而独特的内容！在进行增强时与网站的编辑者合作。对于大多数内容编辑者来说，仅需为某些帖子应用唯一的类别或标签即可使增强效果生效，或者甚至手动添加关键字到帖子的标题或以特定方式格式化内容（例如 第五章 中的图表示例，*在 WordPress 中安装 jQuery*）。首先与网站的编辑者一起查看所有这些选项，以确保增强确实对所有人都是增强。

`# 为最佳 jQuery 增强提供的 WordPress 小贴士和技巧

只是因为您已经掌握了 jQuery 并不意味着您可以忽略在 WordPress 安装中发生的服务器端情况。让我们来看看处理 WordPress 时需要记住的一些关键事项。

始终使用 wp_enqueue_script 加载 jQuery，并为自定义脚本的插件使用 wp_register_script。

我们在 第三章 中详细讨论过这一点，深入了解 jQuery 和 WordPress，但再次强调，您将希望确保为您所有的 jQuery 加载需求使用 wp_enqueue_script。wp_enqueue_script 和 wp_register_script 是 WordPress 解决多个版本脚本不必要加载或取消其他版本的解决方案。

您可以使用 wp_enqueue_script 轻松加载 jQuery 和 WordPress 捆绑的插件，甚至可以从 Google CDN 加载。如果您有自己的自定义脚本，您可以使用 wp_register_script 将您的自定义脚本注册到 WordPress 中，然后可以使用 wp_enqueue_script 加载它，使其依赖于 jQuery 或其他 jQuery 插件或 JavaScript 库。

附录 A, jQuery 和 WordPress 参考指南，向您展示了如何为所有顶级 jQuery 和 WordPress 实现使用 wp_enqueue_script 的快速简便方法。

始终从基本的、工作正常的“纯 HTML”WordPress 站点开始

我已经说了几百遍了（或者看起来是这样），但游戏的名字是增强。不要编写任何在某种方式下禁用 JavaScript 或不可用时将会中断的内容。大多数 WordPress 主题已经以这种方式工作，显示使用简单的 http 调用链接到其他内容页面或锚点名称的内容和链接。如果您正在从头开始开发一个将通过 jQuery 增强的主题，请尽可能完整地开发它，以便在添加 jQuery 增强之前，它可以与基本的 http 功能一起正常工作。这将确保您的内容无论通过何种浏览器或设备访问都可以看到。

越来越多的高级主题都内置了 jQuery 和其他 JavaScript 增强功能。你需要在浏览器中关闭 JavaScript，看看在没有增强功能的情况下该内容如何处理。如果网站在没有 JavaScript 的情况下完全“崩溃”并且无法正确显示内容，那取决于你打算部署到哪些设备，你可能不想使用该主题！

验证，验证，验证！

如果你的 HTML 不规范或损坏，jQuery 很难进行选择。通常修复方法是修复损坏的 HTML 标记。

验证的最简单方法是转到 validator.w3.org/，如果你的文件在服务器上，你可以直接输入 URL 地址。如果你是在本地工作，从浏览器中，你需要选择 另存为 并保存一个 HTML 文件，该文件是项目的 WordPress 输出，并使用提供的上传字段将该完整的 HTML 文件输出上传到验证器。

另外，Firebug 的主控制台视图会自动验证加载到页面上的标记。Firebug 的好处是，你可以选择错误，然后立即跳转到有问题的代码行。我发现 Firebug 对错误的解释比 W3C 的某些网站更容易理解，但是 Firebug 还会发现所有种类的 W3C 没有发现的“小问题”，据我所知，它并不影响我的 jQuery 开发，所以使用 W3C 验证器通常更简单一些。

检查你的 PHP 语法

就像 jQuery 语法一样，即使经过多年的经验，小而简单的 PHP 语法错误和拼写错误也总是会让我困扰。

如果你遇到 PHP 错误，大多数情况下 PHP 只会显示错误消息并注明有问题的脚本页面和代码行号，而不会渲染整个页面。这样很容易找到并修复 PHP 问题。

仍然可能存在一个 PHP 语法问题，而不会抛出错误。如果你已经检查了其他所有内容，请快速浏览以下关于 PHP 经常出现的常见问题。

PHP 速记法

双重检查，确保你没有使用任何 PHP 的速记法。确保你有开启和闭合的 <?php ?> 括号，并确保在第一个括号后面有 php。有些系统没有开启速记法，你在沙盒托管服务器或本地服务器上运行的内容可能在实际服务器上无法运行。避免使用 PHP 的速记法以防止此类问题。

检查是否有适当的分号

与 jQuery 一样，因为语法相似，你最好使用代码编辑器的查找功能，双重检查语句结束的分号是否写成冒号 : 或逗号 ,，或者根本就没有写。

拼接

当从 JavaScript 和 jQuery 转到 PHP 时，情况就变得棘手了；语法非常相似！然而，在 PHP 中，串联是用 .（点）而不是 +（加号）处理的。在 JavaScript 和 jQuery 上工作一段时间，然后尝试在 WordPress 主题上工作，并继续使用 JavaScript 语法是很容易的。

# 概要

就是这样。我希望这份关于 jQuery 和 WordPress 的技巧和窍门清单对您有所帮助。我们看了一下：

• 与 WordPress 最大程度兼容其他脚本、库和插件的最佳 jQuery 集成方法

• 所有 Firefox 和 Firebug 在开发中为您提供的各种方式

• 确保您保持 WordPress 用户的工作轻松，并且您的 WordPress HTML 有效且易于处理的提示和技巧

接下来是我们的最后一章！如果你甚至想称之为“章节”，附录 A, jQuery 和 WordPress 参考指南，提供了丰富而简单的快速参考，涵盖了您在大多数 jQuery 增强工作中所需的顶级 jQuery 和 WordPress 知识和语法。

附录 A. jQuery 和 WordPress 参考指南

好的！欢迎来到本书的最后一部分！这个附录与其他附录不同，因为它实际上是一个快速参考指南，旨在在您阅读和理解在 WordPress 站点中使用 jQuery 的基本原理、应用和最佳实践之后帮助您。把这一章当作您的“备忘单”。

在适当的情况下，我会指向本书中详细描述该函数或技术的位置，以及指向任何其他有用链接的地方，如果您对更多细节感兴趣的话。

在本附录中，我们将涵盖的主题包括：

• 顶级、基本的 jQuery 选择器和函数

• 使用模板层次结构，以及关键模板标记和 WordPress 函数

• WordPress 短代码

WordPress 的 jQuery 参考

在接下来的几个部分中，我们将看一下您在 WordPress 中进行 jQuery 开发时最需要的顶级参考资料。让我们从保持在 noConflict 模式下并查看最有用的 selector 过滤器开始。

noConflict 模式语法

最简单的方法就是在所有的选择语句中只使用 jQuery 变量：

jQuery('.selector').function();

您还可以设置自己的变量：

<script type="text/javascript">
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq("p").click(function() {
alert("Hello world!");
});
});
</script>

如果设置正确，甚至可以安全地使用 $ 变量：

jQuery(function ($) {
/* jQuery only code using $ can safely go here */
$("p").css('border','#ff6600');
});

用于在 WordPress 中工作的有用选择器过滤器

记住：有时将不想要的内容从选择集中 排除 出来比选择您想要的一切更容易。

选择过滤器语法

这是使用选择器过滤器的基本语法：

jQuery('.selector:filter(params if any)').function();

选择器过滤器

这是您在 WordPress 中工作时最有用的顶级选择器过滤器（:not 是我个人最喜欢的）：

示例	语法	描述
:not(selector)	jQuery(".post img:not(.pIcon)").jqFn();	过滤掉所有匹配给定选择器的元素。
:header	jQuery(".post :header").jqFn();	筛选出所有标题元素，例如 h1、h2、h3 等。
:first	jQuery(".post:first").jqFn();	仅筛选到第一个选择的元素。
:last	jQuery(".post:last").jqFn();	仅筛选到最后选择的元素。
:even	jQuery(".post:even").jqFn();	仅筛选到偶数元素。注意：数组索引从零开始！零被视为偶数，因此您的第一个项目将被选中！
:odd	jQuery(".post:odd").jqFn();	仅筛选到奇数元素。注意：数组索引从零开始！零被视为偶数，因此您的第二个项目将被选中！
:eq(number)	jQuery(".post:eq(0)").jqFn();	通过其索引筛选出单个元素，索引从零开始。
:gt(number)	jQuery(".post:gt(0)").jqFn();	筛选出所有索引 大于 给定值的元素，这也是从零开始的。
:lt(number)	jQuery(".post:lt(2)").jqFn();	筛选出所有索引小于给定值的元素。
:animated	jQuery(".post:animated").jqFn();	筛选为当前正在执行动画的所有元素（我们将在本章后面讨论动画）。

内容过滤器语法

在常规选择器过滤器之后，您会发现这些内容过滤器非常有用（特别是:has()）。

jQuery(".selector:content-filter(params if any)").function();

内容过滤器

几乎所有内容过滤器都与 WordPress 配合使用非常方便。它们帮助您很好地处理页面和文章所见即所得编辑器的输出。

示例	语法	描述
:has(selector)	jQuery(".post:has(.entry)").css("background", "#f60");	筛选为至少有一个匹配元素的元素。
:contains(text)	jQuery(".post:contains('Hello world')").css("background", "#f60");	筛选包含特定文本的元素。注意：区分大小写！
:empty	jQuery(":empty')").css("background", "#f60");	筛选为空的元素。这包括文本节点。
:parent	jQuery(":parent')").css("background", "#f60");	筛选为其他元素的父元素。这包括文本节点。

子过滤器语法

这是使用子元素过滤器语法的基本语法：

jQuery(".selector:child-filter(params if any)").function();

子过滤器

当处理 WordPress 输出的各种列表标记时，您会发现子过滤器非常有用。类别、页面、画廊页面，您将能够使用这些过滤器控制它们并选择特定元素。

示例	语法	描述
:nth-child(number/even/odd)	jQuery(".linkcat li:nth-child(1)").css("background", "#f60");	筛选为其选择器的“nth”子元素。注意，这不是零索引！1 和 odd 选择第一个元素。
:first-child	jQuery(".linkcat li:first-child").css("background", "#f60");	筛选为其父元素的第一个子元素。
:last-child	jQuery(".linkcat li:last-child").css("background", "#f60");	筛选为其父元素的最后一个子元素。
:only-child	jQuery(".pagenav li:only-child").css("background", "#f60");	筛选为其父元素的唯一子元素。如果父元素有多个子元素，则不选择任何元素。

表单过滤器语法

这是表单过滤器的语法：

jQuery(":form-filter").function();

表单过滤器

WordPress 本地具有简单的内容表单和单个输入字段。但是，WordPress Cforms II 插件对大多数项目非常有用，如果您使用该插件，您会发现大多数这些过滤器都很有用：

示例	语法	描述
:input	jQuery("form:input").css("background", "#f60");	筛选为所有输入、文本区域、选择和按钮元素。
:text	jQuery("form:text").css("background", "#f60");	筛选为类型为 text 的所有输入元素。
:password	jQuery("form:password").css("background", "#f60");	筛选为类型为 password 的所有输入元素。
:radio	jQuery("form:radio").css("background", "#f60");	过滤所有类型为单选按钮的输入元素。
:checkbox	jQuery("form:checkbox").css("background", "#f60");	过滤所有类型为复选框的输入元素。
:submit	jQuery("form:submit").css("background", "#f60");	过滤所有类型为提交的输入元素。
:image	jQuery("form:image").css("background", "#f60");	过滤所有图像元素（分类为表单过滤器，但对常规图像也很有用）。
:reset	jQuery("form:reset").css("background", "#f60");	过滤所有类型为重置的输入元素。
:button	jQuery("form:button").css("background", "#f60");	过滤所有类型为按钮的输入元素。
:file	jQuery("form:file").css("background", "#f60");	过滤所有类型为文件的输入元素。

jQuery：用于在 WordPress 中工作的有用函数

虽然我已经对大多数选择器过滤器进行了简要总结，因为它们非常有用，但在下一节中，我将介绍您在 WordPress 项目中最常使用的顶级函数的语法和用法。

不用担心，你可以快速浏览第二章，《在 WordPress 中使用 jQuery》以获取完整列表，以及这里未涉及的函数的使用方法。

处理类和属性

使用 jQuery 可以快速地通过更改它们的 CSS 属性来转换对象中最简单但最强大的事物之一。

示例	语法	描述
.css('property', 'value')	jQuery(".post") .css("background", "#f60");	添加或更改所选元素的 CSS 属性。
.addClass('className')	jQuery(".post") .addClass("sticky");	将列出的类（们）添加到所选元素的每个中。
.removeClass('className')	jQuery(".post") .removeClass("sticky");	从所选元素的每个中删除列出的类（们）。
.toggleClass('className', switch-optional)	jQuery(".post") .toggleClass("sticky");	根据它们当前的状态从所选元素的每个中切换列出的类（们）。如果存在类，则删除它；如果不存在，则添加它。
.hasClass('className')	jQuery(".post") .hasClass("sticky");	如果所选元素的列出的类（们）存在，则返回 true；否则返回 false。
.attr	jQuery(".post").attr();	检索所选元素的第一个元素的属性值。

遍历 DOM

.append和.prepend将成为您在 DOM 函数中最常用的。但是，您会发现.wrapAll对于帮助包含您创建的任何新元素非常宝贵。

示例	语法	描述
.append(html & text)	jQuery(".post") .append("<b>帖子到此结束</b>");	将参数中的内容插入到每个选定元素的末尾。
.appendTo(selector)	jQuery("<b>帖子在这里结束</b>").appendTo(" .post");	做的事情与 append 相同，只是反转了元素选择和内容参数。
.prepend(html & text)	jQuery(".post") .prepend("<b>帖子从这里开始</b>");	将参数中的内容插入到每个所选元素的开头。
.prependTo(selector)	jQuery("<b>帖子从这里开始</b>").prependTo(" .post");	做的事情与 prepend 相同，只是反转了元素选择和内容参数。
.after(string)	jQuery(".post") .after("<b>这个在后面</b>");	将参数中的内容插入到每个所选元素之后，并在外部插入。
.insertAfter(selector)	jQuery("<b>这个在后面</b>").insertAfter(" .post");	做的事情与 after 相同，只是反转了元素选择和内容参数。
.before(html & text)	jQuery(".post") .before("<b>这个在前面</b>");	将参数中的内容插入到每个所选元素之前，并在外部插入。
.insertBefore(selector)	jQuery("<b>这个在前面</b>") .insertBefore("class");	做的事情与 before 相同，只是反转了元素选择和内容参数。
.wrap(html or functionName)	jQuery(".post").wrap("<div class=".fun" />");	在每个所选元素周围包装 HTML 结构。您还可以构造一个将每个元素包装在 HTML 中的函数。
.wrapAll(html)	jQuery(".post") .wrapAll("<div class=" .fun" />");	类似于 wrap，但将 HTML 结构放置在所有元素周围，而不是每个单独的元素。
.wrapInner(selector)	jQuery(".post") .wrapInner("<div class=" .fun" />");	类似于 wrap，但是它将 HTML 结构放置在所选元素的每个文本或子元素周围。
.html(html & text)	jQuery(".post") .html("<h2>替换文本</h2>");	用参数中的内容替换所选项的任何内容和子元素。
.text(text only html chars will be escaped)	jQuery(".post") .text("替换文本");	类似于 HTML，但仅限文本。任何 HTML 字符都将转义为 ASCII 码。

重要的 jQuery 事件

大多数情况下在 WordPress 中，都是关于.click和.hover，但.toggle和.dbclick也很方便。

示例	语法	描述
.click(functionName)	jQuery(".post") .click(function(){//code});	将函数绑定到单击事件类型，单击时执行。
.dbclick(functionName)	jQuery(".post") .dbclick(function(){//code});	将函数绑定到双击事件类型，双击时执行。
.hover(functionName1, functionName2)	jQuery(".post") .hover(function(){//code});	与 mouseenter/mouseleave 事件类型配合使用，并将两个函数绑定到所选元素，分别在 mouseenter 和 mouseleave 时执行。
.toggle(函数名 1, 函数名 2, 函数名 3, ...)	jQuery(".post") .toggle(function(){//code});	与点击事件类型一起工作，并将两个或多个函数绑定到选定的元素上，以便在交替点击时执行。

最佳的动画效果

任何进行动画的元素都会看起来很酷。确保您知道如何处理这些函数以获得一些一流的 jQuery 增强功能。

示例	语法	描述
.slideUp(速度, 函数名)	jQuery(".post") .slideUp('slow', function() { // code });	将选定元素从底部向上滑动，直到它被隐藏。速度可以是 "快速" 或 "慢速" 或毫秒。动画完成时可以调用函数。
.slideDown(速度, 函数名)	jQuery(".post") .slideDown('slow', function() { // code });	从顶部向下滑动隐藏的选定元素，直到它达到定义的大小。速度可以是 "快速" 或 "慢速" 或毫秒。动画完成时可以调用函数。
.slideToggle()	jQuery(".post") .slideToggle('slow', function() { // code });	使用滑动动画切换选定元素的可见性。速度可以是 "快速" 或 "慢速" 或毫秒。动画完成时可以调用函数。
.fadeOut(速度, 函数名)	jQuery(".post") .fadeOut("slow", function(){//code});	将可见的选定元素淡出或透明度设置为 1 到 0。
.fadeIn(速度, 函数名)	jQuery(".post") .fadeIn("slow", function(){//code});	将选定的元素淡入，其可见性为隐藏或透明度设置为 0 到 1。
.fadeTo(速度, 透明度, 函数名)	jQuery(".post") .fadeTo("slow", .3, function(){//code});	将选定的元素淡出到指定的透明度，范围从 0 到 1。
.animate(css 属性, 持续时间, 缓动, 函数名)	jQuery(".post") .animate({width: 200, opacity: .25}, 1000, function(){//code});	在选定的元素上创建自定义的 CSS 属性过渡效果。
.stop()	jQuery(".post") .stop();	停止选定元素上的动画。

充分利用 WordPress

这些是您需要了解 jQuery 的顶级元素，现在让我们看看如何在 WordPress 方面保持运行流畅。首先，您了解如何利用主题层次结构，就可以更轻松地创建视图和页面以与 jQuery 结合使用。

WordPress 模板层次结构

需要稍微调整主题？了解模板层次结构可以帮助您以最少的编程头痛创建所需的视图。下面的列表包含一般模板层次结构的规则。您可以拥有的绝对最简单的主题必须包含一个 index.php 页面。如果不存在其他特定的模板页面，则 index.php 是默认页面。

接下来，您可以通过添加以下页面来开始扩展您的主题：

• archive.php 当查看类别、标签、日期或作者页面时优先于 index.php。

• 当查看主页时，home.php优先于index.php。

• 当查看单独的文章时，single.php优先于index.php。

• 当查看搜索结果时，search.php优先于index.php。

• 当 URI 地址找不到现有内容时，404.php优先于index.php。

• 查看静态页面时，page.php优先于index.php。

  • 当通过页面的管理面板选择时，自定义模板页面，例如：page_about.php，优先于查看特定页面时的page.php，这又优先于index.php。

• 当查看分类页面时，category.php优先于archive.php。这又优先于index.php。

  • 自定义分类-ID页面，例如：category-12.php优先于category.php。这又优先于archive.php，优先于index.php。

• 当查看标签页面时，tag.php优先于archive.php。这又优先于index.php。

  • 自定义标签-tagname页面，例如：tag-reviews.php优先于tag.php。这又优先于archive.php，优先于index.php。

• 查看作者页面时，author.php优先于archive.php。当查看作者页面时，这又优先于index.php。

• 当查看日期页面时，date.php优先于archive.php。这又优先于index.php。

  注

  您可以在这里了解有关 WordPress 主题模板层次结构的更多信息：codex.wordpress.org/Template_Hierarchy。

顶级 WordPress 模板标签

以下是我发现在 jQuery 和主题开发中最有用的顶级 WordPress 模板标签：

模板标签	描述	参数
bloginfo()示例：bloginfo('name');	显示您的博客信息，由您的用户配置文件和管理面板中的一般选项提供。更多信息：codex.wordpress.org/Template_Tags/bloginfo。	您想在标签前后以及它们之间显示的任何文本字符，以及分隔它们的字符 — name，description，url，rdf_url，rss_url，rss2_url，atom_url，comments_rss2_url，pingback_url，admin_email，charset，version。默认：不带参数将不显示任何内容。您必须使用参数。
wp_title()示例：wp_title('——',true,'');	显示页面或单独文章的标题。注意：在循环外的任何地方使用此标签。更多信息：codex.wordpress.org/Template_Tags/wp_title。	您想用来分隔标题的任何文本字符 — " -- "。您可以设置一个布尔值来显示标题 — " --，false "。从版本 2.5+ 开始：您可以决定分隔符是在标题之前还是之后 — " --，true，right "。默认：如果分隔符分配了默认值，则不带参数将在左边显示页面标题与分隔符。
the_title()示例：the_title('<h2>', '</h2>');	显示当前帖子的标题。注意：在循环中使用此标签（见第三章，“深入了解 jQuery 和 WordPress”以了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/the_title。	您希望出现在标题之前和之后的任何文本字符 ——（"<h2>",``"</h2>"）。您还可以设置一个布尔值将显示关闭为 false ——（"<h2>",``"</h2>", "false"）。默认：如果没有参数，将显示没有标记的标题。
the_content()示例：the_content('more_link_text', strip_teaser, 'more_file');	显示您编辑到当前文章中的内容和标记。注意：在循环中使用此标签（见第三章，“深入了解 jQuery 和 WordPress”以了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/the_content。	你可以添加文本以显示“更多链接”，一个布尔值以显示或隐藏“预告文本”，还有一个第三个参数用于更多文件，目前不起作用——（"继续阅读" . the_title（））。你还可以设置一个布尔值将显示关闭为 false ——（"<h2>",``"</h2>", "false"）。默认：如果没有参数，将显示具有通用“阅读更多”链接的内容。
the_category()示例：the_category(', ');	显示帖子分配给的类别或类别的链接。注意：在循环中使用此标签（见第三章，“深入了解 jQuery 和 WordPress”以了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/the_category。	如果有多个类别，则可以包含文本分隔符 ——('&gt;')。默认：如果有多个类别分配，将显示逗号分隔。
the_author_meta()示例：the_author_meta();	显示帖子或页面的作者。注意：在循环中使用此标签（见第三章，“深入了解 jQuery 和 WordPress”以了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/the_author_meta。	此标签接受大量参数。它们在前面的部分中涵盖了，您还可以查看 codex。
wp_list_pages()示例：wp_list_pages('title_li=');	以链接形式显示 WordPress 页面列表。更多信息：codex.wordpress.org/Template_Tags/wp_list_pages。	title_li 是最有用的，因为它将页面名称和链接包裹在列表标签<li>中。其他参数可以通过用&分隔来设置：depth, show_date, date_format,child_of, exclude, echo, authors,sort_column。默认：没有参数将在<li>列表中显示每个标题链接，并在列表周围包含一个<ul>标签（如果您想要向页面导航添加自定义项目，则不建议使用）。
wp_nav_menu()；示例：wp_nav_menu( array('menu' => '主导航' ));	以链接形式显示分配给 WordPress 3.0+ 菜单的菜单项列表。更多信息：codex.wordpress.org/Function_Reference/wp_nav_menu。	此标记接受大量参数，最常见的参数是在管理面板的菜单工具中设置的菜单的名称。如果没有可用的菜单，该函数将默认为wp_list_pages();标记。请参阅 codex 以获取更多参数。
next_post_link()示例：next_post_link('<strong> %title </strong>');	显示到当前文章的时间顺序中存在的下一篇文章的链接。注意：在循环中使用此标记。 （参见第三章，深入挖掘：了解 jQuery 和 WordPress，了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/next_post_link。	想要出现任意标记和文本字符—(<strong>%title</strong>）。%link 将显示永久链接，%title 下一篇文章的标题。默认：没有参数将显示下一篇文章标题的链接，并在后面加上尖括号（>>）。
previous_post_link()示例：previous_post_link('<strong> %title </strong>');	显示到当前文章的时间顺序中存在的上一篇文章的链接。注意：在循环中使用此标记。 （参见第三章，深入挖掘：了解 jQuery 和 WordPress，了解如何设置循环）。更多信息：codex.wordpress.org/Template_Tags/previous_post_link。	想要出现任意标记和文本字符—(<strong>%title</strong>)。%link 将显示永久链接，%title 下一篇文章的标题。默认：没有参数将显示上一篇文章标题的链接，并在前面加上尖括号（<<）。
comments_number()示例：comments_number('暂无回应', '1 条回应', '% 条回应');	显示帖子的评论总数、引用和 Pingback。注意：在循环中使用此标签。（见第三章，深入了解 jQuery 和 WordPress关于如何设置循环。）更多信息：codex.wordpress.org/Template_Tags/comments_number。	允许您指定如果没有评论，只有 1 条评论或有许多评论时如何显示—('暂无回应','1 条回应','% 条回应')。您还可以用额外的标记包装项目—("暂无评论","<span class="bigNum">1</span> 条回应","<span class="bigNum">%</span> 条评论")。默认：不带参数将显示：没有评论，或 1 条评论，或?条评论。
comments_popup_link()示例：comments_popup_link('发表你的想法');	如果未使用comments_popup_script，则显示到评论的普通链接。注意：在循环中使用此标签。（见第三章，深入了解 jQuery 和 WordPress关于如何设置循环。）更多信息：codex.wordpress.org/Template_Tags/comments_popup_link。	允许您指定如果没有评论，只有 1 条评论或有许多评论时如何显示—("还没有评论", "到目前为止 1 条评论", "到目前为止%条评论（这算多吗？）", "评论链接", "此帖子的评论已关闭")。默认：不带参数将显示与comments_number()标签相同的默认信息。
edit_post_link()示例：edit_post_link('编辑', '<p>', '</p>');	如果用户已登录且有权限编辑帖子，则显示链接以编辑当前帖子。注意：在循环中使用此标签。（见第三章，深入了解 jQuery 和 WordPress关于如何设置循环。）更多信息：codex.wordpress.org/Template_Tags/edit_post_link。	任何您想要放在链接名称中的文本，以及您想要放在其之前和之后的标记—("编辑我！", "<strong>", "</strong>")。默认：不带参数将显示一个没有额外标记的链接，上面写着“编辑”。
the_permalink()示例：the_permalink();	显示当前文章的永久链接的 URL。注意：在循环中使用此标记。（参见第三章 深入了解 jQuery 和 WordPress 的使用方式 如何设置循环。）更多信息：codex.wordpress.org/Template_Tags/the_permalink。	这个标记没有参数。
the_ID()示例：the_ID();	显示当前文章的数字 ID。注意：在循环中使用此标记。（参见第三章 深入了解 jQuery 和 WordPress 的使用方式 如何设置循环。）更多信息：codex.wordpress.org/Template_Tags/the_ID。	这个标记没有参数。
wp_get_archives()示例：wp_get_archives('type=monthly');	显示基于日期的存档列表。更多信息：codex.wordpress.org/Template_Tags/wp_get_archives。	你可以通过用一个“&”来分隔它们来设置参数- （'type=monthly&limit=12'）。另外的参数有type, limit, format, before, after, show_post_count。默认：没有参数将以 HTML 格式显示所有的月度存档列表，不包含前后标记，并且show_post_count设置为 false。
get_calendar()示例：get_calendar(false);	显示当前月份/年份的日历。更多信息：codex.wordpress.org/Template_Tags/get_calendar。	可以设置一个布尔值，如果设置为 true，将显示单个字母的缩写（S = 星期日）。否则，它将根据本地化显示缩写（Sun = 星期日）- （真）默认：没有参数将显示单个字母的缩写。

条件标签

条件标签可以用于你的模板文件中，根据页面匹配的条件来更改所显示的内容以及如何显示该内容。例如，你可能希望在你的博客主页面上方显示一小段文本，但只在你的博客的主页面上。使用is_home()条件标签，这个任务就变得很容易。

几乎所有的操作都有条件标签，其中，这七个是我在主题开发中最需要的：

• is_admin()

• is_page()

• is_single()

• is_sticky()

• is_home()

• is_category()

• in_category()

所有这些功能都可以使用以下参数：文章 ID或页面 ID数字，文章或页面标题，或文章或页面slug。

第一个条件标签，is_admin()，你会注意到我们在这个标题中多次使用，以及 is_home() 一起加载我们的 wp_enqueue_scripts，以便我们可以避免在从管理面板查看主题时加载脚本（例如审核主题）。脚本可能会与管理面板中的脚本冲突，因此最好确保它们只在不从管理面板加载主题时加载。

另外，如果您有任何仅影响主页的 jQuery 脚本，比如说，“置顶帖子轮播器”脚本或类似的脚本，您可能希望考虑将wp_enqueue_script调用放在一个 if(is_home()){wp_enqueue_script(//)} 调用内。这样，脚本将仅在您需要它的页面上加载，而不是在站点的每个页面上，即使它没有被使用时也是如此。

至于其余的条件标签，尽管主题很棒，但我相信你一定遇到过这样的困境，你或者你的客户不希望每个页面或帖子上都有完全相同的侧边栏。

我使用这些条件标签，以便特定页面可以打开或关闭特定样式或内容 div，并显示或不显示特定内容。这七个标签确实有助于使我的客户的定制主题网站具有真正的、定制的网站感觉，而不是标准的：“设计不错，但每个页面都有完全相同的侧边栏，这可能是另一个 WordPress 站点”的感觉。

条件标签的乐趣并不止于此。在这里列出了许多您可能发现在辅助主题定制方面非常有用的标签：codex.wordpress.org/Conditional_Tags。

循环函数的快速概述

所有这些模板和条件标签是一回事，将它们应用在循环中是另一回事。在本书的许多章节中，我们不得不在主题的模板文件中修改循环或创建一个自定义循环。以下表格包含了对循环的每个部分的描述。

循环函数	描述
<?php if(have_posts()) : ?>	此函数检查是否有帖子可以显示。如果有，代码将继续到下面的下一个函数。
<?php while(have_posts()) : the_post(); ?>	此函数显示可用的帖子，并继续到下面的下一个函数。
<?php endwhile; ?>	此函数关闭了上面打开的while(have_posts...循环，一旦显示了可用帖子，就会关闭。
<?php endif; ?>	此函数在上面打开的if(have_posts...语句一旦while(have_posts..循环完成时结束。

设置 WordPress 短代码

整个附录都是关于有用的参考资料。我们应该快速浏览一下短代码。它们首次在版本 2.5 中引入。如果你熟悉在 WordPress 中编写函数，短代码可以帮助你将较长的代码片段（如自定义循环和复杂的模板标签字符串）或甚至只是你在主题（或插件）中感觉会经常使用的标记和文本压缩成更干净、更简单的可重复使用的代码片段。你可以将短代码添加到你主题的functions.php文件中。

你可能已经熟悉了短代码，但可能没有意识到。如果你曾经研究过 WordPress 的媒体管理器如何在图像中插入标题，你可能会注意到类似于：

...
[caption id="attachment_12" align="alignleft" width="150"
caption="this is my caption"]<img src.../>[/caption]
...

那是 WordPress 中用于标题和对齐的内置短代码。

要创建一个短代码，你确实需要在你主题的functions.php文件中创建一个 PHP 函数。如果你的主题没有functions.php文件，只需创建一个新文件并命名为functions.php，然后将其放置在你主题目录的根目录下。

创建一个基本的短代码

我们首先打开我们的functions.php文件，在文件末尾创建一个简单的函数，返回文本和标记的字符串，就像这样：

<?php
...
function quickadd() {
//code goes here
$newText = 'This page is brought to you by
<a href="#">the letter Z</a>';
return $newText;
}
?>

现在，要真正利用短代码，你确实需要了解一些 PHP，而要完全覆盖，这有点超出了本标题的范围。但即使没有太多的 PHP 经验，如果你跟随这个示例，你会开始看到这个 WordPress 功能在节省时间方面有多灵活，不仅在你的主题中，还在你日常使用 WordPress 中。

在上一个示例中，在我们的函数括号{}内部，我设置了一个非常基本的变量$donateText，并为其分配了一串文本和标记。

return语句是一个非常基本的 PHP 函数，它将确保我们的quickadd函数返回分配给该变量的任何内容。

现在我们已经准备好使用 WordPress 的add_shortcode()函数了，只需将其添加到我们之前设置的quickadd函数下方即可。add_shortcode函数有两个参数。对于第一个参数，你将输入你的短代码的引用名称，在第二个参数中，你将输入你希望你的短代码调用的函数名称，就像这样：

...
add_shortcode('broughtby', 'quickadd');
?>

现在是有趣的部分：在你的主题中选择任何模板页面，并通过简单添加broughtby短代码来使用它：

...
[broughtby]
...

无论你在主题的模板文件中粘贴[broughtby]短代码在哪里，都会出现本页面由字母 Z 提供的文字，带有指向该字母页面的链接！

奖励: 你不仅限于在你的模板文件中使用这个短代码！直接通过管理面板将其粘贴到文章或页面中，你会得到相同的结果。而且，你猜对了，短代码的输出可以很容易地利用和增强 jQuery！

如果您的增强功能需要比 WordPress 的所见即所得编辑器处理的 HTML 标记更多，而网站内容编辑器在切换到 HTML 视图时不知所措，那么使用短代码创建解决方案可能正是您所需要的！例如，对于您的客户来说，添加一组带有一些参数的方括号要比标记定义列表更容易，而基本的所见即所得编辑器不允许这样做。

这将转变为：

...
<dl>
<dt><a href='#'>Event Name and Location</a></dt>
<dl>Event description</dl>
</dl>
...

转变为更简单的：

...
[event title="Event Name and Location"
description="Event description" url="#"]
...

除了帮助 WordPress 内容编辑人员处理标记外，如果您是一个忙碌的 WordPress 内容作者，短代码也是节省时间的好方法。即使您不是从头开始创建自己的主题，也可以轻松地将自己的短代码添加到任何主题的 functions.php 文件中，从而提高您的生产力。

如果您更熟悉 PHP，可以查看 WordPress 的短代码 API，了解如何通过为其添加参数来扩展和增强您的短代码功能：codex.wordpress.org/Shortcode_API。

总结

希望您在阅读本附录后能够标记它，并相信您将随时在使用或语法方面遇到与 jQuery 和 WordPress 相关的主要问题时再次查阅。我们还快速浏览了 WordPress 核心功能和短代码的“内幕”，希望这能让您了解为 WordPress 网站创建有用增强功能的无限可能性。希望您喜欢本书，并发现它在帮助您通过 jQuery 创作和增强 WordPress 网站方面非常有用。