Ajax у WordPress: як правильно?

Технологія Ajax (Asynchronous JavaScript And XML) дозволяє отримувати дані з сервера без перезавантаження всієї сторінки. Без сумніву, це дуже зручно! Навіть існують спеціальні плагіни (наприклад, AJAX for all), що дозволять кожну сторінку завантажувати з допомогою цієї технології. Тема ж цієї статті – вибіркове застосування Ajax у WordPress: як правильно це зробити?

Основи

На загал, існує три стадії роботи Ajax запиту:

1. JavaScript спрацьовує на певну дію користувача (клік мишкою, вибір значення у випадаючому меню і т.д.), створює запит і надсилає його на сервер.
2. Сервер (скрипт на сервері) обробляє запит і надсилає інформацію назад.
3. Той же JavaScript виводить отриману інформацію.

Важливе значення тут має скрипт на сервері, що обробляє запит. Потрібна зручна і кросс-браузерна бібліотека. На щастя, WordPress використовує саме таку – SACK (Simple Ajax Code-Kit) – і вона вже вбудована у двигунець. Ця бібліотека знаходиться за адресою: wp-admin/admin-ajax.php. Отже, дуже важливо, щоб запит надсилався саме до цього файла!. Інакше, ваш запит взагалі не буде оброблятись двигунцем. Він його просто ігноруватиме.

Починаючи з WordPress версії 2.8 створено новий хук ‘wp_ajax_назва_дії’ і ‘wp_ajax_nopriv_назва_дії’. Перший діє для авторизованих користувачів, другий – для гостей. Дані хуки дозволять вам прив’язати певний Ajax-запит до певної php-функції.

add_action('wp_ajax_назва_дії', 'функція_що_спрацьовує_при_цьому');
add_action('wp_ajax_nopriv_назва_дії', 'функція_що_спрацьовує_при_цьому');

Власне, це основне що потрібно знати для організації правильної роботи Ajax у WordPress для фроент-енд. Далі ще наведу простий приклад для наочності.

Приклад

У нас є випадаюче меню з двома батьківськими категоріями: “новини” та “спорт”. Категорія “новини” немає дочірних категорій, а новина “спорт” – має. При виборі користувачем батьківської категорії “спорт” нижче з’явиться ще одне випадаюче меню, що міститиме дочірні її категорії.

Нижче наведено повний код. Приклад реалізовано на jQuery, отож спершу вам знадобиться долучити дану бібліотеку на веб сторінку. Найшвидше це можна зробити з допомогою сервісу Gogle Code.

Долучаємо бібліотеку jQuery:

Випадаючі меню:

     Тип запису
      Новини
      Спорт

jQuery скрипт – спрацьовує на дію, створює і надсилає запит з допомогою Ajax:

PHP функція і хуки (повинні міститись у файлі functions.php):

function implement_ajax() {
    if(isset($_POST['catid'])){
	$categories = get_categories('child_of='.$_POST['catid'].'&hide_empty=0');

                echo '';
		        foreach ($categories as $cat) {
				$option .= '';
				$option .= $cat->cat_name;
				$option .= '';
			    }
                echo 'Категорія спорт'.$option;
		        echo '';
                die();
    }
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');