Использование Ajax на вашем WordPress сайте проще, чем вы думаете. С JQuery на вашей стороне вы можете отправлять данные, а также получать данные. Связь с WordPress осуществляется через специальное Ajax-действие WordPress, способное обрабатывать его на стороне сервера.
Ajax обычно происходит после отправки формы или нажатия кнопки, позволяющей отправлять биты данных на сервер для обработки. В качестве примера рассмотрим следующий фрагмент кода:
var data { action: 'spyr_plugin_do_ajax_request', var1: 'value 1', var2: 'value 2' } Используя нашего друга jQuery, мы собираемся отправить это на сервер и получить ответ от сервера. В WordPress все запросы Ajax отправляются в admin-ajax.php для обработки. Этот файл находится в каталоге /wp-admin вашего сайта WordPress. Несмотря на то, что файл находится в административной области вашего сайта, вы можете использовать его для обработки взаимодействий как от внешнего интерфейса, так и от внутреннего интерфейса.
Параметр действия
В нашем предыдущем примере параметр действия spyr_plugin_do_ajax_request отвечает за установление соединения между файлом JavaScript и кодом PHP. Рекомендуется ставить префикс перед всеми действиями, включая это; так что он уникален и узнаваем. Сделайте так, чтобы он выглядел так, как будто он принадлежит вашему плагину WordPress.
WordPress ‘Выделенные Действия Ajax
Мы можем использовать два специальных действия Ajax для WordPress.
Первый — wp_ajax_$action которое обрабатывает запрос Ajax, если пользователь вошел в систему.
Второй — wp_ajax_nopriv_$action который обрабатывает Ajax-запрос, если пользователь не вошел в систему и не имеет никаких привилегий.
Следуя нашим предыдущим примерам, мы добавим эти хуки действий к нашему плагину следующим образом:
add_action( 'wp_ajax_spyr_plugin_do_ajax_request', 'spyr_plugin_do_ajax_request' ); add_action( 'wp_ajax_nopriv_spyr_plugin_do_ajax_request', 'spyr_plugin_do_ajax_request' );
Теперь, когда мы знаем основы взаимодействия Ajax-событий с WordPress, давайте посмотрим на реальный пример. Давайте создадим простой плагин, который позволит администраторам удалять определенные посты из внешнего интерфейса.
Ajax Post Удалить плагин
Теперь мы можем начать создавать пример плагина, который будет удалять сообщения через Ajax. Так как эта статья призвана познакомить вас с внутренним принципом обработки Ajax-запроса, я чувствую, что этот плагин позволит вам испачкать руки, не добавляя путаницы. Наш плагин будет состоять из:
- Добавление файла JavaScript с помощью сценария Ajax
- Добавление ссылки на каждый пост, при нажатии которого он будет удален
- Обработка запроса Ajax с помощью PHP
- Обработка нажатия кнопки с помощью jQuery
- Ставим в очередь наш сценарий
// Add script on single post only, if user has Admin rights add_action( 'template_redirect', 'spyr_add_js_single_posts' ); function spyr_add_js_single_posts() { // We only want to add the script if is_single() // and can manage options (Admins) if( is_single() && current_user_can( 'manage_options' ) ) { // Get the Path to this plugin's folder $path = plugin_dir_url( __FILE__ ); // Enqueue our script wp_enqueue_script( 'spyr_ajax_delete_posts', $path. 'js/ajax-delete-posts.js', array( 'jquery' ), '1.0.0', true ); // Get the protocol of the current page $protocol = isset( $_SERVER['HTTPS'] ) ? 'https://' : 'http://'; // Set the ajaxurl Parameter which will be output right before // our ajax-delete-posts.js file so we can use ajaxurl $params = array( // Get the url to the admin-ajax.php file using admin_url() 'ajaxurl' => admin_url( 'admin-ajax.php', $protocol ), ); // Print the script to our page wp_localize_script( 'spyr_ajax_delete_posts', 'spyr_params', $params ); } }
Безопасность всегда важна. Итак, нам нужно проверить, имеет ли текущий пользователь достаточные разрешения для просмотра ссылки «Удалить» или нет. Нам также необходимо убедиться, что мы просматриваем один пост, иначе нет смысла добавлять ссылку «Удалить».
Если оба условия выполняются, включите скрипт, содержащий код JavaScript, для обработки того, что происходит при нажатии на ссылку. Обратите пристальное внимание на то, как протокол используется в интерфейсе сайта. Мы должны сделать это из-за той же политики происхождения, которой подвергаются запросы и ответы Ajax. Все запросы и ответы Ajax должны обрабатываться из одного домена; и протоколы тоже должны совпадать.
В WordPress можно принудительно установить протокол https в разделе администрирования вашего сайта, установив для «FORCESSLADMIN» значение «true» в файле конфигурации WordPress. Отправка запроса с http://example.com/sample-post/ на https://example.com/wp-admin/admin-ajax.php не будет работать. Даже если мы admin-ajax.php https:// admin-ajax.php часть, мы можем сделать вызов admin-ajax.php без https:// .
Наконец, последняя значащая строка в коде выводит наши динамические переменные для использования в ajax-delete-posts.js .
<script type='text/javascript'> /* <![CDATA[ */ var spyr_params = {"ajaxurl":"http:\/\/example.com\/wp-admin\/admin-ajax.php"}; /* ]]> */ </script>
Добавить Удалить ссылку на контент
// Add an admin link to each post add_filter( 'the_content', 'spyr_add_content_delete_link' ); function spyr_add_content_delete_link( $content ) { if( is_single() && current_user_can( 'manage_options' ) ) { // Get current post global $post; // Create a nonce for this action $nonce = wp_create_nonce( 'spyr_adp-delete-' . $post->ID ); // Get link to adminn page to trash the post and add nonces to it $link = '<a href="'. admin_url( 'post.php?post='. $post->ID .'&action=trash&nonce=' .$nonce ) .'" class="spyr_adp_link" data-nonce="'. $nonce .'" data-id="'. $post->ID .'">Delete Post</a>'; // Append link to content return $content . '<p>'. $link .'</p>'; } }
Коротко и просто. Проверьте разрешения еще раз, и убедитесь, что вы просматриваете один пост. Эти меры безопасности необходимы, и к этому вам нужно привыкнуть. Затем создайте свой одноразовый номер и привяжите его к действию; обратите внимание на специальный формат. Он использует следующую структуру: prefix_plugin-action-identifier , где spyr — это префикс, adp = Ajax Delete Post, delete — наше действие, а ID сообщения — идентификатор. Это не обязательно, но рекомендуется при написании плагинов. Обратите внимание, что мы также добавляем идентификатор публикации и значение nonce к ссылке, используя атрибуты данных HTML5. Последний шаг — прикрепить отформатированную ссылку к контенту.
Обработка запроса Ajax с помощью PHP и WordPress
Мы сейчас на полпути через статью. Далее следует код, который фактически обрабатывает отправку вашего Ajax-запроса. Обратите пристальное внимание, так как он основан на том, как вы называете данные, отправленные запросом jQuery, для получения идентификатора записи (pid) и значения nonce.
// Ajax Handler add_action( 'wp_ajax_spyr_adp_ajax_delete_post', 'spyr_adp_ajax_delete_post' ); function spyr_adp_ajax_delete_post() { // Get the Post ID from the URL $pid = $_REQUEST['pid']; // Instantiate WP_Ajax_Response $response = new WP_Ajax_Response; // Proceed, again we are checking for permissions if( current_user_can( 'manage_options' ) && // Verify Nonces wp_verify_nonce( $_REQUEST['nonce'], 'spyr_adp-delete-' . $pid ) && // Delete the post wp_delete_post( $pid ) ) { // Build the response if successful $response->add( array( 'data' => 'success', 'supplemental' => array( 'pid' => $pid, 'message' => 'This post has been deleted', ), ) ); } else { // Build the response if an error occurred $response->add( array( 'data' => 'error', 'supplemental' => array( 'pid' => $pid, 'message' => 'Error deleting this post ('. $pid .')', ), ) ); } // Whatever the outcome, send the Response back $response->send(); // Always exit when doing Ajax exit(); }
spyr_adp_ajax_delete_post — это имя действия, которое передается из запроса вашего файла JavaScript. Учитывая это, полное название вашего действия будет wp_ajax_spyr_adp_ajax_delete_post . Значения Post ID и nonce также передаются через файл JavaScript, и мы можем получить их из $_REQUEST .
Мы собираемся создать экземпляр WP_Ajax_Response который позволит нам вернуть хороший XML-ответ. Затем вы можете читать и действовать в зависимости от того, что возвращается через jQuery. Еще раз, вам нужно проверить, что пользователь является администратором, и попытаться сопоставить одноразовые значения перед удалением сообщения. Вам необходимо создать разные Ответы для каждого сценария, чтобы точно знать, была ли публикация удалена или нет. Затем вы можете приложить краткое и краткое сообщение с описанием результата, чтобы предоставить дополнительную обратную связь пользователю. Наконец, вы отправляете ответ обратно в браузер и выходите. Всегда не забывайте выходить, когда выполняете Ajax-запросы.
Запрос, как он будет отправлен на сервер для обработки, так же прост:
action=spyr_adp_ajax_delete_post&pid=403&nonce=878727e18a
Пример отформатированного XML-файла, возвращенного в Ответе, можно изучить ниже:
<wp_ajax> <response action="spyr_adp_ajax_delete_post_0"> <object id="0" position="1"> <response_data>success</response_data> <supplemental> <pid>403</pid> <message>This post has been deleted</message> </supplemental> </object> </response> </wp_ajax>
Обработка нажатия кнопки с помощью jQuery
Осталось только написать код JavaScript, который отправит запрос и проанализирует ответ. Сам код довольно понятен, но я пошел дальше и добавил встроенные комментарии, чтобы его было легче понять.
jQuery( document ).ready( function() { jQuery( '.spyr_adp_link' ).click( function( e ) { var link = this; var id = jQuery( link ).attr( 'data-id' ); var nonce = jQuery( link ).attr( 'data-nonce' ); // This is what we are sending the server var data = { action: 'spyr_adp_ajax_delete_post', pid: id, nonce: nonce } // Change the anchor text of the link // To provide the user some immediate feedback jQuery( link ).text( 'Trying to delete post' ); // Post to the server jQuery.post( spyr_params.ajaxurl, data, function( data ) { // Parse the XML response with jQuery // Get the Status var status = jQuery( data ).find( 'response_data' ).text(); // Get the Message var message = jQuery( data ).find( 'supplemental message' ).text(); // If we are successful, add the success message and remove the link if( status == 'success' ) { jQuery( link ).parent().after( '<p><strong>' + message + '</strong></p>').remove(); } else { // An error occurred, alert an error message alert( message ); } }); // Prevent the default behavior for the link e.preventDefault(); }); });
Разобрать XML с помощью jQuery просто, используя jQuery.find(); просмотрите XML для элемента, как если бы вы пытались найти элемент в документе HTML.
Вывод
Как вы можете видеть, выполнение Ajax-запросов в ваших плагинах и темах является очень простым процессом в WordPress. Это заметно легче достичь благодаря двум выделенным действиям: wp_ajax_$action и wp_ajax_nopriv_$action . Это только начало пути написания потрясающего кода, который сохранит перезагрузку страницы и добавит интерактивность вашей теме или плагину WordPress. Что ты будешь делать дальше?
Если вам нужна дополнительная информация по этой теме, обязательно посетите страницу Кодекса WordPress по Ajax и Ajax в плагинах .