Використовувати Ajax на вашому WordPress сайті легше, ніж ви думаєте. За допомогою JQuery ви можете подавати та отримувати дані. Взаємодія з WordPress здійснюється з допомогою спеціальних, призначених для WordPress дій Ajax, які можуть оброблятися на стороні сервера:

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.

Окремі дії Ajax для WordPress

Існує два окремих дії 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 для видалення записів

Тепер ми можемо почати створювати демонстраційний плагін, який буде видаляти записи через Ajax. Так як метою цієї статті є дати вам уявлення про внутрішню роботу по обробці запиту Ajax, я думаю, що це плагін дозволить вам отримати достатньо інформації, при цьому, не навантажуючи непотрібними подробицями. Наш плагін буде складатися з:

  • Додавання файлу JavaScript зі скриптом Ajax;
  • Додати в кожну запис посилання, яка при натисканні буде видаляти запис;
  • Обробки Ajax-запиту до PHP;
  • Обробки кліка кнопки за допомогою JQuery;
  • Додавання сценарію чергу обробки.

// Додаємо скрипт тільки на одну сторінку, якщо користувач має права адміністратора
add_action( ‘template_redirect’, ‘spyr_add_js_single_posts’ );
function spyr_add_js_single_posts() {
// Ми хочемо додати скрипт тільки, якщо is_single()
// і можемо керувати опціями (адміністраторів)
if( is_single() && current_user_can( ‘manage_options’ ) ) {
// Отримуємо шлях до паці плагіна
$path = plugin_dir_url( __FILE__ );
// Додаємо наш скрипт в чергу обробки
wp_enqueue_script( ‘spyr_ajax_delete_posts’,
$path. ‘js/ajax-delete-posts.js’,
array( ‘jquery’ ),
‘1.0.0’, true );
// Отримуємо протокол поточної сторінки
$protocol = isset( $_SERVER[‘HTTPS’] ) ? ‘https://’ : ‘http://’;
// Встановлюємо параметр ajaxurl, який буде виводитися безпосередньо пwhich
// перед файлом ajax-delete-posts.js, щоб могли використовувати ajaxurl
$params = array(
// Отримуємо url-адресу файлу admin-ajax.php з допомогою admin_url()
‘ajaxurl’ => admin_url( ‘admin-ajax.php’, $protocol ),
);
// Виводимо скрипт на сторінці
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 не буде працювати. Навіть якщо ми встановили https:// на стороні сервера, ми можемо виконати виклик admin-ajax.php без https://.

Нарешті, остання значуща рядок коду виводить динамічні змінні, які будуть використовуватися в ajax-delete-posts.js:

/* */

Додавання посилання «Видалити» до вмісту сторінки

// Додавання посилання адміністрування до кожного запису
add_filter( ‘the_content’, ‘spyr_add_content_delete_link’ );
function spyr_add_content_delete_link( $content ) {
if( is_single() && current_user_can( ‘manage_options’ ) ) {
// Отримання поточного запису
global $post;
// Створення nonce для цього дії
$nonce = wp_create_nonce( ‘spyr_adp-delete’ . $post->ID );
// Додавання посилання до сторінки адміністрування для видалення запису в кошик і додавання для неї
$link = ‘ID’&action=trash&nonce=’ .$nonce ) .'»
class=»spyr_adp_link» data-nonce=»‘. $nonce .'» data-id=»‘. $post->ID .'»>Delete Post’;
// Виведення посилання на сторінці
return $content . ‘

‘. $link .’

‘;
}
}

Коротко і ясно. Знову перевіряємо права доступу і переконуємося, що ми переглядаємо одиночну запис. Такі заходи безпеки необхідні, і до цього ви повинні звикнути. Далі створюємо nonce і прив’язуємо його до дії; зверніть увагу на спеціальний формат.

Він використовує наступну структуру, префикс_плагин-дія-ідентифікатор, де префікс — це spyr, adp = Ajax Delete Post, дія — це наша дія видалення, а ідентифікатор — ID видаляється посту. Це не обов’язково, але такий формат рекомендується при складанні плагінів.

Зверніть увагу, що ми також додаємо до ссылке ID запису і nonce, використовуючи при цьому атрибути даних HTML5. Останній крок — це прикріпити сформовану посилання до вмісту сторінки.

Обробка запитів за допомогою Ajax PHP та WordPress

Ми вже дійшли до половини статті. Далі ми розглянемо код, який насправді керує поданням вашого Ajax запиту. Вивчіть його уважно, оскільки він спирається на те, як ви називаєте дані, представлені запитом JQuery для отримання ідентифікатора запису (pid) і значення nonce:

// Обробник Ajax
add_action( ‘wp_ajax_spyr_adp_ajax_delete_post’, ‘spyr_adp_ajax_delete_post’ );
function spyr_adp_ajax_delete_post() {
// Отримуємо ID посади URL
$pid = $_REQUEST[‘pid’];
// Підтвердження WP_Ajax_Response
$response = new WP_Ajax_Response;
// Обробка, ми знову перевіряємо права доступу
if( current_user_can( ‘manage_options’ ) &&
// Верифікація Nonces
wp_verify_nonce( $_REQUEST[‘nonce’], ‘spyr_adp-delete’ . $pid ) &&
// Видалення запису
wp_delete_post( $pid ) ) {
// Формування відповіді, якщо все пройшло без помилок
$response->add( array(
‘data’ => ‘success’,
‘supplemental’ => array(
‘pid’ => $pid,
‘message’ => ‘This post has been deleted’,
),
) );
} else {
// Формування відповіді, якщо виникли помилки
$response->add( array(
‘data’ => ‘помилка’,
‘supplemental’ => array(
‘pid’ => $pid,
‘message’ => ‘Error deleting this post (‘. $pid’)’,
),
) );
}
// У будь-якому випадку відправляємо відповідь
$response->send();
// Завжди виходимо, коли Ajax виконаний
exit();
}

spyr_adp_ajax_delete_post — це ім’я дії передається у відповідь на запит файлу JavaScript. Це передбачає, що повне ім’я для вашого дії буде wp_ajax_spyr_adp_ajax_delete_post. Значення ID і nonce запису також передаються з допомогою файлу JavaScript, і ми можемо отримати їх від $_REQUEST.

Ми збираємося встановити екземпляр об’єкта WP_Ajax_Response, який дозволить нам повернути необхідний XML-відповідь. Після цього ви можете вважати цей результат і діяти у відповідності з ним через JQuery.

Знову ж таки, перед видаленням запису ви повинні переконатися, що користувач є адміністратором, і значення nonce збігаються. Ви повинні створити різні відповіді для кожного сценарію, так щоб ви точно знали, чи запис видалений чи ні.

Ви можете додати коротке повідомлення, що описує результат обробки, щоб забезпечити додаткову зворотний зв’язок з користувачем. Нарешті, ми відправляємо відповідь назад в браузер і виходимо. Завжди пам’ятайте, що ви повинні вийти після виконання запиту Ajax.

На сервер для обробки запит відправляється дуже просто:

action=spyr_adp_ajax_delete_post&pid=403&nonce=878727e18a

Як приклад сформованого XML-файлу, отриманого у відповіді, можна розглянути наступне:

success
403
This post has been deleted

Обробка натискання на кнопку з допомогою 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’ );
// Це те, що ми відправляємо на сервер
var data = {
action: ‘spyr_adp_ajax_delete_post’,
pid: id,
nonce: nonce
}
// Змінюємо текст анкору посилання
// Щоб надати деяку негайну інформацію
jQuery( link ).text( ‘Trying to delete post’ );
// Відправляємо на сервер
jQuery.post( spyr_params.ajaxurl, data, function( data ) {
// Розбираємо XML-відповідь з допомогою jQuery
// Отримуємо статус
var status = jQuery( data ).find( ‘response_data’ ).text();
// Отримуємо повідомлення
var message = jQuery( data ).find( ‘supplemental message’ ).text();
// Якщо все пройшло без збоїв, виводимо повідомлення про це і видаляємо посилання
if( status == ‘success’ ) {
jQuery( link ).parent().after( ‘

‘+ message + ‘

‘).remove();
} else {
// Якщо виникла помилка, виводимо повідомлення про помилку
alert( message );
}
});
// Блокуємо поведінка посилання за замовчуванням
e.preventDefault();
});
});

Розбирається XML через JQuery дуже просто, ми переглядаємо XML на наявність елементів з допомогою jQuery.find();, як якщо б ми намагалися знайти елемент у HTML-документі.

Висновок

Як бачите, виконання запитів Ajax у ваших плагіни і теми WordPress є досить простим процесом. Зокрема, це робиться ще простіше, завдяки двом спеціальним діям: wp_ wp_ajax_$action і wp_ajax_nopriv_$action.

Це тільки початок дивного шляху, на якому ви зможете писати код, який дозволяє обійтися без повторних завантажень сторінки і робить ваші теми і плагіни WordPress більш інтерактивними. Що ви далі хочете з цим зробити?

Якщо ви хочете отримати додаткову інформацію по цій темі, ознайомтеся з розділом Кодексу WordPress Ajax і Ajax в плагінах.

Переклад статті «Adding Ajax to Your WordPress Plugin» був підготовлений дружною командою проекту Сайтостроение від А до Я.