阿贾克斯和 WordPress

已发表: 2021-11-02

正如我们在关于 Ajax 的介绍性文章中所解释的，Ajax 技术已经变得流行，因为它允许我们更新部分网页内容而无需刷新页面。这有助于改善用户体验。

WordPress 网站当然也不例外。然而，我们在 WordPress 中使用 Ajax 的方式与在其他 Web 应用程序中的使用方式不同。

什么是 admin-ajax 以及它是如何工作的？

WordPress 已经为自己的管理功能实现了 Ajax，例如自动保存、即时更新、评论审核、添加/删除帖子等。这意味着我们只需利用 WordPress 提供的相关功能即可使用它。

用于此目的的关键文件是admin-ajax.php文件，位于 wp-admin 文件夹下，用于在客户端和服务器之间创建连接。

在这个文件中，大约第 159 行，您可以看到所有 Ajax 请求是如何由一些操作挂钩注册的。

 if ( ! empty( $_GET['action'] ) && in_array( $_GET['action'], $core_actions_get, true ) ) { add_action( 'wp_ajax_' . $_GET['action'], 'wp_ajax_' . str_replace( '-', '_', $_GET['action'] ), 1 ); } if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_post, true ) ) { add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 ); }

wp_ajax_{$action} 指的是登录用户， wp_ajax_nopriv_{$_REQUEST['action']} 指的是网站访问者。如果你想创建一个包含所有用户的请求，我们将不得不使用这两个钩子。

因此，借助这些操作，您可以挂钩自定义函数并将数据传递给 WordPress 以发出 Ajax 请求。让我们来看看这个实际操作。

WordPress Ajax 示例

我们将使用与 Ajax 介绍性文章中相同的示例，并创建一个表单，允许用户在文章标题中搜索并即时查看建议的结果。

在我们主题的标题空间中，我们将为我们的搜索表单插入 HTML 输出。我们使用二十一二十一主题，因此我们编辑了位于主题主文件夹下的header.php文件，并在 <div id=”content” class=”site-content”> 行之前插入了以下行。

 <p><b>Search in articles:</b></p> <form> <input type="text" class="userInput"> </form> <p>Articles available: <span class="txtHint"></span></p>

现在用户可以使用的表单应该在前端可见。

注意：这里，我们将直接编辑主题的header.php文件，而不创建子主题。 这不是好的做法，并且有许多缺点。 如果您想了解更多关于儿童主题的重要性，请阅读我们的相关文章。 出于本示例的目的，我们使代码保持简单且符合主题。 因此，不建议您在生产网站中使用此代码。

接下来是包含将发送请求的 JavaScript 函数。我们将改用 jQuery，因为它已经随 WordPress 一起提供并且可以使用了。当然，我们必须以 WordPress 的方式包含一个脚本。

将我们的脚本加入队列

我们将通过编辑主题的function.php文件并像这样将脚本排入队列来告诉 WordPress JS 文件的存在。我们的文件将是我们创建并放在主题主文件夹下的新“js”文件夹中的custom.js 。

 function ajax_search_script() { wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true ); $script_data_array = array( 'url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'search_titles_nonce' ), ); wp_localize_script( 'custom-script', 'ajax_object', $script_data_array ); wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'ajax_search_script' );

在ajax_search_script()函数中，我们注册并本地化了脚本，然后使用内置的 wp_enqueue_script() 函数将本地化数据排入队列。然后我们将ajax_search_script()函数挂接到 wp_enqueue_scripts 上，这是在 WordPress 中对脚本进行排队时使用的正确操作。

wp_localize_script的使用在这里可能会造成混淆，因为作为 WordPress 函数，它最初是为翻译脚本中使用的任何字符串而设计的。然而，它也经常用于将通用数据从 PHP 传递到 JavaScript。在我们的例子中，传递 Ajax URL 和 nonce 对象。

使用 nonce 是必要的，以便可以将 jQuery Ajax 请求验证为来自网站的请求。如果您不熟悉 WordPress 中 nonce 的使用，您可以在我们的相关文章中阅读更多内容。

ajax_object是wp_localize_script()函数所需的$object_name参数的值，稍后将在 jQuery 代码中使用。

伟大的！现在让我们用正确的内容填充我们的函数。

JavaScript

在custom.js文件中，我们包含了我们的 jQuery。

 jQuery(function($) { $('.userInput').on('keyup', function() { var input = $(this).val(); if(input != '') { var data = { 'action': 'get_articles_titles', 'search_text': input, 'nonce': ajax_object.nonce } $.post(ajax_object.url, data, function(response) { $('#txtHint').html(response); }); } }); });

这次我们使用 jQuery 和 JSON 将所需的数据、操作、search_text、nonce 传递给服务器端脚本。回调get_articles_titles()函数，将负责处理后端的数据，准备结果并发送回响应。

此外，如您所见，我们使用 wp_localize_script 中的wp_localize_script及其两个数组值，即 nonce 和 url。

钩子

现在我们必须将经过身份验证的 Ajax 操作与我们之前提到的必要挂钩绑定。我们提醒您，为了同时包含已登录和未登录的用户，您必须同时使用这两个钩子。在您的functions.php文件中，将这两行添加到之前添加的代码下，以便将脚本加入队列。

 add_action('wp_ajax_get_articles_titles', 'get_articles_titles'); add_action('wp_ajax_nopriv_get_articles_titles', 'get_articles_titles');

您可能已经注意到，钩子名称实际上是一个前缀，后跟我们的操作名称。 get_articles_titles挂钩函数是我们实际检索文章标题的地方。我们也将在functions.php中定义这个函数。

 function get_articles_titles() { check_ajax_referer('ajax_nonce', 'nonce'); $input = $_POST['search_text']; $args = array( 'posts_per_page' => -1, 'post_type' => 'post', ); $the_query = new WP_Query( $args ); $autocomplete = "<br>"; if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); $title = get_the_title( get_the_ID() ); if ( strpos( strtolower($title), strtolower($input) ) !== false ) { $autocomplete .= $title . "<br>" ; } } wp_reset_postdata(); } echo $autocomplete; wp_die(); }

check_ajax_referer 负责验证 Ajax 请求没有被外部处理。

此处的必要参数是与ajax_search_script()函数中的'nonce' => wp_create_nonce( 'ajax_nonce' )相关的操作，以及与 nonce 相关的值。

就是这样！我们刚刚创建了一个非常简单的 Ajax-PHP 示例。此时，如果您在测试 WordPress 环境中尝试代码，它应该是这样工作的。

其中 Service 1-5 是我们测试帖子的标题。

结论

这是一篇关于我们如何通过利用 Ajax 优势来提高 WordPress 网站的响应能力和性能的文章。希望您现在已经准备好在您自己的网站上使用类似的技术并享受改善用户体验的乐趣！