阿賈克斯和 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 網站的響應能力和性能的文章。希望您現在已經準備好在您自己的網站上使用類似的技術並享受改善用戶體驗的樂趣！