Как использовать Ajax в WordPress

Опубликовано: 2023-02-12

Если у вас есть заинтересованная и активная клиентская база для вашего веб-сайта, вы можете задаться вопросом, как вы можете предоставить им по-настоящему интерактивный и обогащенный веб-интерфейс. Предложение интерактивности в реальном времени может привлечь внимание вашей аудитории.

К счастью, асинхронный JavaScript и XML (Ajax) — это доступный метод добавления интерактивных функций на ваш сайт. Когда дело доходит до WordPress, вы даже можете упростить процесс, используя плагин на основе Ajax.

В этой статье мы познакомим вас с Ajax и принципами его работы. Мы также познакомим вас с тем, как начать работу с Ajax в WordPress. Давайте прыгать прямо в!

Что такое Ajax и как он работает?

Ajax объединяет несколько различных языков программирования, таких как HTML, CSS, JavaScript и другие. В действии он работает за кулисами, чтобы принимать запросы от веб-браузера, отправлять их на сервер и передавать результаты обратно в браузер.

Как веб-пользователь, вы не будете знать, что работает Ajax. Вы просто получите интерактивный опыт. Например, на своем сайте вы можете использовать Ajax, чтобы принимать лайки на сообщения от пользователей, которые вошли в систему, и отображать подсчет в реальном времени.

Чем полезен Ajax?

С Ajax пользователям не нужно перезагружать страницу, чтобы увидеть определенные изменения. Это означает, что ваш сайт будет оставаться быстрым и обеспечивать более плавный пользовательский интерфейс. Поскольку Ajax эффективен, отправляя туда и обратно только те данные, которые ему нужны, он может максимально увеличить пропускную способность и избежать передачи больших объемов данных.

Как веб-пользователи, мы постоянно пользуемся преимуществами Ajax. Одним из примеров является функция автозаполнения поиска Google.

Другие примеры, с которыми вы, возможно, знакомы, включают комментарии в Facebook и лайки в Instagram. Ajax, вероятно, работает везде, где вы можете взаимодействовать с веб-страницей и мгновенно получать информацию в ответ.

Начало работы с Ajax в WordPress

Когда дело доходит до WordPress, есть несколько способов, которыми может пригодиться Ajax. Во-первых, мы рассмотрим URL-адрес Ajax и то, как его использовать вместе с перехватчиками функций WordPress.

URL-адрес Ajax в WordPress

Поскольку WordPress по умолчанию использует Ajax в панели администратора, добавить туда дополнительные функции Ajax не составит труда. Однако если вы хотите использовать Ajax на внешнем интерфейсе своего сайта, вам необходимо понять, как работает URL-адрес Ajax.

В WordPress ваш файл admin-ajax.php имеет URL-адрес. Это предоставляет информацию, необходимую для отправки данных для обработки, и имеет жизненно важное значение для Ajax-разработки. 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');

функция my_action() {
глобальный $wpdb; // так вы получаете доступ к базе данных

$что угодно = intval($_POST['что угодно'] );

$любой += 10;

эхо $что угодно;

wp_die(); // это необходимо для немедленного завершения и возврата правильного ответа
}

Вы также можете создавать отдельные файлы JavaScript для своих действий Ajax. Вам просто нужно обязательно использовать URL-адрес Ajax, чтобы звонки не терялись.

Как использовать Ajax, работая с плагином-примером (3 шага)

Если вы хотите поэкспериментировать с 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- файл плагина с веб-сайта стандартного шаблона.

Шаг 3. Включите действия в свой код

Пример кода плагина, который мы используем, построен с помощью объектно-ориентированного программирования (ООП). Это помогает программистам организовывать свой код и создает шаблон разработки, которым легко делиться и многократно использовать.

Кроме того, код поставляется со всеми файлами, необходимыми для разработки плагинов, включая файлы активации и деактивации в каталоге /includes/ . Вы также обнаружите, что при необходимости легко найти общедоступные и административные файлы.

Давайте взглянем на наш образец плагина, просмотрев начало файла plugin-name.php :

<?php

/**
* Загрузочный файл плагина
*
* Этот файл читается WordPress для создания информации о плагине в плагине.
* административная зона. Этот файл также включает в себя все зависимости, используемые плагином,
* регистрирует функции активации и деактивации и определяет функцию
* регистрирует функции активации и деактивации и определяет функцию
* который запускает плагин.
*
* @ссылка http://example.com
* @с 1.0.0
* @package Plugin_Name
*
* @wordpress-плагин
* Название плагина: Шаблон плагина WordPress
* URI плагина: http://example.com/имя-плагина-uri/
* Описание: Это краткое описание того, что делает плагин. Он отображается в административной области WordPress.
* Версия: 1.0.0
* Автор: ваше имя или ваша компания
* URI автора: http://example.com/
* Лицензия: GPL-2.0+
* URI лицензии: http://www.gnu.org/licenses/gpl-2.0.txt
* Текстовый домен: имя-плагина
* Путь к домену: /languages
*/

Вся информация, содержащаяся в этой части кода, важна для регистрации вашего плагина в WordPress. Таким образом каталог плагинов будет знать, что отображать для вашего плагина.

Теперь вам нужно сделать несколько вещей, чтобы соединить все точки, в том числе:

  • Убедитесь, что ваш URL-адрес Ajax доступен для вашего скрипта. Для этого вы можете использовать wp_localize_script().
  • Создайте класс plugin-name с классом Plugin-Name{} в вашем файле plugin-name.php . Здесь вы будете определять свои крючки действий.
  • Создайте соответствующую функцию JavaScript в файле plugin-name.js .

Одним из важных элементов подхода Ajax является определение того, кто может использовать каждую функцию, особенно при создании интерактивности внешнего интерфейса. Мы подключим внешнее действие с помощью примера кода из WordPress:

если ( 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');
// Добавляем сюда другие внутренние хуки действий
} еще {
// Добавьте здесь обработчики действий внешнего интерфейса, отличные от Ajax
}

Обратите внимание на несколько вещей в этом примере. Во-первых, эти действия будут доступны всем на сайте, вне зависимости от того, вошли они в учетную запись или нет. На это указывает вызов wp_ajax_nonpriv_(). Во-вторых, вы можете видеть, что во время внешних действий также подключаются внутренние административные действия.

Чтобы понять процесс, происходящий в этом наборе действий, также важно знать, что my_frontend_action вызовет PHP-функцию my_frontend_action_callback().

Шаг 4: протестируйте и отладьте свой плагин

После того, как вы настроите все хуки действий и соответствующие функции, которые вам нужны, вы захотите протестировать и, возможно, отладить свой плагин (если есть какие-либо проблемы). Ваш веб-хост может предложить инструмент отладки как часть своего пакета хостинга.

Здесь, в WP Engine, мы предоставляем журнал ошибок WP Engine, чтобы помочь вам найти проблемные места.

В нашем журнале ошибок с помощью цветовой кодировки показаны все ошибки в коде вашего сайта и места, где они взаимодействуют с нашими серверами или другими частями вашего сайта. Это значительно упрощает устранение неполадок, независимо от того, работаете ли вы с Ajax или с чем-то еще.

Изучите другие ресурсы и инструменты WP Engine

Теперь, когда вы находитесь на пути к созданию удивительных плагинов WordPress с помощью Ajax, вы можете оценить, какие еще инструменты вам понадобятся. WP Engine предлагает полную платформу цифрового опыта (DXP) и поможет вам создавать новые плагины для WordPress.

Независимо от того, заинтересованы ли вы в нашем журнале ошибок WP Engine, чтобы вы могли запустить плагин без ошибок, или вам просто нужен надежный и безопасный хостинг WordPress, мы предлагаем широкий выбор планов и ресурсов для вас!