Якщо у вас є активна база клієнтів для вашого веб-сайту, то швидше за все стоїть питання, як надати клієнтам по-справжньому інтерактивний і збагачений веб-інтерфейс. Пропозиція інтерактивності в реальному часі точно приверне увагу вашої аудиторії.
На щастя, асинхронний JavaScript та XML (Ajax) – це доступний метод додавання інтерактивних функцій на сайт. Коли доходить до WordPress, можна спростити процес, використовуючи плагін на основі Ajax.
У цій статті ми познайомимо вас з Ajax та принципами його роботи, а також познайомимо вас з тим, як розпочати роботу з ним у WordPress.
Що таке Ajax і як він працює?
Ajax поєднує кілька різних мов програмування, таких як HTML, CSS, JavaScript та інші. Насправді він працює за лаштунками, щоб приймати запити від веб-браузера, надсилати їх на сервер та передавати результати назад до браузера.
Як веб-користувач, ви не дізнаєтесь, що працює Ajax, а просто отримаєте інтерактивний досвід. Наприклад, на своєму сайті можете використовувати Ajax, щоб приймати лайки на пости від користувачів, які увійшли до системи, та відображати підрахунок у реальному часі.
Чим корисний Ajax?
З Ajax користувачам не потрібно перезавантажувати сторінку, щоб побачити певні зміни. Це означає, що сайт залишатиметься швидким і забезпечуватиме більш плавний інтерфейс користувача. Оскільки Ajax ефективний, відправляючи туди і назад лише ті дані, які йому потрібні, він максимально збільшує пропускну здатність та уникає передачі великих обсягів даних.
Як веб-користувачі ми постійно користуємося перевагами Ajax. Одним із прикладів є функція автозаповнення пошуку Google:
Інші приклади, з якими ви, можливо, знайомі, це коментарі у Facebook та лайки у Instagram. Ajax працює скрізь, де взаємодіючи з веб-сторінкою миттєво отримуєте інформацію у відповідь.
Початок роботи з Ajax у WordPress
Коли справа доходить до WordPress, є кілька способів, де може стати в нагоді Ajax. Розглянемо URL-адресу і те, як її використовувати разом з перехоплювачами функцій WordPress.
URL-адреса Ajax у WordPress
Оскільки WordPress за умовчанням використовує Ajax в панелі адміністратора, додати туди додаткові функції не складно. Однак, якщо хочете використовувати Ajax на зовнішньому інтерфейсі свого сайту, необхідно зрозуміти, як працює URL-адреса Ajax.
У WordPress ваш файл адмін-ajax.php має URL-адресу. Він надає інформацію, необхідну для надсилання даних для обробки, та має життєво важливе значення для розробки.
WordPress використовує виклик wp_localize_script () для використання URL-адреси Ajax для підключення функцій JavaScript та PHP, оскільки PHP не може безпосередньо відобразити їх без сторонньої допомоги.
Як використовувати хук дій Ajax у WordPress
WordPress використовує хуки у своєму програмуванні, щоб плагіни та теми могли взаємодіяти з ядром WordPress. Хуки бувають двох видів: «дії» та «фільтри». З Ajax ви будете використовувати обробники дій для виконання функцій.
Дії дозволяють додавати дані до WordPress або змінювати його роботу. З Ajax потрібно використовувати дію wp_ajax_(action). Потім до нього можна підключити функцію користувача, яка буде виконуватися під час виклику Ajax.
Наприклад, цей приклад коду WordPress показує, як виклик Ajax та об'єкт JavaScript можуть бути об'єднані в одному файлі для виконання дії:
<?php
add_action( 'wp_ajax_my_action', 'my_action');
function my_action() {
Global $wpdb; // this is how you get access to the database
$whatever = intval( $_POST['whatever'] );
$whatever += 10;
echo $whatever;
wp_die(); // this is required to terminate immediately and return a proper response
}Ви також можете створювати окремі JavaScript для своїх дій. Вам просто потрібно обов'язково використовувати URL-адресу Ajax, щоб виклики не губилися.
Дивіться також:
Поради по прискорення завантаження сайту WordPress до 97%.
Як використовувати Ajax, працюючи з плагіном-прикладом (4 кроки)
Якщо хочете поекспериментувати з Ajax, краще створити з ним плагін. На щастя, існує безліч прикладів коду або базових плагінів, з яких можна розпочати. У прикладі нижче будемо використовувати завантажуваний зразок коду плагіна WordPress Plugin Boilerplate.
Крок 1. Створіть відповідні файлові структури
Спочатку потрібно назвати свій плагін та створити для нього відповідні файлові структури. Ім'я має бути унікальним і не конфліктувати з жодним іншим інструментом у каталозі плагінів WordPress. Тому що коли користувач завантажує вашу плагін, він потрапляє в його каталог WP-зміст / плагіни /.
Після того, як визначилися з ім'ям, потрібно створити як мінімум три наступні файли у власному каталозі WP-зміст / плагіни /:
- ім'я-плагіна.php
- ім'я-плагіна.js
- ім'я-плагіна.css
Файл . Php потрібно помістити в папку нового плагіна та створити окремі підпапки для файлів JavaScript та CSS, у яких зберігатимуться файли. Всі файли, необхідні для вашого плагіна, повинні бути розташовані в одній головній папці.
На наступному кроці побачите, що приклад коду, який ми використовуємо, постачається з попередньо створеними файловими структурами. Однак важливо розуміти, як почати з нуля, і чому файли повинні бути структуровані певним чином.
Крок 2. Виберіть для початку зразок коду
Використання прикладного файлу коду – це хороший початок, коли пробуєте Ajax у своєму першому плагіні. Однак радимо перевіряти ще раз свій приклад коду, щоб переконатися, що він безпечний і не містить помилок.
Як згадувалося раніше, у нашому прикладі будемо використовувати WordPress Plugin Boilerplate. Приклад коду постачається разом із файлами, які знадобляться для завершення створення плагіна. Цей зразок плагіна відповідає стандартам кодування та документації WordPress. Щоб розпочати роботу з кодом, скачайте ZIP- файл з меню Code:
Крок 3. Увімкніть дії у свій код
Приклад коду плагіна, який ми використовуємо, побудовано за допомогою об'єктно-орієнтованого програмування. Воно допомагає програмістам організовувати свій код та створює шаблон розробки, яким легко ділитися та багаторазово використовувати.
Крім того, код постачається з усіма файлами, необхідними для розробки плагінів, включаючи файли активації та деактивації в каталозі /includes/. Ви також знайдете, що при необхідності легко знайти загальнодоступні та адміністративні файли.
Погляньмо на наш зразок плагіна, переглянувши початок файлу plugin-name.php:
<?php
/ **
* The plugin bootstrap file
*
* Цей файл є read by WordPress to generate the plugin information in the plugin
* admin area. Цей файл також включає в себе всі спільні значення, використовуваний plugin,
* registers the activation and deactivation функцій, і defines a function
* registers the activation and deactivation функцій, і defines a function
* that starts the plugin.
*
* @link http://example.com
* @ Since 1.0.0
* @package Plugin_Name
*
* @wordpress-plugin
* Plugin Name: WordPress Plugin Boilerplate
* Plugin URI:
* Description: Це short description what the plugin does. Це displayed в WordPress admin area.
* Version: 1.0.0
* Автор: Your Name or Your Company
* Author URI: http://example.com/
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain: plugin-name
* Domain Path: /languages
*/
Вся інформація, що міститься в цій частині коду, важлива для реєстрації вашого плагіна WordPress. Таким чином, каталог плагінів буде знати, що відображати для вашого плагіну.
Тепер потрібно зробити кілька речей, щоб поєднати всі точки, у тому числі:
- Переконайтеся, що URL-адреса Ajax доступна для вашого скрипту. Для цього можете використати wp_localize_script ().
- Створіть клас plugin-name із класом Plugin-Name{} у файлі plugin-name.php. Тут визначатимете свої хуки дій.
- Створіть відповідну функцію JavaScript у файлі plugin-name.js.
Одним із важливих елементів підходу Аджакс є визначення того, хто може використовувати кожну функцію, особливо під час створення інтерактивності зовнішнього інтерфейсу. Ми підключимо зовнішню дію за допомогою приклад коду з WordPress:
if ( is_admin() ) { add_action( 'wp_ajax_my_frontend_action', 'my_frontend_action' ); add_action( 'wp_ajax_nopriv_my_frontend_action', 'my_frontend_action'); add_action( 'wp_ajax_my_backend_action', 'my_backend_action'); // Add other back-end action hooks here } else { // Add non-Ajax front-end action hooks here }Зверніть увагу на кілька речей у цьому прикладі.
По-перше, ці дії будуть доступні всім на сайті, незалежно від того, увійшли вони до облікового запису чи ні. На це вказує виклик wp_ajax_nonpriv_().
По-друге, можна побачити, що під час зовнішніх дій також підключаються внутрішні адміністративні дії.
Щоб зрозуміти процес, що відбувається в цьому наборі дій, важливо знати, що my_frontend_action викличе PHP-функцію my_frontend_action_callback().
Крок 4. Протестуйте та налагодьте свій плагін
Після того, як ви налаштуєте всі хуки дій та відповідні функції, ви захочете протестувати і, можливо, налагодити свій плагін (якщо є якісь проблеми). Дізнайтеся у вашого веб-хостингу, чи він може запропонувати інструмент налагодження як частину свого пакета хостингу.
З цієї статті ви дізналися про Ajax та принципи його роботи, а також познайомилися з тим, як розпочати роботу з ним у WordPress, створивши свій перший плагін.
Джерело: wpengine.com
Коментарі до запису: 0