使用您自己的插件在您的 WordPress 网站上使用 AJAX 和 PHP
已发表: 2021-07-23
在本文中，我们讨论了用于 WordPress 网站的 AJAX 和 PHP。
AJAX 是一种 Web 开发技术，可帮助用户在网站上开发交互式应用程序。 它为用户提供更快、更流畅的网络体验。 它允许用户在不重新加载或刷新页面的情况下更改或更新网页中的内容。 需要了解各种编程语言才能使用 AJAX。
什么是 AJAX？
AJAX 代表“异步 JavaScript 和 XML”。 如前所述，它用于创建具有娱乐性、不断变化和交互性的 Web 应用程序。
在 AJAX 和相关技术的帮助下开发的 Web 应用程序的一些流行示例包括 Google 地图、Google 搜索的自动完成功能、各种社交媒体帖子上的评论和点赞等等。
AJAX 基础知识
Ajax 在各种编程语言（如 JavaScript、HTML、CSS 和 XML）的帮助下开发更快和改进的 Web 应用程序和网站。 除了这些编程语言，对于 Web 应用程序的开发，AJAX 与 PHP 和其他服务器端语言也被使用。
它使用 JavaScript 来显示内容，而 CSS 有助于呈现和文档对象模型。 它进一步将 XHTML 用于内容。
在传统的 Web 应用程序或网页中，信息是与服务器同步交换的。 另一方面，在设计为使用 AJAX 的 Web 应用程序中，当发生诸如单击按钮或填写表单之类的事件时，JavaScript 会创建 XMLHTTP 请求并将其以 XML 格式发送到服务器。
服务器处理请求创建响应服务器端并将其发送回浏览器。 JavaScript 然后处理响应并更新当前显示屏幕上的内容。 由于不需要重新加载或刷新页面，用户不会意识到将任何信息传输到服务器。
在 WordPress 中使用 AJAX 所需的技能
从上面的讨论可以理解，用户需要以下技能才能正确使用 AJAX。
• 熟悉JavaScript、HTML 和CSS 等编程语言
• 精通服务器端语言，如 PHP 等
• XML 或 JSON 的基础知识
AJAX 的优点
下面讨论 AJAX 的各种优点
• 几乎支持当前使用的所有浏览器
• 它涉及更快的响应时间，这意味着在速度和性能方面改善了用户体验
• 可以使用Prototype、jQuery 等开源JavaScript 库
• 它减少了客户端和服务器之间的时间，因此节省了用户和服务器的时间
• 由于服务器不需要处理大量数据，它有助于减少带宽的使用并优化网络运行。
• 由于XMLHTTP 请求用于检索数据，用户可以同时执行多个任务。
WordPress 中的 AJAX
AJAX 用于 WordPress 的后端，因此，无论何时对帖子或类别进行任何更改，或者每当管理员正在审核评论时，都会立即进行更新。 AJAX 主要与 WordPress 上的 JQuery 一起使用。 WordPress使用AJAX的流程如下
• 发出请求时，它会通过位于“wp-admin”文件夹中的“admin-ajax.php”文件。
• 这些请求需要通过使用“get”或“post”方法提供至少一条数据，通常也称为“action”。
• 此操作提示'admin-ajax.php' 文件中的代码创建两个挂钩，即'wp_ajax_my_action' 和'wp_ajax_nopriv_my_action'。 这些钩子中的“my_action”表示“get”或“post”方法的变量“action”的值。
• 第一个钩子用于登录用户执行的操作，而第二个钩子专门用于已注销用户。
• 应为优雅降级规划挂钩函数，以确保即使在浏览器上禁用 JavaScript，代码仍然可以工作。
创建一个 WordPress AJAX 插件
在本节中，让我们以一个名为“Post Likes Counter”的基本 WordPress AJAX 插件为例。 该插件包括以下功能：
• 在前端即时更新
• 已登录的用户可以点赞帖子。
• 如果已注销的用户尝试点赞帖子，屏幕上会出现错误消息
• 这个插件有助于维护“喜欢”数量的总记录并显示它们
首先，需要创建并激活一个空的 WordPress 插件。 要创建插件，需要执行以下步骤。
第 1 步：为插件选择一个唯一的名称。 可以检查插件存储库以确保插件的建议名称已未被使用。 通常，插件开发人员会根据插件应该执行的功能来选择插件的名称。
第 2 步：在下一步中，需要使用选定的插件名称创建 PHP 文件。 作为将安装此插件的用户，需要将 PHP 文件放在 WordPress 插件目录“wp-content/plugins-”中进行安装，插件不能与 PHP 文件共享相同的名称。
因此，插件文件名也应该是唯一的，以避免与存储库中的另一个插件冲突。 可以在前缀中使用他们的姓名或公司名称来为 PHP 文件创建一个唯一的名称。
第 3 步：需要注意的是，WordPress 插件应包含至少一个 PHP 文件以及 JavaScript、CSS、语言和图像文件。 如果存在多个文件，请为目录选择一个唯一名称，为主 PHP 文件选择一个首选名称。
将所有插件文件放入创建的目录中，并请求插件用户将整个目录上传到“wp-content/plugins/”目录。
可以将 WordPress 安装配置为更改标准插件目录“wp-content/plugins/”。 因此，必须在 PHP 代码中使用 plugin_dir_path() 和 plugin_url() 或绝对路径和 URL。
主题的帖子模板
创建插件后，需要找到他们主题的“single.php”帖子模板。 它可以在活动主题的根目录中找到。 查询单个帖子时使用； 想要放置他们的“Post Like Counter”插件的地方。 该文件应保持打开状态以进行编辑。
为 AJAX 调用准备帖子模板
需要创建一个链接，以便用户可以喜欢帖子。 如果用户启用了 JavaScript，他们可以使用 JavaScript 文件（稍后将创建），否则，他们可以直接点击链接。 为此，在“single.php”文件中插入以下代码。 此代码也可以添加到“single.php”文件包含的任何模板部分。
// 'likes' 元键值将存储特定帖子的总喜欢计数，如果它是空字符串，它将显示 0 ID，“喜欢”，真）； $likes = ($likes == "") ？ 0 : $喜欢; ?> 此帖子有 <span id='like_counter'></span> 个赞<br> // 链接到 admin-ajax.php 文件。 包括随机数检查以增加安全性。 请注意启用 JS 的客户端的“user_like”类。 ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' 。 $链接。 '">喜欢这篇文章</a>'; ?>
在没有 JavaScript 的情况下解决 Ajax 调用
通过单击上一步创建的链接，将转发到“admin-ajax.php”脚本； 但是，他们不会找到任何有用的结果，因为该函数不是为了运行该操作而创建的。 要在插件文件中创建函数并将其添加到 WordPress 创建的挂钩中，请插入以下代码。
<?php // 此处仅用于启用语法高亮。 如果它已经包含在您的插件文件中，请忽略它。
// 为创建的两个钩子定义操作，第一个用于登录用户，下一个用于注销用户
add_action（“wp_ajax_my_user_like”，“my_user_like”）；
add_action（“wp_ajax_nopriv_my_user_like”，“please_login”）；
// 定义为登录用户触发的函数
功能 my_user_like() {
// nonce 检查额外的安全层，如果失败，函数将退出
如果（！wp_verify_nonce（$_REQUEST['nonce']，“my_user_like_nonce”））{
退出（“汪汪汪汪”）；
}
// 获取一个帖子的like_count，如果它为空则设置为0，当点击被注册时增加1
$like_count = get_post_meta($_REQUEST["post_id"], "likes", true);
$like_count = ($like_count == ') ？ 0 : $like_count;
$new_like_count = $like_count + 1;
// 更新 'likes' 的值指定帖子的元键，如果不存在则为帖子创建新的元数据
$like = update_post_meta($_REQUEST["post_id"], "likes", $new_like_count);
// 如果上述操作失败，结果类型设置为 'error' 并且 like_count 设置为旧值，如果成功，则更新为 new_like_count
如果（$like === 假）{
$result['type'] = "错误";
$result['like_count'] = $like_count;
}
别的 {
$result['type'] = "成功";
$result['like_count'] = $new_like_count;
}
// 检查是否通过 Ajax 调用触发了操作。 如果是，将触发JS代码，否则将用户重定向到帖子页面
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$result = json_encode($result);
回显$结果；
}
别的 {
header("位置：".$_SERVER["HTTP_REFERER"]);
}
// 不要忘记用 die() 函数结束你的脚本——非常重要
死（）;
}
// 定义为注销用户触发的函数
功能请登录（）{
echo "必须登录才能点赞";
死（）;
}
如果一切正常，当登录用户点击“喜欢这篇文章”链接时，喜欢的数量将自动更新。 另一方面，如果 JavaScript 被禁用，页面将被刷新，显示更新后的“喜欢”计数。
添加对 JavaScript 的支持
添加对 JavaScript 的支持可以使事情变得更容易。 为了在 WordPress 上使用 AJAX 和 PHP，需要将 jQuery 库与插件的自定义 JavaScript 文件一起排队。 为此，请在插件中编写以下代码。
admin_url('admin-ajax.php')));
// 将 jQuery 库和您在上面注册的脚本加入队列
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
接下来，需要创建 Javascript 文件“liker_script.js”，该文件将进一步上传到插件的根文件夹中。 以下代码用于创建“liker_script.js”文件。
jQuery（文档）.ready（函数（）{
jQuery(".user_like").click( 函数(e) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
类型：“帖子”，
数据类型：“json”，
网址：myAjax.ajaxurl，
数据：{action：“my_user_like”，post_id：post_id，nonce：nonce}，
成功：功能（响应）{
if(response.type == "成功") {
jQuery("#like_counter").html(response.like_count);
}
别的 {
alert("你的赞无法添加");
}
}
});
});
});
如何在 WordPress 主题中实现 AJAX
以下步骤将有助于在 WordPress 主题中使用 PHP 实现 AJAX。 例如，假设我们的工作是在下拉菜单中显示类别，然后单击“父类别”，子类别将出现在另一个下拉框中。 此任务将在以下步骤的帮助下完成
第 1 步：选择仪表板左侧的“类别”，在右侧出现的框中插入类别名称，并在下方插入类别段。 如果正在创建父类别，请选择“无”，或者如果正在创建子类别，请从选项中选择父类别。
第 2 步：在此步骤中，将创建一个 WordPress 模板，其中将实现 AJAX 功能。 打开一个新的 PHP 文件并保存。 在创建的页面中插入以下代码。
在上面的代码中，“模板名称：实现 Ajax”是 WordPress 模板的名称，“get_header()”和“get_footer()”函数用于显示页面的页眉和页脚内容。
首先，页面中需要包含 jQuery 库文件，这将有助于添加 AJAX 内容。 使用 PHP 的 AJAX 可以使用任何 JavaScript 库，也可以使用原始 JavaScript 调用 AJAX。 在以下示例中，jQuery JavaScript 库用于实现 AJAX。
第三步：在模板中添加jQuery文件并调用'wp_dropdown_categories'函数，这样就可以检索到下拉菜单中的父类。
#内容{宽度：自动； 高度：400px； 边距：50 像素；}
<div>
</div>
<?php
第 4 步：插入 jQuery 代码以获取正在选择的主要类别的 ID。 将其发送到“functions.php”文件以获取所选父类别 ID 下的子类别。 然后可以将结果发送回页面而无需刷新。
$(函数(){
$('#main_cat').change(function(){
var $mainCat=$('#main_cat').val();
//调用ajax
$("#sub_cat").empty();
$.ajax({
url:"/wp-admin/admin-ajax.php",
类型：'POST'，
数据：'action=my_special_action&main_catid=' + $mainCat,
成功：功能（结果）
{
// 警报（结果）；
$("#sub_cat").removeAttr("disabled");
$("#sub_cat").append(results);
}
});
}
);
});
在上面的代码中，代码是在 ID 为“#main_cat”的主要类别下拉列表的更改事件中添加的。
var $mainCat=$('#main_cat').val();
.val() 函数有助于从下拉列表中获取选定的选项值并存储在变量“$mainCat”中。
$("#sub_cat").empty();
如果子类别下拉列表“#sub_cat”包含任何先前的值，则需要在调用 AJAX 之前将其腾出。
以下 jQuery 行将有助于调用 AJAX jQuery 函数。 检查下一节中给出的 AJAX 函数的参数。
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
类型：'POST'，
为了使 AJAX 在 WordPress 中工作，使用了“URL”参数。 因此，请求将被发送到“admin-ajax.php”文件。 接下来，将调用“functions.php”文件中的钩子以获取发送到 URL 的发布数据：“/wp-admin/admin-ajax.php”
要将值与请求一起发送，请使用“数据”参数。 在此示例中，使用了两个带有 data 参数的参数——action 和 main_catid。
第 5 步：在“functions.php”文件中，以下代码用于挂钩操作。
add_action('wp_ajax_my_special_action', 'my_action_callback');
在上述动作中，钩子有两个参数。 在第一个参数“wp_ajax_my_special_action”中，“wp_ajax_”是与数据参数“action”一起发送的值。 在第二个参数“my_action_callback”中，将处理数据并将结果发送回。
上述动作挂钩适用于登录用户。 对于已注销的用户，可以挂钩以下操作
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
添加用户和回调函数的钩子后的最终代码如下
功能实现_ajax（）{
if(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($categories as $cat) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= ' ('.$cat->category_count.')';
$option .= '';
}
echo 'Scegli...'.$option;
死（）;
} // 万一
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//对于未登录的用户。
第 6 步：在此步骤中，在仪表板中创建一个新页面并将模板分配给它。 在浏览器中加载页面后，将在其中加载第一个包含父类别的下拉菜单。
由于第二个下拉列表为空，请选择第一个下拉列表中的选项以检查其工作原理。
因此，借助新创建的插件，可以在 WordPress 网站上使用带有 PHP 的 AJAX。