Ajax或 异步JavaScript和XML，用于与服务器端脚本进行通信，并允许您加载动态内容而不必重新加载页面。

例如，假设您正在构建一个 网站Web 对于当地的慈善机构，您想鼓励积极的氛围。 您可以添加一个标有“示爱！ »主页上带有计数器，并且借助AJAX，每次激活按钮时（点击了 游客），则计数器会增加而不会重新加载页面。

这是我们将在本教程中构建的示例。

在本教程中，您将了解有关什么是AJAX，如何使用它以及如何在WordPress上使用它创建出色功能的更多信息。

让我们开始。

AJAX的基础

• AJAX提要通常遵循以下步骤：
• 由于使用者的动作而发起AJAX呼叫
• 接收和处理服务器上的请求
• 捕获响应并通过JavaScript执行所有必要的操作
• 设置新的主题环境

让我们在WordPress上付诸实践。 我们的第一个示例显示一个简单的弹出窗口，其中包含单击标题时文章评论的数量。 我们将基于“ 二十六 来自WordPress。

这里有您需要做的：

在WordPress安装目录的“主题”目录中的“ WP-内容 “并命名为” ajax-test”，创建两个文件 由WordPress的要求，即“ 的functions.php “，” Styles.css“，然后添加一个名为” script.js“的新文件。 将以下代码添加到CSS样式表的标题中（style.css文件).

/ *主题名称：阿贾克斯测试Theme主题URI：http://premium.wpmudev.com说明：丹尼尔·帕塔基作者URI：http://danielpataki.com模板：twentysixteen版本：1.0.0许可证一种用于测试我们的知识AJAX作者主题GNU通用公共许可证或更高版本v2许可URI：http://www.gnu.org/licenses/gpl-2.0.html * /

父主题的样式表必须由子主题加载。 过去，这是通过将CSS文件导入子主题来完成的，但是推荐的方法是使用“入队”。 记住，我们向您展示了如何使用此功能。

让我们直接添加父的样式表和我们的JavaScript文件：

ADD_ACTION（'wp_enqueue_scripts'，'ajax_test_scripts'）; ajax_test_scripts功能（）{wp_enqueue_style（母式“，get_template_directory_uri（）'/style.css'）; wp_enqueue_script（'Ajax的测试脚本'get_stylesheet_directory_uri（）'/scripts.js“，阵列（'jQuery的'），1.0.0'，真）; }

如果您觉得自己有进一步的精力，找到一张不错的图片，将其裁剪为880px x 660px，然后将其放置在孩子的主题文件夹中，然后将其重命名为“ screenshot.png ”。 当您要激活主题时，它将出现在外观部分中。

由于孩子的这个主题是基于“ 二十六 而且我们还没有进行任何更改（尚未！），该网站应该看起来像是一个经典主题，主题为“ 二十六 “。

添加一个按钮

首先，我们将添加“ 秀爱unpeu！ ”。 一个很好的地方将显示在主题文章的侧边栏上。

经过研究后，发现侧边栏是由名为“ twentysixteen_entry_meta（） »驻留在目录« INC /模板tags.php “。

此功能是“ 连接 这意味着我们可以通过在我们自己的functions.php文件中定义它来对其进行修改。 第一步是将整个函数复制并粘贴到我们自己的functions.php文件中：

函数二十二十_entry_meta（）{if（'post'=== get_post_type（））{$ author_avatar_size = apply_filters（'twentysixteen_author_avatar_size'，49）; printf（' ％1 $ s ％2 $ s ％3 $ s '，get_avatar（get_the_author_meta（'user_email'），$ author_avatar_size），_x（'Author'，'在帖子作者名前使用。'，'twentysixteen'）， esc_url（get_author_posts_url（get_the_author_meta（'ID'））），get_the_author（））; } if（in_array（get_post_type（），array（'post'，'attachment'）））{twentysixteen_entry_date（）; } $ format = get_post_format（）; if（current_theme_supports（'post-formats，$ format））{printf（' ％4 $ s ％1 $ s '，sprintf（' ％s '， _ x（'Format'，'在发布格式前使用。'，'二十六'）），esc_url（get_post_format_link（$格式）），get_post_format_string（$格式））; } if（'post'=== get_post_type（））{twentysixteen_entry_taxonomies（）; } if（！is_singular（）&&！post_password_required（）&&（comments_open（）|| get_comments_number（）））{echo' '; comments_popup_link（sprintf（__（'对％s '，'twentysixteen'发表评论），get_the_title（）））; 回声' '; }}

让我们将密钥添加到所有元数据的底部：

$ love = get_post_meta（get_the_ID（），'show_some_love'，true）; $爱情=（空（$爱情））？ 0：美元的爱； 回声'。 爱。 ' ';

解释这一切的代码：

第一行检索文章已收到的爱的数量。 在某些情况下，该数据将不存在，换句话说，当尚未单击按钮时。 因此，我们使用

代码中的第二行，如果值为空，则将值设置为0。

第三行提供按钮，该按钮由包含图像和爱的数量的跨度组成。 我将图像源留空，因为我想在其中使用 SVG。 您可以使用 base64 编码的 SVG 来创建图像线。 这使您免于提出要求，并使您的 现场网络 更高效。

我用了这个免费的小图片 此链接。 将收到的代码复制并粘贴到图像源中，如下所示：

$love = get_post_meta( get_the_ID(), 'show_some_love', true );
$love = ( empty( $love ) ) ? 0 : $love;
echo '<span class="love-button"> <img width="28" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI0MHB4IiBpZD0iTGF5ZXJfMSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAgNDA7IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0MCA0MCIgd2lkdGg9IjQwcHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xOS45NzkwMDAxLDkuMTk1MzAwMSAgQzI1LjYzOTIwMDItMS44ODY3LDM4LjUxMTY5OTcsMy4zOTU5OTk5LDM3Ljk0OTE5OTcsMTMuMzAyN0MzNy4zNjM4LDIzLjYxNjE5OTUsMjIuODc0NTAwMywyNy4xNzM3OTk1LDE5Ljk3OTAwMDEsMzQuOTgxODk5MyAgQzE3LjA4MzAwMDIsMjYuOTc5MDAwMSwyLjc4OTU5OTksMjMuODExNTAwNSwyLjAwODMwMDEsMTMuMzAyN0MxLjI3MzksMy40MDc3MDAxLDE0LjkzNTk5OTktMS45MzEyLDE5Ljk3OTAwMDEsOS4xOTUzMDAxeiIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I0ZGNTk0RjsiLz48L3N2Zz4="><span class="number">' . $love . '</span></span>';

我还对按钮的样式使用了一些CSS，以使其具有悬停效果。 它是否是按钮还不是很明显，但这将用于我们的简单测试。

。爱情按钮IMG {余量右：6px; 不透明度：0.7; 光标：指针; }。爱情按钮IMG：悬停{不透明度：1; }

触发动作

最后，我们来看我们的JavaScript！ 我们必须定位我们的商品并检测到它的点击。 方法如下：

（function（$）{$（document）.on（'click'，'.love-button img'，function（）{alert（“ love is shared”）;}）}）（jQuery）;（

如果此时单击按钮，您应该会看到一个JavaScript警报，显示文本“ Love is shared”。 ”

资料需求

代替此文本，我们需要触发AJAX调用。 在编写代码之前，我们将了解我们需要发送的内容。

AJAX URL

首先，我们需要一个发送数据的地方。 我们发送数据的位置将处理数据并接听电话。 WordPress有一个内置的地方可以处理AJAX调用，我们可以使用它： 管理ajax.php “里面” wp-admin ”。 我们无法将此网址添加到脚本中（使用“原始”编码是不可接受的），因此，让我们用一些狡猾的WordPress。

功能 wp_localize_script（） 原本打算在JavaScript文件中转换字符串，但效果很好。 我们还可以使用它将变量传递给我们的JavaScript文件，在这种情况下，我们的AJAX文件为URL。 将以下代码添加到我们的文件“ 功能 如下：

wp_localize_script（'ajax-test-scripts'，'ajaxTest'，数组（'ajax_url'=> admin_url（'admin-ajax.php'）））;

最后一个对象的结果将命名为ajaxTest，它将在最后一个参数中包含给定数组作为属性。 要输入值，我们可以使用 ajaxTest.ajax_url 在我们的JavaScript代码。

文章的标识符

我们将发送任意数据作为商品的标识符（我们将用来确定我们要在其上“添加一点爱”的文章）。 可以从DOM中检索到。 看一下下面的“二十六”主题中使用的结构：

我们的按钮有一个“条款”作为其祖先之一。 该元素具有类，并且包含商品的数字标识符。 尽管这不是最优雅的解决方案，但我们可以从那里获取ID。

$（文件）。在（ '点击'， 'IMG。爱情键'，函数（）{VAR = parseInt函数POST_ID（$（本）。家长（ 'article.post:first'）。的Attr（ '身份证'） .replace（ '后'， ''））;执行console.log（ID）}）

那个行动

WordPress还要求我们发送一个名为action的参数。 由于所有操作都将发送到admin-ajax，因此我们需要一种区分那些请求的方法，因此需要使用此参数。

发送一个AJAX请求

现在，我们可以将所有内容放在一起。 我们需要为“ 可湿性粉剂管理员/管理员-ajax.php 其中包含商品ID和操作。 这就是它的外观。

（函数（$）{$（文件）。在（ '点击'， 'IMG。爱情键'，函数（）{VAR = parseInt函数POST_ID（$（本）。家长（ 'article.post:first'）。 。ATTR（ 'ID'）取代（ '后'， ''））; $阿贾克斯（网址：{url：ajaxTest.ajax_url类型 '后'，数据：{行动： 'add_love' POST_ID：POST_ID} ，成功：功能（响应）{警报（ '成功，新的计数是' +响应）}}）}）}）（jQuery的）;

$ .ajax（）是使用了很多参数的函数。 网址包含目标，目前是我们的档案 Ajax的url.php ”。 类型设置为“ 发表 » 喜欢一个人发送的所有请求 形式. 数据参数是一个包含“ 键值 我们要发送到服务器。 稍后，我们将能够使用$ _POST ['action']和$ _POST ['post_id']来读取它们。

申请受理

通常，您需要编辑文件“ 管理ajax.php »，因为请求已发送到那里。 这是一个系统文件，因此我们不会对其进行修改。 WordPress允许您使用带有action参数的方括号传递AJAX请求。 该模型如下：

如果您将动作命名 add_love 您必须将函数附加到名为“ wp_ajax_add_love 和/或 wp_ajax_nopriv_add_love ”。 动作 NoPriv ”针对已注销的用户运行，仅针对已登录的用户运行。 就我们而言，我们想同时使用两者。 作为快速测试，我们将设置默认的返回值：

成功参数是一个函数，它将在AJAX调用完成时运行。 我们将显示一个简单的警报，显示“做得好！ 新帐户是“最后加上我们的答案”。

ADD_ACTION（ 'wp_ajax_add_love'， 'ajax_test_add_love'）; ADD_ACTION（ 'wp_ajax_nopriv_add_love'， 'ajax_test_add_love'）; ajax_test_add_love函数（）{回声4; 模具（）; }

我们将功能附加到两个括号中，一个完成了 回音 4，然后使用功能“ 模具（） ”。 在WordPress上这是必需的，否则在每个答案的末尾您将收到一个0。 如果现在单击按钮，您应该看到以下内容：

要获得实际的“喜欢”号码，我们需要做的就是检索当前号码，将其递增XNUMX，将其保存到数据库中，然后显示新号码。

ajax_test_add_love函数（）{$ =爱get_post_meta（$ _POST [ 'POST_ID'] 'show_some_love'，TRUE）; 爱= $（空（$爱））？ 0：$爱; $爱++; update_post_meta（$ _ POST [ 'POST_ID']， 'show_some_love' 爱$）; 回声$爱情; 模具（）; }

如果现在单击按钮，您应该会看到显示“1”。 如果刷新页面，则应该看到显示的新数字。 再次单击该按钮即可 2 ”。 我们现在要做的就是确保该数字直接反映在用户界面中。

使用响应在用户界面上进行更改

这部分似乎很容易（因为它是），但通常最难组合在一起。 现在，我们要做的就是找到包含当前数字的元素，并通过响应修改其内容。

（函数（$）{$（文件）。在（'点击'，'IMG。爱情按钮'，函数（）{VAR = parseInt函数POST_ID（$（本）。家长（'article.post:first'）。 。ATTR（“ID”）取代（'后'，''））;变量$数= $（本）.parent（）找到（'编号'）$阿贾克斯（网址：{url：。ajaxTest.ajax_url，类型：'后'，数据：{行动：“add_love'POST_ID：POST_ID，}，成功：函数（响应）{$ number.text（响应）;}}）}）}）（jQuery的）;

我只在我们之前的JS代码中添加了两行。 在第5行，我将包含数字的元素存储在变量中 $号。 在14行上，我修改了此元素的文本以显示答案，这是新数字。

就是这样，基本上，您应该能够在自定义主题上看到此新功能。 如果您有任何问题，请告诉我们。 您还有其他要分享的提示吗？ 在评论部分进行。