Использование AJAX с PHP на вашем сайте WordPress с вашим собственным плагином
Опубликовано: 2021-07-23
В этой статье мы обсудим AJAX с PHP для вашего сайта WordPress.
AJAX — это метод веб-разработки, который помогает пользователям разрабатывать интерактивные приложения на веб-сайте. Он обеспечивает пользователям более быструю и плавную работу в Интернете. Это позволяет пользователям вносить изменения или обновлять содержимое на веб-странице без перезагрузки или обновления страниц. Для работы с AJAX необходимо знать различные языки программирования.
Что такое АЯКС?
AJAX расшифровывается как «Асинхронный JavaScript и XML». Как упоминалось ранее, он используется для создания развлекательных, постоянно меняющихся и интерактивных веб-приложений.
Некоторыми из популярных примеров веб-приложений, разработанных с помощью AJAX и связанных с ним технологий, являются Карты Google, функция автозаполнения в поиске Google, комментарии и отметки «Нравится» в различных сообщениях в социальных сетях и многие другие.
Основы AJAX
Ajax с помощью различных языков программирования, таких как JavaScript, HTML, CSS и XML, позволяет быстрее разрабатывать и улучшать веб-приложения и веб-сайты. Помимо этих языков программирования, для разработки веб-приложений также используются AJAX с PHP и другие серверные языки.
Он использует JavaScript для отображения содержимого, тогда как CSS помогает в представлении и объектной модели документа. Он также использует XHTML для контента.
В традиционных веб-приложениях или веб-страницах обмен информацией с сервером происходит синхронно. С другой стороны, в веб-приложениях, которые были разработаны для использования AJAX, когда происходит событие, такое как нажатие кнопки или заполнение формы, JavaScript создает запрос XMLHTTP и отправляет его на сервер в формате XML.
Сервер обрабатывает запрос, создает ответ на стороне сервера и отправляет его обратно в браузер. Затем JavaScript обрабатывает ответ, и содержимое на текущем экране обновляется. Поскольку перезагрузка или обновление страниц не требуется, пользователи не будут знать о передаче какой-либо информации на сервер.
Навыки, необходимые для работы с AJAX в WordPress
Как следует из приведенного выше обсуждения, пользователям требуются следующие навыки для правильного использования AJAX.
• Знание языков программирования, таких как JavaScript, HTML и CSS.
• Знание серверных языков, таких как PHP и др.
• Основы XML или JSON
Преимущества АЯКС
Различные преимущества AJAX обсуждаются ниже.
• Он почти поддерживает все браузеры, используемые в настоящее время.
• Это предполагает более быстрое время отклика, что означает улучшенный пользовательский интерфейс с точки зрения скорости и производительности.
• Для использования доступны библиотеки JavaScript с открытым исходным кодом, такие как Prototype, jQuery и т. д.
• Сокращает время между клиентом и сервером, поэтому экономится время как пользователей, так и сервера
• Поскольку серверу не требуется обрабатывать большое количество данных, он помогает сократить использование полосы пропускания и оптимизировать работу сети.
• Поскольку запрос XMLHTTP используется для извлечения данных, пользователи могут выполнять несколько задач одновременно.
АЯКС в WordPress
AJAX используется в серверной части WordPress, в результате чего всякий раз, когда в сообщения или категории вносятся какие-либо изменения, или всякий раз, когда администратор модерирует комментарии, обновления будут производиться мгновенно. AJAX в основном используется с JQuery в WordPress. Процесс, в котором WordPress использует AJAX, выглядит следующим образом.
• Когда делается запрос, он проходит через файл 'admin-ajax.php', расположенный в папке 'wp-admin'.
• Эти запросы должны предоставлять по крайней мере часть данных, обычно называемую «действием», с использованием метода «получить» или «отправить».
• Это действие побуждает код в файле 'admin-ajax.php' создать две ловушки, а именно, 'wp_ajax_my_action' и 'wp_ajax_nopriv_my_action'. «my_action» в этих хуках указывает значение переменной «action» метода «get» или «post».
• В то время как первый хук предназначен для действий, выполняемых вошедшими в систему пользователями, второй хук предназначен исключительно для вышедших из системы пользователей.
• Перехваченные функции должны быть спланированы так, чтобы их постепенное снижение было прекращено, что гарантирует, что даже если JavaScript отключен в браузерах, коды все равно будут работать.
Создайте плагин WordPress AJAX
В этом разделе давайте возьмем пример базового плагина WordPress AJAX под названием «Счетчик лайков». Этот плагин включает в себя следующие функции:
• Он мгновенно обновляется во внешнем интерфейсе
• Вошедшие в систему пользователи могут лайкать сообщения.
• Если вышедшие из системы пользователи попытаются поставить лайк публикации, на экране появится сообщение об ошибке.
• Этот плагин помогает вести общий учет количества «лайков» и отображает их
Во-первых, необходимо создать и активировать пустой плагин WordPress. Для создания плагина необходимо выполнить следующие шаги.
Шаг 1 : Выберите уникальное имя для плагина. Можно проверить репозитории плагинов, чтобы убедиться, что предложенное имя плагина уже не используется. Обычно разработчики плагинов выбирают название плагина в зависимости от функции, которую он должен выполнять.
Шаг 2 : На следующем шаге необходимо создать файл PHP с использованием выбранного имени плагина. Поскольку пользователям, которые будут устанавливать этот плагин, потребуется поместить файл PHP в каталог плагинов WordPress «wp-content/plugins-» для его установки, плагины не могут иметь одно и то же имя для файлов PHP.
Поэтому имя файла плагина также должно быть уникальным, чтобы избежать конфликта с другим плагином в репозитории. Можно использовать свое имя или название своей компании в префиксе, чтобы создать уникальное имя для файла PHP.
Шаг 3 : Следует отметить, что плагин WordPress должен содержать хотя бы один файл PHP вместе с JavaScript, CSS, языками и файлами изображений. Если присутствует несколько файлов, выберите уникальное имя для каталога и предпочтительное имя для основного файла PHP.
Поместите все файлы плагина в созданный каталог и попросите пользователей плагина загрузить весь этот каталог в каталог «wp-content/plugins/».
Установка WordPress может быть настроена на изменение стандартного каталога плагинов «wp-content/plugins/». Следовательно, необходимо использовать plugin_dir_path() и plugin_url() или абсолютный путь и URL-адреса в их PHP-коде.
Шаблон публикации темы
После создания плагина нужно найти шаблон сообщения «single.php» своей темы. Его можно найти в корневом каталоге активной темы. Он используется, когда запрашивается один пост; где вы хотите разместить свой плагин «Post Like Counter». Файл должен быть открыт для редактирования.
Подготовьте шаблон сообщения для вызова AJAX.
Ссылка должна быть создана, чтобы пользователи могли лайкать сообщения. Если пользователи включили JavaScript, они могут использовать файлы JavaScript (которые будут созданы позже) или напрямую перейти по ссылке. Для этого вставьте следующий код в файл single.php. Этот код также можно добавить в любую из частей шаблона, содержащихся в файле single.php.
// Значение мета-ключа «лайки» будет хранить общее количество лайков для определенного сообщения, оно будет показывать 0, если это пустая строка ID, "нравится", правда); $лайки = ($лайки == "") ? 0 : $ нравится; ?> У этого поста <span id='like_counter'></span> лайков<br> // Ссылка на файл admin-ajax.php. Проверка одноразового номера включена для дополнительной безопасности. Обратите внимание на класс user_like для клиентов с поддержкой JS. ID.'&nonce='.$nonce); echo '<a class="user_like" data-nonce="' . $nonce . '">ID . '" href="' . $ ссылка . '">Нравится этот пост</a>'; ?>
Обращение к вызову Ajax без JavaScript
Нажав на ссылку, созданную на предыдущем шаге, вы будете перенаправлены на скрипт «admin-ajax.php»; однако они не найдут никакого полезного результата, так как функция не создана для запуска действия. Чтобы создать функцию в файле плагина и добавить ее к хукам, созданным WordPress, вставьте следующий код.
<?php // используется здесь только для включения подсветки синтаксиса. Оставьте это, если он уже включен в файл вашего плагина.
// определяем действия для двух созданных хуков, сначала для вошедших в систему пользователей, а затем для вышедших из системы
add_action("wp_ajax_my_user_like", "my_user_like");
add_action("wp_ajax_nopriv_my_user_like", "please_login");
// определяем функцию, которая будет запущена для зарегистрированных пользователей
функция my_user_like() {
// одноразовая проверка на дополнительный уровень безопасности, функция завершится, если она не пройдена
if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_like_nonce")) {
exit("Гав Гав Гав");
}
// получаем like_count для поста, устанавливаем 0, если он пустой, увеличиваем на 1 при регистрации клика
$like_count = get_post_meta($_REQUEST["post_id"], "лайки", true);
$like_count = ($like_count == ') ? 0 : $like_count;
$new_like_count = $like_count + 1;
// Обновить значение 'лайков' мета-ключ для указанного поста, создает новые метаданные для поста, если их не существует
$like = update_post_meta($_REQUEST["post_id"], "лайки", $new_like_count);
// Если вышеуказанное действие не выполняется, тип результата устанавливается на 'error' и like_count устанавливается на старое значение, в случае успеха обновляется до new_like_count
если ($ как === ложь) {
$result['тип'] = "ошибка";
$ результат['like_count'] = $like_count;
}
еще {
$result['type'] = "успех";
$result['like_count'] = $new_like_count;
}
// Проверяем, было ли действие запущено через вызов Ajax. Если да, будет запущен код JS, в противном случае пользователь будет перенаправлен на страницу сообщения.
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$ результат = json_encode ($ результат);
эхо $результат;
}
еще {
header("Местоположение: ".$_SERVER["HTTP_REFERER"]);
}
// не забывайте заканчивать свои скрипты функцией die() - очень важно
умри();
}
// определяем функцию, которая будет запускаться для вышедших из системы пользователей
функция please_login() {
echo "Вы должны войти, чтобы поставить лайк";
умри();
}
Если все получится, то когда авторизованный пользователь нажмет на ссылку «Нравится этот пост», количество лайков будет обновлено автоматически. С другой стороны, если JavaScript отключен, страница будет обновлена, отображая обновленное количество лайков.
Добавление поддержки JavaScript
Добавление поддержки JavaScript может упростить задачу. Для использования AJAX с PHP в WordPress необходимо поставить в очередь библиотеку jQuery вместе с пользовательским файлом JavaScript плагина. Для этого напишите следующий код в файле plugin.
admin_url('admin-ajax.php' )));
// поставить в очередь библиотеку jQuery и скрипт, который вы зарегистрировали выше
wp_enqueue_script('jquery');
wp_enqueue_script('liker_script');
}
Далее необходимо создать файл Javascript 'liker_script.js', который в дальнейшем будет загружен в корневую папку плагина. Следующий код используется для создания файла liker_script.js.
jQuery(документ).готов(функция() {
jQuery(".user_like").click(функция(е) {
e.preventDefault();
post_id = jQuery(this).attr("data-post_id");
nonce = jQuery(this).attr("data-nonce");
jQuery.ajax({
тип : "пост",
тип данных: "json",
URL-адрес: myAjax.ajaxurl,
данные: {действие: "my_user_like", post_id: post_id, nonce: nonce},
успех: функция (ответ) {
если (ответ.тип == "успех") {
jQuery("#like_counter").html(response.like_count);
}
еще {
Сообщить("Ваш лайк не может быть добавлен");
}
}
});
});
});
Как реализовать AJAX в темах WordPress
Следующие шаги помогут реализовать AJAX с PHP в темах WordPress. Например, предположим, что наша работа заключается в отображении категорий в раскрывающемся меню, и при нажатии на «Родительскую категорию» подкатегории появятся в другом раскрывающемся списке. Эта задача будет выполнена с помощью следующих шагов
Шаг 1 : Выберите «категории» в левой части панели инструментов и вставьте название категорий в поле, появившееся справа, и вставьте ярлык категории ниже. Если создается родительская категория, выберите «нет», или, если создаются подкатегории, выберите родительскую категорию из вариантов.
Шаг 2. На этом этапе будет создан шаблон WordPress, в котором будут реализованы функции AJAX. Откройте новый файл PHP и сохраните его. Вставьте следующий код в созданную страницу.
В приведенном выше коде «Имя шаблона: внедрить Ajax» — это имя шаблона WordPress, а функции «get_header()» и «get_footer()» используются для отображения содержимого верхнего и нижнего колонтитула страницы.
Во-первых, файл библиотеки jQuery необходимо включить на страницу, что поможет добавить материал AJAX. AJAX с PHP можно либо использовать любую библиотеку JavaScript, либо вызывать AJAX с необработанным JavaScript. В следующем примере для реализации AJAX используется библиотека JavaScript jQuery.
Шаг 3 : Добавьте файл jQuery в шаблон и вызовите функцию wp_dropdown_categories, чтобы можно было получить родительские категории в раскрывающемся меню.
#контент{ширина:авто; высота: 400 пикселей; поле: 50px;}
<дел>
</div>
<?php
Шаг 4 : Вставьте код jQuery, чтобы получить идентификатор выбранной основной категории. Отправьте его в файл functions.php, чтобы получить подкатегории под выбранным идентификатором родительской категории. Затем результаты можно отправить обратно на страницу, не обновляя ее.
$(функция(){
$('#main_cat').change(функция(){
var $mainCat=$('#main_cat').val();
// вызов аякса
$("#sub_cat").empty();
$.ajax({
URL-адрес: "/wp-admin/admin-ajax.php",
тип: 'ПОСТ',
данные: 'action=my_special_action&main_catid=' + $mainCat,
успех: функция (результаты)
{
// оповещение (результаты);
$("#sub_cat").removeAttr("отключено");
$("#sub_cat").append(результаты);
}
});
}
);
});
В приведенном выше коде код добавляется в событие изменения раскрывающегося списка основных категорий с идентификатором «#main_cat».
var $mainCat=$('#main_cat').val();
Функция .val () помогает получить выбранное значение параметра из раскрывающегося списка и сохранить его в переменной «$ mainCat».
$("#sub_cat").empty();
Перед вызовом AJAX необходимо освободить раскрывающийся список подкатегории «#sub_cat», если он содержит какое-либо предыдущее значение.
Следующая строка jQuery поможет в вызове функций AJAX jQuery. Проверьте параметры функции AJAX, указанные в разделе ниже.
url:"bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php",
тип: 'ПОСТ',
Чтобы AJAX работал в WordPress, используется параметр «URL». Поэтому запросы будут отправляться в файл admin-ajax.php. Далее будут вызываться хуки в файле functions.php для получения опубликованных данных, которые были отправлены на URL: '/wp-admin/admin-ajax.php'
Для отправки значений вместе с запросом используется параметр data. В данном примере используются два аргумента с параметром data — action и main_catid.
Шаг 5 : В файле functions.php для перехвата действия используется следующий код.
add_action('wp_ajax_my_special_action', 'my_action_callback');
В приведенном выше действии у ловушки есть два аргумента. В первом аргументе wp_ajax_my_special_action значение wp_ajax_ отправляется вместе с параметром данных action. Во втором аргументе my_action_callback данные будут обработаны, а результаты отправлены обратно.
Этот хук действия выше предназначен для зарегистрированных пользователей. Для вышедших из системы пользователей можно подключить следующее действие
add_action('wp_ajax_nopriv_my_special_action', 'my_action_callback');
Окончательный код после добавления хуков для пользователей и функции обратного вызова выглядит следующим образом.
функция реализовать_ajax() {
если(isset($_POST['main_catid']))
{
$categories= get_categories('child_of='.$_POST['main_catid'].'&hide_empty=0');
foreach ($ категории как $ кошка) {
$option .= 'term_id.'">';
$option .= $cat->cat_name;
$option .= '('.$cat->category_count.')';
$опция .= '';
}
echo 'Шегли...'.$option;
умри();
} // конец, если
}
add_action('wp_ajax_my_special_ajax_call', 'implement_ajax');
add_action('wp_ajax_nopriv_my_special_ajax_call', 'implement_ajax');//для пользователей, которые не вошли в систему.
Шаг 6. На этом шаге создайте новую страницу на панели инструментов и назначьте ей шаблон. После загрузки страницы в браузере в ней будет загружен первый выпадающий список с родительскими категориями.
Поскольку второй раскрывающийся список пуст, выберите параметр в первом раскрывающемся списке, чтобы проверить, как он работает.
Таким образом, AJAX с PHP можно использовать на сайте WordPress с помощью недавно созданного плагина.