好啊欢迎来到本书的最后一部分!本附录与其他附录不同,因为它实际上是一个快速参考指南,在您阅读并理解了 WordPress 站点中使用 jQuery 的基本原则、应用和最佳实践之后,可以帮助您解决问题。把这一章想象成你的“备忘单”。
在适用的情况下,我会让您回到书中详细描述功能或技术的位置,如果您对更详细的内容感兴趣,还可以向您指出任何其他有用的链接。
在本附录中,我们将涵盖的主题包括:
- 最重要的 jQuery 选择器和函数
- 使用模板层次结构、关键模板标记和 WordPress 函数
- WordPress 短代码
在接下来的几节中,我们将了解在 WordPress 中开发 jQuery 所需的顶级参考。让我们从保持noConflict
模式开始,看看最有用的selector
过滤器。
最简单的方法是在所有选择语句中使用 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');
});
记住:有时候在选择集中排除你不想要的东西比选择你想要的东西更容易。
下面是使用选择器过滤器的基本语法:
jQuery('.selector:filter(params if any)').function();
以下是 WordPress 最有用的顶级选择器过滤器(:not
是我个人最喜欢的):
实例
|
语法
|
描述
|
| --- | --- | --- |
| :非(选择器) | jQuery(".post img:not(.pIcon)").jqFn();
| 筛选出与给定选择器匹配的所有元素。 |
| :标题 | jQuery(".post :header").jqFn();
| 向下过滤到作为标头的所有元素,如 h1、h2、h3 等。 |
| :首先 | jQuery(".post:first").jqFn();
| 仅向下过滤到第一个选定元素。 |
| :最后 | jQuery(".post:last").jqFn();
| 仅向下过滤到最后选定的元素。 |
| :偶数 | jQuery(".post:even").jqFn();
| 只过滤到偶数元素。注意:数组是零索引的!零被认为是偶数,因此您的第一个项目将被选中! |
| :奇数 | jQuery(".post:odd").jqFn();
| 只过滤到奇数元素。注意:数组是零索引的!零被认为是偶数,因此您的第二项将被选中! |
| :eq(数字) | jQuery(".post:eq(0)").jqFn();
| 通过索引向下过滤到单个元素,该索引也是零索引的。 |
| :gt(编号) | jQuery(".post:gt(0)").jqFn();
| 向下过滤到索引高于给定索引的所有元素,这也是零索引。 |
| :lt(数字) | jQuery(".post:lt(2)").jqFn();
| 筛选索引低于给定索引的所有元素。 |
| :动画 | jQuery(".post:animated").jqFn();
| 过滤到当前正在设置动画的所有元素(我们将在本章后面讨论动画)。 |
在常规选择器过滤器之后,您会发现这些内容过滤器非常有用(尤其是:has()
。
jQuery(".selector:content-filter(params if any)").function();
几乎所有的内容过滤器都可以在 WordPress 中使用。它们可以帮助您很好地处理页面和所见即所得编辑器输出的内容。
|实例
|
语法
|
描述
|
| --- | --- | --- |
| :has(选择器) | jQuery(".post:has(.entry)").css("background", "#f60");
| 向下筛选到至少包含一个匹配元素的元素。 |
| :包含(文本) | jQuery(".post:contains('Hello world')").css("background", "#f60");
| 向下筛选到包含特定文本的元素。注意:这是区分大小写的! |
| :空的 | jQuery(":empty')").css("background", "#f60");
| 向下筛选到没有子元素的元素。这包括文本节点。 |
| :家长 | jQuery(":parent')").css("background", "#f60");
| 向下筛选为另一个元素的父元素。这包括文本节点。 |
下面是使用子文件管理器语法的基本语法:
jQuery(".selector:child-filter(params if any)").function();
您会发现,当使用 WordPress 提供的各种列表标记时,子过滤器最为方便。类别、页面、图库页面,您可以使用这些过滤器控制它们并选择细节。
|实例
|
语法
|
描述
|
| --- | --- | --- |
| :第 n 个子项(数字/偶数/奇数) | jQuery(".linkcat li:nth-child(1)").css("background", "#f60");
| 向下过滤到它的选择器的第 n 个子元素。注意,这不是零索引!1 和奇数选择第一个元素。 |
| :第一个孩子 | jQuery(".linkcat li:first-child").css("background", "#f60");
| 向下过滤到作为其父级的第一个子级的元素。 |
| :最后一个孩子 | jQuery(".linkcat li:last-child").css("background", "#f60");
| 向下筛选到作为其父级的最后一个子级的元素。 |
| :独生子女 | jQuery(".pagenav li:only-child").css("background", "#f60");
| 向下筛选到仅为其父元素的子元素。如果父对象有多个子对象,则不会选择任何元素。 |
以下是表单筛选器语法:
jQuery(":form-filter").function();
WordPress 本机有一个简单的内容表单和一个输入字段。然而,WordPress Cforms II 插件对于大多数项目来说都是非常宝贵的,如果您使用该插件,您会发现这些过滤器中的大多数都很有用:
|实例
|
语法
|
描述
|
| --- | --- | --- |
| :输入 | jQuery("form:input").css("background", "#f60");
| 过滤到所有输入、文本区域、选择和按钮元素。 |
| :文本 | jQuery("form:text").css("background", "#f60");
| 筛选到所有文本类型的输入元素。 |
| :密码 | jQuery("form:password").css("background", "#f60");
| 筛选为密码类型的所有输入元素。 |
| :收音机 | jQuery("form:radio").css("background", "#f60");
| 所有输入元素的过滤器均为 radio 类型。 |
| :复选框 | jQuery("form:checkbox").css("background", "#f60");
| 筛选到所有类型为复选框的输入元素。 |
| :提交 | jQuery("form:submit").css("background", "#f60");
| 筛选所有提交类型的输入元素。 |
| :图像 | jQuery("form:image").css("background", "#f60");
| 所有图像元素的过滤器(分类为表单过滤器,但对常规图像有用)。 |
| :重置 | jQuery("form:reset").css("background", "#f60");
| 筛选到所有类型重置的输入元素。 |
| :按钮 | jQuery("form:button").css("background", "#f60");
| 筛选为按钮类型的所有输入元素。 |
| :文件 | jQuery("form:file").css("background", "#f60");
| 筛选为文件类型的所有输入元素。 |
虽然我已经回顾了大多数选择器过滤器,因为它们非常有用,但在下一节中,我将介绍在 WordPress 项目中使用最多的顶级函数的语法和用法。
不用担心,您可以浏览第 2 章、以及 WordPress中的 jQuery,以获得完整的列表以及此处未介绍的函数的用法。
使用 jQuery 可以快速完成的最简单但功能最强大的事情之一是通过更改对象的 CSS 属性来转换对象。
|实例
|
语法
|
描述
|
| --- | --- | --- |
| .css('属性','值') | jQuery(".post") .css("background", "#f60");
| 添加或更改选定元素的 CSS 属性。 |
| .addClass('className') | jQuery(".post") .addClass("sticky");
| 将列出的类添加到每个选定元素。 |
| .removeClass('className') | jQuery(".post") .removeClass("sticky");
| 从每个选定元素中删除列出的类。 |
| .toggleClass('className',开关可选) | jQuery(".post") .toggleClass("sticky");
| 根据每个选定元素的当前状态切换列出的类。如果该类存在,则将其删除;如果不是,则添加。 |
| .hasClass('className')) | jQuery(".post") .hasClass("sticky");
| 如果存在来自每个选定元素的列出类,则返回 true 或 false。 |
| 艾特先生 | jQuery(".post").attr();
| 检索选定元素中第一个元素的属性值。 |
.append
和.prepend
将是您最常用的 DOM 函数。然而,您会发现.wrapAll
对于帮助包含您创建的任何新元素非常宝贵。
实例
|
语法
|
描述
|
| --- | --- | --- |
| .append(html 和文本) | jQuery(".post") .append("<b>post ends here</b>");
| 将参数中的内容插入到每个选定元素的末尾。 |
| .appendTo(选择器) | jQuery("<b>post ends here</b>").appendTo(" .post");
| 执行与 append 相同的操作,只是反转元素选择和内容参数。 |
| .prepend(html 和文本) | jQuery(".post") .prepend("<b>post starts here</b>");
| 将参数中的内容插入到每个选定元素的开头。 |
| .prependTo(选择器) | jQuery("<b>post starts here</b>").prependTo(" .post");
| 执行与 prepend 相同的操作,只是反转元素选择和内容参数。 |
| .之后(字符串) | jQuery(".post") .after("<b>This goes after</b>");
| 在参数中、每个选定元素的后面和外部插入内容。 |
| .insertAfter(选择器) | jQuery("<b>This goes after</b>").insertAfter(" .post");
| 执行与之后相同的操作,只是反转元素选择和内容参数。 |
| .before(html 和文本) | jQuery(".post") .before("<b>This goes before</b>");
| 在每个选定元素之前和之外的参数中插入内容。 |
| .insertBefore(选择器) | jQuery("<b>This goes before</b>") .insertBefore("class");
| 执行与前面相同的操作,只是反转元素选择和内容参数。 |
| .wrap(html 或 functionName) | jQuery(".post").wrap("<div class=".fun" />");
| 围绕每个选定元素包装一个 HTML 结构。您还可以构造一个函数,将每个元素包装成 HTML。 |
| .wrapAll(html) | jQuery(".post") .wrapAll("<div class=" .fun" />");
| 与 wrap 类似,但将 HTML 结构放在所有元素的周围,而不是每个单独的元素。 |
| .wrapInner(选择器) | jQuery(".post") .wrapInner("<div class=" .fun" />");
| 与 wrap 类似,但它将 HTML 结构放置在每个选定元素内,并围绕每个选定元素的任何文本或子元素。 |
| .html(html 和文本) | jQuery(".post") .html("<h2>Replacement Text</h2>");
| 用参数中的内容替换选定项的任何内容和子元素。 |
| .text(将转义仅限文本的 html 字符) | jQuery(".post") .text("Replacement Text");
| 类似于 HTML,但仅限于文本。任何 HTML 字符都将作为 ascii 码转义。 |
在 WordPress 中,大部分时间都是关于.click
和.hover
的,但.toggle
和.dbclick
也会派上用场。
实例
|
语法
|
描述
|
| --- | --- | --- |
| 。单击(函数名称) | jQuery(".post") .click(function(){//code});
| 将函数绑定到单击事件类型,单击一次即可执行。 |
| .dbclick(函数名) | jQuery(".post") .dbclick(function(){//code});
| 将函数绑定到双击时执行的 click 事件类型。 |
| .悬停(functionName1、functionName2) | jQuery(".post") .hover(function(){//code});
| 与 mouseenter/mouseleave 事件类型一起使用,只将两个函数绑定到要在 mouseenter 和 mouseleave 上执行的选定元素。 |
| .切换(functionName1、functionName2、functionName3 等) | jQuery(".post") .toggle(function(){//code});
| 使用 click 事件类型,并将两个或多个函数绑定到所选元素,以在交替单击时执行。 |
任何有动画的东西看起来都很酷。确保您知道如何处理这些函数以获得一些一流的 jQuery 增强。
|实例
|
语法
|
描述
|
| --- | --- | --- |
| .slideUp(速度、函数名) | jQuery(".post") .slideUp('slow', function() { // code });
| 将选定图元从下到上滑动,直至其隐藏。速度可以是“快”或“慢”或毫秒。动画完成后可以调用函数。 |
| .向下滑动(速度、功能名称) | jQuery(".post") .slideDown('slow', function() { // code });
| 从上到下滑动隐藏的选定图元,直到定义其大小。速度可以是“快”或“慢”或毫秒。动画完成后可以调用函数。 |
| .slideToggle() | jQuery(".post") .slideToggle('slow', function() { // code });
| 使用幻灯片动画切换选定元素的可见性。速度可以是“快”或“慢”或毫秒。动画完成后可以调用函数。 |
| .衰减(速度、功能名称) | jQuery(".post") .fadeOut("slow", function(){//code});
| 淡入可见或 alpha 为 1 到 0 的选定元素。 |
| .fadeIn(速度、功能名称) | jQuery(".post") .fadeIn("slow", function(){//code});
| 淡入隐藏可见性或 alpha 设置为 0 到 1 的选定图元。 |
| .fadeTo(速度、alpha、函数名) | jQuery(".post") .fadeTo("slow", .3, function(){//code});
| 将选定元素淡入从 0 到 1 的特定 alpha。 |
| .animate(css 属性、持续时间、缓和、函数名) | jQuery(".post") .animate({width: 200, opacity: .25}, 1000, function(){//code});
| 在选定元素上创建 CSS 属性的自定义转换。 |
| .停止 | jQuery(".post") .stop();
| 停止选定元素上的动画。 |
这些是 jQuery 需要知道的最重要的元素,现在让我们看看如何在 WordPress 端保持平稳运行。首先,您越了解如何利用主题的层次结构,就越容易创建视图和页面来利用 jQuery。
需要稍微处理一下主题吗?了解模板层次结构可以真正帮助您创建所需的视图,而编程方面的麻烦最少。以下列表包含常规模板层次结构的规则。你能拥有的最简单的主题必须包含一个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
。
- 自定义类别 ID页面,如:
-
tag.php
王牌archive.php
。这反过来会在查看标签页时胜过index.php
。- 自定义的标记名页面,例如:
tag-reviews.php
胜过tag.php
。这个胜过archive.php
,哪个胜过index.php
。
- 自定义的标记名页面,例如:
-
author.php
王牌archive.php
。当查看作者页面时,这反过来胜过index.php
。 -
date.php
trumpsarchive.php
, This trumpsindex.php
when a date page is viewed.您可以在此处了解有关 WordPress 主题模板层次结构的更多信息:http://codex.wordpress.org/Template_Hierarchy 。
以下是我发现最有助于 jQuery 和主题开发的 WordPress 模板标签:
|模板标签
|
描述
|
参数
|
| --- | --- | --- |
| bloginfo()
样本:bloginfo('name');
| 在“管理”面板中显示用户配置文件和常规选项提供的博客信息。更多信息:http://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,'');
| 显示页面或单个帖子的标题。**注意:**在回路外的任何地方使用此标签。更多信息:http://codex.wordpress.org/Template_Tags/wp_title 。 | 要用于分隔标题的任何文本字符-(“--
”)。您可以设置一个布尔值来显示标题-("--", "false")
。从版本 2.5+:您可以决定分隔符是在标题之前还是之后-("--", true, "right")
。默认值:如果将分隔符的默认值指定给左侧,则任何参数都不会显示带有分隔符的页面标题。 |
| the_title()
样本:the_title('<h2>', '</h2>');
| 显示当前文章的标题。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/the_title 。 | 要在标题之前和之后显示的任何文本字符-("<h2>",``"</h2>")
。您还可以设置一个布尔值,将显示设置为 false-("<h2>",``"</h2>", "false")
。默认值:没有参数将显示没有标记的标题。 |
| the_content()
样本:the_content('more_link_text', strip_teaser, 'more_file');
| 显示已编辑到当前文章中的内容和标记。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/the_content 。 | 由于您可以添加文本以显示“更多链接”,这是一个用于显示或隐藏“摘要文本”的布尔值,因此对于当前不起作用的“更多链接”文件,还有第三个参数-("Continue reading" . the_title())
。您还可以设置一个布尔值,将显示设置为 false-("<h2>",``"</h2>", "false")
。默认设置:没有参数会显示带有一般“阅读更多”链接的文章内容。 |
| the_category()
样本:the_category(', ');
| 显示一个或多个类别的链接,该类别是为文章指定的。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress)更多信息:http://codex.wordpress.org/Template_Tags/the_category 。 | 如果有多个类别-('>')
,则可以包含文本分隔符。默认值:如果分配了多个类别,则任何参数都不会显示逗号分隔符。 |
| the_author_meta()
样本:the_author_meta();
| 显示文章或页面的作者。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/the_author_meta 。 | 此标记接受大量参数。它们在前面的章节中有介绍,您也可以查看法典。 |
| wp_list_pages()
样本:wp_list_pages('title_li=');
| 将 WordPress 页面列表显示为链接。更多信息:http://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' => 'Main Nav' ));
| 将指定给 WordPress 3.0+菜单的菜单项列表显示为链接。更多信息:http://codex.wordpress.org/Function_Reference/wp_nav_menu 。 | 此标记接受大量参数,最常见的参数是在管理面板的菜单工具中设置的菜单名称。如果没有菜单可用,则该功能默认为wp_list_pages()
;标签有关更多参数,请参见法典。 |
| next_post_link()
样本:next_post_link('<strong> %title </strong>');
| 显示指向下一篇文章的链接,该文章按时间顺序存在于当前文章中。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/next_post_link 。 | 要显示的任何标记和文本字符-(<strong>%title</strong>
。%link
将显示永久链接,%title
下一篇文章的标题。默认设置:没有参数将下一篇文章标题显示为后跟角引号的链接(>>
。 |
| previous_post_link()
样本:previous_post_link('<strong> %title </strong>');
| 显示指向上一篇文章的链接,该文章按时间顺序存在于当前文章中。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/previous_post_link 。 | 要显示的任何标记和文本字符-(<strong>%title</strong>)
。%link
将显示永久链接,%title
下一篇文章的标题。默认设置:没有参数会将上一篇文章的标题显示为带角引号的链接(<<
。 |
| comments_number()
样本:comments_number('no responses', 'one response', '% responses');
| 显示帖子的注释、trackback 和 pingback 的总数。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/comments_number 。 | 用于指定如果有 0 条注释、只有 1 条注释或多条注释时如何显示-('no responses','one response','% responses')
。您还可以将项目包装在附加标记中-("No Comments","<span class="bigNum">1</span> response","<span class="bigNum">%</span> Comments")
。默认值:不显示任何参数:没有评论,或者 1 条评论,或者?评论。 |
| comments_popup_link()
样本:comments_popup_link('Add Your Thoughts');
| 如果未使用 comments\u popup\u 脚本,则会显示到 comments 的正常链接。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/comments_popup_link 。 | 用于指定如果有 0 条注释、只有 1 条注释或多条注释时如何显示-("No comments yet", "1 comment so far", "% comments so far (is that a lot?)", "comments-link", "Comments are off for this post")
。默认:没有参数会显示与comments_number()
标签相同的默认信息。 |
| edit_post_link()
样本:edit_post_link('edit', '<p>', '</p>');
| 如果用户已登录并具有编辑帖子的权限,则会显示编辑当前帖子的链接。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/edit_post_link 。 | 您希望以链接名称显示的任何文本,以及您希望在其前后显示的标记-("edit me!", "<strong>", "</strong>")
。默认设置:没有参数会显示一个显示“编辑”的链接,而不显示其他标记。 |
| the_permalink()
样本:the_permalink();
| 显示当前文章的永久链接的 URL。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/the_permalink 。 | 此标记没有参数。 |
| the_ID()
样本:the_ID();
| 显示当前帖子的数字 ID。**注意:**在循环中使用此标签。(参见第 3 章,深入挖掘:如何设置循环,请参见一起理解 jQuery 和 WordPress。)更多信息:http://codex.wordpress.org/Template_Tags/the_ID 。 | 此标记没有参数。 |
| wp_get_archives()
样本:wp_get_archives('type=monthly');
| 显示基于日期的存档列表。更多信息:http://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);
| 显示当前的月/年日历。更多信息:http://codex.wordpress.org/Template_Tags/get_calendar 。 | 可以设置一个布尔值,如果设置为 true,该值将显示单个字母的首字母(S = Sunday)
。否则会根据您的本地化(Sun = Sunday)—(true)
显示缩写默认值:没有参数将显示单字母缩写。 |
根据页面匹配的条件,可以在模板文件中使用条件标记来更改显示的内容以及该内容在特定页面上的显示方式。例如,您可能希望在一系列文章的上方显示一段文本,但仅显示在博客的主页上。有了is_home()
条件标记,这项任务就变得简单了。
几乎所有东西都有条件标签,在所有这些标签中,我发现我在主题开发中最需要的是七个:
is_admin()
is_page()
is_single()
is_sticky()
is_home()
is_category()
in_category()
所有这些函数都可以采用以下参数:post ID
或page ID
编号、帖子或页面title
或帖子或页面 slug。
第一个条件标记is_admin()
,你会注意到我们在整个标题中都使用了is_home()
来加载我们的wp_enqueue_scripts
,这样,如果我们从管理面板查看主题的某些方面(例如查看主题),就可以避免加载脚本。脚本可能与管理面板中的脚本冲突,因此最好确保它们仅在不从管理面板加载主题时加载。
此外,如果您有任何仅影响主页的 jQuery 脚本,例如“粘帖后旋转器”脚本或类似的内容,那么您可能需要考虑将该 Tyr0 To 调用在一个 OutT1 调用中。这样,脚本只会加载到您需要的页面上,而不会加载到站点的每个页面上,即使在未使用脚本时也是如此。
至于其余的条件标签,尽管主题很好,但我确信您遇到了一个难题,即您或您的客户不希望在每个页面或帖子上都有完全相同的侧边栏。
我使用这些条件标记,以便特定页面可以打开或关闭特定样式或内容分区,并显示或不显示特定内容。这七个标签确实有助于给我客户的定制主题网站一种真实的、定制的网站感觉,而不是那种标准:“设计不错,但每个页面都有完全相同的侧边栏,这可能是另一个 WordPress 网站”的感觉。
有条件的标签乐趣还不止于此。在帮助主题定制方面,您可能会发现还有很多非常宝贵的内容,如下所示:http://codex.wordpress.org/Conditional_Tags 。
所有这些模板和条件标记是一回事,在循环中应用它们是另一回事。在本书的很多章节中,我们不得不修改主题模板文件中的循环,或者创建一个自定义循环。下表包含循环每个部分的说明。
|循环函数
|
描述
|
| --- | --- |
| <?php if(have_posts()) : ?>
| 此函数检查以确保有要显示的帖子。如果是这样,代码将继续执行下面的下一个函数。 |
| <?php while(have_posts()) : the_post(); ?>
| 此功能显示可用的帖子,并继续下面的下一个功能。 |
| <?php endwhile; ?>
| 一旦显示可用的帖子,此功能将关闭上面打开的while(have_posts...
循环。 |
| <?php endif; ?>
| 此函数用于在while(have_posts..
关闭后结束上面打开的if(have_posts...
语句。循环已完成。 |
整个附录都是关于有用的参考资料。我们应该快速查看短代码。它们最初是在 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,有点超出了本文的范围。但是,即使没有太多的 PHP 经验,如果您遵循这个示例,您将开始看到 WordPress 功能在节省时间方面是多么灵活,不仅在主题方面,而且在日常使用 WordPress 方面。
在上一个示例中,在我们的函数括号{}
中,我设置了一个非常基本的变量**$donateText
**,并为其分配了一个文本字符串和标记。
return
语句是一个非常基本的 PHP 函数,它将确保我们的quickadd
函数传回分配给该变量的任何内容。
我们现在已经准备好使用 WordPress 的“add_shortcode()
函数,将它添加到我们之前设置的函数下面的*。add_shortcode
功能有两个参数。对于第一个参数,您将输入短代码的引用名称,在第二个参数中,您将输入希望短代码调用的函数的名称,如下所示:*
...
add_shortcode('broughtby', 'quickadd');
?>
现在有趣的部分是:选择主题中的任何模板页面,通过简单地添加以下内容来使用broughtby
短代码:
...
[broughtby]
...
无论您在主题模板文件中粘贴[broughtby]
短代码的何处,都会出现字母 Z 文本为您带来的页面,以及指向字母页面的链接!
**奖励:**您不仅可以在模板文件中使用此短代码!通过管理面板将其直接粘贴到帖子或页面中,您将得到相同的结果。而且,您猜到了,jQuery 很容易利用和增强短代码的输出!
如果您有一个增强,可能需要比 WordPress 中的 WYSIWYG 编辑器处理更多的 HTML 标记,并且站点的内容编辑器因切换到 HTML 视图而不知所措,那么创建一个带有短代码的解决方案可能正是您所需要的!例如,对于您的客户来说,添加一组带有一些参数的方括号要比标记一个定义列表容易得多,而基本的 WYSIWYG 编辑器不允许这样做。
这将转变为:
...
<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,看看如何通过向短代码添加参数来扩展短代码并使其更强大:http://codex.wordpress.org/Shortcode_API 。
希望在浏览完本附录之后,您已经仔细阅读了它,并且相信您会在任何时候回来,只要您对 jQuery 的用法或语法有任何快速的疑问,大多数 WordPress 开发人员都会对 jQuery 和 WordPress 提出最重要的问题。我们还快速浏览了 WordPress 核心功能和短代码的“底层”,希望能让您了解为 WordPress 网站创建有用增强功能的无限可能性。我希望您喜欢这本书,并发现它在帮助您的 WordPress 站点创建 jQuery 和增强方面很有用。