Если у вас есть активная клиентская база для вашего веб-сайта, то скорее всего стоит вопрос, как предоставить клиентам по-настоящему интерактивный и обогащенный веб-интерфейс. Предложение интерактивности в реальном времени точно привлечет внимание вашей аудитории.
К счастью, асинхронный 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 ваш файл admin-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-content/plugins/.
После того, как определились с именем, нужно создать как минимум три следующих файла в собственном каталоге wp-content/plugins/:
- имя-плагина.php
- имя-плагина.js
- имя-плагина.css
Файл .php нужно поместить в папку нового плагина и создать отдельные подпапки для файлов JavaScript и CSS, в которых будут храниться файлы. Все файлы, необходимые для работы вашего плагина, должны быть расположены в одной главной папке.
На следующем шаге увидите, что пример кода, который мы используем, поставляется с предварительно созданными файловыми структурами. Однако важно понимать, как начать с нуля и почему файлы должны быть структурированы определенным образом.
Шаг 2. Выберите для начала образец кода
Использование файла примера кода — это хорошее начало, когда пробуете Ajax в своем первом плагине. Однако советуем перепроверить свой пример кода, чтобы убедиться, что он безопасен и не содержит ошибок.
Как упоминалось ранее, в нашем примере будем использовать WordPress Plugin Boilerplate. Пример кода поставляется вместе с файлами, которые понадобятся для завершения создания плагина. Этот образец плагина соответствует стандартам кодирования и документации WordPress. Чтобы начать работу с кодом, скачайте ZIP- файл из раскрывающегося меню Code:
Шаг 3. Включите действия в свой код
Пример кода плагина, который мы используем, построен с помощью объектно-ориентированного программирования. Оно помогает программистам организовывать свой код и создает шаблон разработки, которым легко делиться и многократно использовать.
Кроме того, код поставляется со всеми файлами, необходимыми для разработки плагинов, включая файлы активации и деактивации в каталоге /includes/. Вы также обнаружите, что при необходимости легко найти общедоступные и административные файлы.
Давайте взглянем на наш образец плагина, просмотрев начало файла plugin-name.php:
<?php
/**
* The plugin bootstrap file
*
* This file is read by WordPress to generate the plugin information in the plugin
* admin area. This file also includes all of the dependencies used by the plugin,
* registers the activation and deactivation functions, and defines a function
* registers the activation and deactivation functions, and 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: This is a short description of what the plugin does. It’s displayed in the WordPress admin area.
* Version: 1.0.0
* Author: 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, создав свой первый плагин.
Смотрите также:
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/