Аякс и Вордпресс

Техника Ajax, как мы объяснили в нашей вводной статье об Ajax, стала популярной, поскольку она позволяет нам обновлять часть содержимого веб-страницы без необходимости обновления страницы. Это способствует улучшению пользовательского опыта.

Сайты WordPress, конечно, не исключение. Однако то, как мы используем Ajax в WordPress, отличается от использования в других веб-приложениях.

Что такое 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 для нашей формы поиска. Мы используем тему Twenty Twenty-One, поэтому отредактировали файл 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.

Ставим в очередь наш скрипт

Мы сообщим WordPress о существовании JS-файла, отредактировав файл function.php темы и поставив скрипт в очередь следующим образом. Нашим файлом будет custom.js , который мы создали и поместили в новую папку «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. В нашем случае для передачи URL-адреса Ajax и объекта nonce.

Использование одноразового номера необходимо, чтобы запрос jQuery Ajax можно было проверить как запрос, исходящий с веб-сайта. Если вы не знакомы с использованием одноразовых номеров в WordPress, вы можете прочитать больше в нашей статье по теме.

ajax_object — это значение обязательного параметра $object_name object_name функции wp_localize_script() , которое позже будет использоваться в коде 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() будет отвечать за обработку данных в серверной части, подготовку результатов и отправку ответа.

Также, как видите, мы используем ajax_object из 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 не обрабатывается извне.

Необходимыми параметрами здесь являются действие, связанное с 'nonce' => wp_create_nonce( 'ajax_nonce' ) внутри вашей ajax_search_script() , а также значение, связанное с одноразовым номером.

Вот и все! Мы только что создали очень простой пример Ajax-PHP. На этом этапе, если вы попробуете код в тестовой среде WordPress, он должен работать так.

Где Сервис 1-5 — это названия наших тестовых постов.

Вывод

Это была статья о том, как мы можем повысить скорость отклика и производительность веб-сайта WordPress, используя преимущества Ajax. Надеюсь, теперь вы готовы использовать аналогичные методы на своем собственном веб-сайте и получать удовольствие от улучшения взаимодействия с пользователем!