使用 AJAX 使您的 WordPress 插件具有响应性

已发表: 2020-06-02

最后更新 - 2021 年 7 月 8 日

AJAX 是最新的开发方法，并且由于它为开发人员提供的易用性而逐渐获得动力。通过简单地将 AJAX 集成到您的 WordPress 插件中，您基本上减少了不断重新加载整个网页的需要。换句话说，AJAX 将使您的 WordPress 插件具有响应性，并使用户能够通过仅重新加载特定部分来获取新信息，同时保持页面的其余部分保持静态。

这不仅使网页或插件具有响应性，而且还将等待时间减少了一半。有几个插件和应用程序使用 Ajax 为用户创造更好的体验。例如，WooCommerce 使用 Ajax 功能来改进添加到购物车的行为。

考虑到它的好处，我们将教您如何通过 AJAX 使您的 WordPress 插件响应。

创建插件

在你可以使用 AJAX 发挥你的魔力之前，你需要有一个基本的插件基础，你可以使用它来创建一个高级和响应式的产品。

创建插件并不困难，因为您只需要创建一个包含单行内容的文件。为此，第一步是导航到 wp-content/plugins 文件并使用您选择的名称创建一个全新的文件夹。打开文件夹并创建一个新文件名_of_the_plugin.php。现在，在任何文本编辑器中查看该文件并写入以下信息：

<?php

插件名称：Coolness Inducer

插件 URI：http://coolness-inducer.com

说明：>-

一个完美的插件，让您的网站更加酷炫。

版本：1.3

作者：维德女士

作者 URI：http://msvader.com

许可证：GPL2

在此之前，请在您的 WordPress 插件安装中创建一个 ajaxloadpost 目录。完成此操作后，创建插件并激活它。在此之后，在您的 ajaxloadpost 中包含以下信息。

定义（'AJAXLOADPOSTURL', WP_PLUGIN_URL.”/”.dirname( plugin_basename( __FILE__ ) ) );

函数 ajaxloadpost_enqueuescripts() {

wp_enqueue_script('ajaxloadpost', AJAXLOADPOSTURL.'/js/ajaxloadpost.js', array('jquery'));

wp_localize_script('ajaxloadpost', 'ajaxloadpostajax', array('ajaxurl' => admin_url('admin-ajax.php')));

}

add_action('wp_enqueue_scripts', ajaxloadpost_enqueuescripts);

然后，定义 AJAXLOADPOSTURL 变量，因为您需要它来将 WordPress 定向到插件的 URL。现在您必须将脚本加入队列，您可以通过将 ajaxloadpost_enqueuescripts 添加到 WordPress 的 wp_enqueue_scripts 来完成。

请记住，AJAX 永远不能以其原始形式使用。它将始终与其他编程语言（即 jQuery 或 JavaScript）结合使用。在这种情况下，我们将使用 JavaScript，因此您需要对它有一些基本的了解。

继续，将 JavaScript 添加到您将在 \wp-content\plugins\ajaxloadpost\js\folder 中找到的 ajaxloadpost.js。按照此操作创建一个 JS 文件夹并将 ajaxloadpost.js 放入其中。

现在，使用 WordPress wp_localize_script 添加所需的 JS 变量。此操作将为您的目录提供一个结构并将您的脚本排入队列。

编写 AJAX 处理程序

要编写 AJAX 处理程序，您将需要以下代码：

函数 ajaxloadpost_ajaxhandler() {

如果（！wp_verify_nonce（$_POST['nonce']，“ajaxloadpost_nonce”））{

exit(“错误的随机数”);

}

$结果 = ”;

$content_post = get_post($_POST['postid']);

$results = $content_post->post_content;

死（$结果）；

}

add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

完成此操作将导致两个结果。首先，它将创建用户需要的帖子的 ID，其次是创建随机数。但这不是重点！一旦 AJAX 处理程序的代码就位，您需要进行下一步，即在 WordPress 目录中注册 AJAX 处理程序。这样做将使 WordPress 插件响应 AJAX 调用。您可以通过以下代码实现此目的：

add_action('wp_ajax_nopriv_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

add_action('wp_ajax_ajaxloadpost_ajaxhandler', 'ajaxloadpost_ajaxhandler');

JavaScript 基础和 AJAX

有了 AJAX 调用和 AJAX 处理程序，您需要创建一个 JS 函数来连接这两个点。下面的 JavaScript 将帮助您实现此操作，您将把它放入您的 ajaxloadpost.js 中：

函数 ajaxloadpost_loadpost(postid,nonce) {

jQuery.ajax({

类型：'POST'，

网址：ajaxloadpostajax.ajaxurl，

数据： {

行动：'ajaxloadpost_ajaxhandler'，

邮递：邮递，

随机数：随机数

成功：函数（数据，文本状态，XMLHttpRequest）{

var loadpostresult = '#loadpostresult';

jQuery(loadpostresult).html(”);

jQuery(loadpostresult).append(data);

错误：函数（MLHttpRequest，textStatus，errorThrown）{

警报（错误抛出）；

}

});

}

就像上面提到的步骤一样，这个动作也会产生两个结果，即nonce和post ID。

下一步还需要精通 jQuery。所以，如果你的技能有点粗俗，你会发现这篇文章很有帮助！

继续，使用 jQuery.ajax 函数对适当的服务器进行 AJAX 调用。在上面的代码中，URL 是 admin-ajax.php URL，它可以在我们在脚本入队时注册的 JavaScript 变量中找到。此外，使用在 WordPress 中注册的操作处理程序的名称指定此操作，并同时发布 nonce 和发布 ID。

如果一切顺利，您可以更新 ID #loadpostresult 的 <div> 并将获取的内容替换为 AJAX 处理程序。

为您的代码添加一个面孔

现在，是时候创建代码来显示适当的帖子标题并通过 AJAX 调用显示用户想要的信息。以下是以下代码：

函数 ajaxloadpost_show_latest_posts($number = '5'){

$结果 =”;

$the_query = new WP_Query('posts_per_page='.$number);

而（ $the_query->have_posts() ）：

$the_query->the_post();

$nonce = wp_create_nonce(“ajaxloadpost_nonce”);

$arguments = get_the_ID().”,'”.$nonce.”'”;

$link = ' <a onclick=”ajaxloadpost_loadpost('.$arguments.');”>'. get_the_title().'</a>';

$result.= '<li>' 。 $链接。 '</li>';

结束；

wp_reset_postdata();

$result.= '<div id=”loadpostresult”></div>';

返回$结果；

}

函数 ajaxloadpost_shortcode_function( $atts ){

返回 ajaxloadpost_show_latest_posts();

}

add_shortcode('AJAXLOADPOST', 'ajaxloadpost_shortcode_function');

希望本文能帮助您使您的 WordPress 插件具有响应性。如果您有任何疑问，请给我们留言。

进一步阅读

响应式设计可帮助您提高转化率。
最佳响应 WooCommerce 主题