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 '';
                die();
    }
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');
Безкоштовні іконки Alumni Fortis

Безкоштовні іконки Alumni Fortis

Оце так WordPress Pack!

Оце так WordPress Pack!

Новіший допис

There are 5 comments

  1. Юрко Червоний

    Знак долара «$» не рекомендовано використовувати, оскільки можуть бути проблеми із іншими скриптами. Бажано використовувати «jQuery» замість знака долара.

    Не розумію для чого підвантажувати сторонню бібліотеку jQuery, якщо можна використати її з адмінки. Чи вона не підходить для аяксу?

  2. Віталій Кійко

    Так, збільшив.

    Ти правий. Але допис не про те, як використовати jQuery у не конфліктному режимі. Неможливо розповісти про всі подібні нюанси. Інакше вийде трактат. 🙂

    Бібліотеки різняться тільки версіями. Я використовую метод який описав лише для того, щоб бути впевненим у тому, яку саме версію я долучаю.

  3. Створення сайтів

    Помилки у вас в коді явасріпта. Кинулось у очі.

    У стрічках
    action: ‘my_special_ajax_call’, // назва action’a, при якому спрацьовує php
    catid: main_category // значення перемінної, що треба передати

    аction та catid мають бути в лапках, так як це ключі об’єкту, а не змінні.

Надіслати коментар