WordPress ajax

AJAX, это замечательная веб – технология, движущаяся нас за рамки простой структуры «нажмите на ссылку, перейдите на другую страницу» в Интернете 1.0.

AJAX, что означает Asynchronous Javascript и XML, позволяет веб – сайтам динамически выбирать и отображать содержимое без пользователя удаляясь от текущей страницы. Это приводит к гораздо более интерактивному опыту пользователей, и может ускорить процесс, так как нет надобности в загрузке целой новый веб – страницы. К счастью, использование AJAX довольно легко сделать из среды WordPress, и сегодня мы собираемся показать вам, как.

Зачем использовать AJAX?

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

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

Обзор: Как использовать AJAX в WordPress

  1. Измените свой собственный шаблон, чтобы включить форму или события JavaScript, которые будут представлять данные с помощью JQuery AJAX для admin-ajax.php включая любые данные, которые вы хотите передать. Убедитесь, что Jquery загружается.
  2. Определим функцию в вашей темы function.php.
  3. Добавим действие крюк AJAX для вашей функции.

Создание формы

Давайте начнем с создания простой формы на переднем конце для ввода новых данных о клиенте. В этом нет ничего сложного, просто вставьте этот код в теле html файла, код выполняет проверку is_user_logged_in ():

if (is_user_logged_in()):?>  <form type="post" action="" id="newCustomerForm">  <label for="name">Имя:</label> <input name="name" type="text" />  <label for="email">Почта:</label> <input name="email" type="text" />  <label for="phone">Телефон:</label> <input name="phone" type="text" />  <label for="address">Адрес:</label> <input name="address" type="text" />  <input type="hidden" name="action" value="addCustomer"/> <input type="submit"> </form> <br/><br/> <div id="feedback"></div> <br/><br/>

Единственное, что может выглядеть странным, что есть использование поля ввода скрытого под названием action – оно содержит имя функции, которое мы будем инициировать через AJAX.

PHP приемник

Затем откройте functions.php и добавьте следующую строку, чтобы убедиться, что Jquery загружается на вашем сайте:

wp_enqueue_script ( 'JQuery');

 

Базовая структура для написания вызова AJAX выглядит следующим образом:

function myFunction(){ //do something die(); } add_action('wp_ajax_myFunction', 'myFunction'); add_action('wp_ajax_nopriv_myFunction', 'myFunction');

 

Эти две последних строки крючки действия, которые говорят WordPress «У меня есть функция под названием myFunction, и я хочу, чтобы вы послушали ее, потому что она будет вызываться через интерфейс AJAX» – первый для пользователей уровня администратора, в то время как wp_ajax_nopriv_ является для пользователей, которые не вошли в систему. Вот полный код в functions.php, который мы будем использовать, чтобы вставить данные в специальной таблицы клиентов, которые мы объясним коротко:

wp_enqueue_script('jquery');  function addCustomer(){  global $wpdb;  $name = $_POST['name']; $phone = $_POST['phone']; $email = $_POST['email']; $address = $_POST['address'];  if($wpdb->insert('customers',array( 'name'=>$name, 'email'=>$email, 'address'=>$address, 'phone'=>$phone ))===FALSE){  echo "Ошибка";  } else { echo "Customer '".$name. "' успешно добавлено, строка ID = ".$wpdb->insert_id;  } die(); } add_action('wp_ajax_addCustomer', 'addCustomer'); add_action('wp_ajax_nopriv_addCustomer', 'addCustomer'); // на самом деле не нужна

 

Так же, как и прежде, мы объявили global $wpdb, чтобы дать нам прямой доступ к базе данных. Мы затем захватываем переменную POST, которая содержат данные формы. Окруженный в операторе IF функцию $ wpdb-> insert, мы используем для вставки данных в нашу таблицу. Поскольку WordPress предоставляет специальные функции для вставки регулярных постов и мета – данных, метод $ wpdb-> insert обычно используется только для пользовательских таблиц. Вы можете прочитать об этом на Кодексе, но в основном это принимает имя таблицы, которая будет вставлена, а затем с помощью array из column/value pairs.

=== FALSE проверяет, не удалась ли функция вставки, и если да, то он выдает “ошибка“. Если нет, то мы просто посылаем сообщение пользователю, что был добавлен Клиент X, и показываем переменную $wpdb-> insert_id, которая указывает на переменную auto-increment последней операции вставки, что произошло (предполагается, что вы установили поля, которые автоматически приращиваються, как идентификатор) .

И, наконец, die() переопределяет по умолчанию die(0), предоставленную WordPress – это не важно, как таковой, но без нее вы собираетесь получить 0 к концу, что бы отправить обратно в шаблон.

Javascript

Последним шагом является фактический Javascript, который будет инициировать вызов AJAX. Вы заметите, что в форме, которую мы добавили ранее, поле действия было оставлено пустым. Это потому, что мы будем отвергать с нашим вызовом AJAX. Общий способ сделать это такой:

jQuery.ajax({  type:"POST",  url: "/wp-admin/admin-ajax.php", // наш обработчик файла PHP  data: "myDataString",  success:function(results){  // что-то делать с возвращаемыми данными  }  )};

 

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

<script type="text/javascript"> jQuery('#newCustomerForm').submit(ajaxSubmit);  function ajaxSubmit(){  var newCustomerForm = jQuery(this).serialize();  jQuery.ajax({ type:"POST", url: "/wp-admin/admin-ajax.php", data: newCustomerForm, success:function(data){ jQuery("#feedback").html(data); } });  return false; } </script>

 

В первой строке мы прикрепили функцию ajaxSubmit формы, которую мы сделали раньше – так что, когда пользователь нажимает кнопку отправить, он проходит через нашу специальную функцию AJAX. Без этого наша форма ничего не будет делать. В нашей функции ajaxSubmit(), первое, что мы сделаем, чтобы serialize() форму. Это просто принимает все значения формы, и превращает их в одну длинную строку, которую наш PHP будет разобрать позже. Если все работает правильно, мы поместим возвращаемые данные в div с идентификатором обратной связи.

Вот и все. Сохраните все, обновите и попробуйте отправить некоторые данные формы.

Что нужно иметь в виду

Безопасность : Этот код не является производством готового и предназначен только для целей обучения. Мы оставили одну ключевую точку, это использование WP-nonce – разовый код, сгенерированный WordPress, который обеспечивает запрос AJAX, откуда он был призван; Ключ доступа. Без этого ваша функция эффективно может быть использована для вставки случайных данных. Атаки инъекции SQL не проблема, хотя, потому что мы перенаправили запросы через WordPress функцию $wpdb->insert – WordPress, которая очищает любые входы для вас и делает их безопасными.

Обновление таблицы клиентов: На данный момент мы только отправили обратно сообщение с подтверждением, но таблица клиентов не обновляется – вы будете видеть только дополнительные записи, если вы обновите страницу (такой вид теряет смысл, если делать это все через AJAX). Смотрите, если вы можете сделать новую функцию AJAX, которая может динамически выводить таблицу.

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

andreyex.ru

Wordpress ajax

Всем йоханга!
Сегодня будем решать не простую задачу добавления поста с лицевой части сайта на WordPress, да еще и с помощью ajax, и не просто поста, а поста произвольного типа. В одной из прошлых статей мы разобрались как быстро создать таксономии, посты произвольного типа, запилить к ним шаблоны и форму добавления, но этот случай добавления очень простой, работает на API плагина PODS и не освещает кучу подводных камней и сейчас мы это исправим и заодно разберемся как правильно юзать аякс в WordPress.

Итак, задача:

  • Сделать возможность добавления поста произвольного типа с фронт-энда, минуя админку.
  • Все должно работать без перезагрузки страницы, т.е. на аяксе.
  • Посты, помимо стандартных полей, имеют дополнительные поля, а также поле множественной загрузки картинок.
  • При добавлении, посты должны привязываться к терминам(элементам) таксономии, тоже произвольной.
  • Использовать можно только нативные механизмы WP.

У нас есть произвольный тип постов с полями:

  • заголовок(стандартное поле — post_title),
  • текст(стандартное — post_content),
  • миниатюра(стандартное поле типа файл, потом будем получать id загруженного файла — _thumbnail_id),
  • обычная строка(произвольное поле типа строка — string_field),
  • форматированный текст(произвольное, текстарея — text_field),
  • поле множественной загрузки файлов(произвольное типа файл, дополнительные поля добавляются с помощью jQuery — multifile_field).

Так же посты привязаны к двум произвольным таксономиям:

  • простая таксономия без вложенности, как тэги — custom_tax_like_tag,
  • таксономия с иерархией/вложенностью как у категорий — custom_tax_like_cat.

Причем если пост принадлежит к дочернему термину — он должен принадлежать и к родителю.
Жирным выделено название полей и слаги таксономий.

Решение: сделаем обычную форму со всеми полями, обработаем её отправку с помощью jQuery и плагина jQuery-forms, примем полученные данные по всем правилам работы ajax в WordPress, все проверим, добавим пост с полями и медиафайлами, привяжем к таксономиям и вернем ответ.

Начнем.

0. Подготовим WP для использования аякса:
В WP существует свой механизм работы с аяксом и раз мы используем только стандартное API, то будем делать все по правилам.
Суем это в functions.php нашей темы:

add_action('wp_print_scripts','include_scripts'); // действие в котором прикрепим необходимые js скрипты и передадим данные   function include_scripts(){   wp_enqueue_script('jquery'); // добавим основную библиотеку jQuery   wp_enqueue_script('jquery-form'); // добавим плагин jQuery forms, встроен в WP   wp_enqueue_script('jquery-chained', '//www.appelsiini.net/projects/chained/jquery.chained.min.js'); // добавим плагин для связанных селект листов     wp_localize_script( 'jquery', 'ajaxdata', // функция для передачи глобальных js переменных на страницу, первый аргумент означет перед каким скриптом вставить переменные, второй это название глобального js объекта в котором эти переменные будут храниться, последний аргумент это массив с самими переменными  			array(    				'url' => admin_url('admin-ajax.php'), // передадим путь до нативного обработчика аякс запросов в wp, в js можно будет обратиться к ней так: ajaxdata.url   				'nonce' => wp_create_nonce('add_object') // передадим уникальную строку для механизма проверки аякс запроса, ajaxdata.nonce  			)  		);  }

Теперь у нас подключены нужные плагины и определены глобальные js переменные для граммотной работы с аяксом.

1. Запиливаем форму добавления:
Так как у нас есть вложенная таксономия, для удобства воспользуемся плагином jQuery chained, это для того, чтобы после выбора родительского термина, в следующий селектлист нам добавились только дочерние термины к выбранному. Еще сделаем ссылку, которая будет добавлять нам поля типа файл, для мультизагрузки картинок.
Пусть поля тайтл, постконтент и выборы терминов таксономий будут обязательны.

Ахтунг! Нельзя чтобы атрибут name у контроллов выбора терминов таксономии был таким же как слаг таксономии — вордпресс может пытаться отфильтровать контент по этой таксономии вместо того, что мы хотим.

Код формы:

<?php  // подготовим актуальные данные таксономий  $cats = get_terms('custom_tax_like_cat', 'orderby=name&hide_empty=0&parent=0'); // получим все термины(элементы) таксономии с иерархией  foreach ($cats as $cat) { // пробежим по каждому полученному термину   $parents.="<option value='$cat->term_id' />$cat->name</option>"; // суем id и название термина в строку для вывода внутри тэга select   $childs_array = get_terms('custom_tax_like_cat', 'orderby=name&hide_empty=0&parent='.$cat->term_id); // возьмем все дочерние термины к текущему  	foreach ($childs_array as $child){  		$childs.="<option value='$child->term_id' class='$cat->term_id' />$child->name</option>"; // делаем то же самое, класс должен быть равным id родительского термина чтобы плагин chained работал  	}  }  $tags_array = get_terms('custom_tax_like_tag', 'orderby=none&hide_empty=0&parent=0'); // получим все термины таксономии без вложенности  foreach ($tags_array as $tag) { // пробежим по каждому   $tags .= '<label><input type="radio" name="tag" value="'.$tag->term_id.'">'.$tag->name.'</label>'; // суем все в radio баттоны  }  ?>  <?php // Выводим форму ?>  <form method="post" enctype="multipart/form-data" id="add_object">  	<label>Кастом категории-родители:  		<select id="parent_cats" name="parent_cats" required>  			<option value="">Не выбрано</option>  			<?php echo $parents; // выводим все родительские термины ?>  		</select>  	</label>    	<label>Кастом категории-дети:  		<select id="child_cats" name="child_cats" required>  			<option value="">Не выбрано</option>  			<?php echo $childs; // выводим все дочерние термины, плагин chained сам покажет только нужные элементы в зависимости от выбранного родительского термина ?>  		</select>  	</label>    	Кастом тэги   	<?php echo $tags; // выводим термины таксономии без иерархии в radio ?>    	<label>Тайтл(стандартное) <input type="text" name="post_title" required/></label>  	<label>Пост контент(стандартное) <textarea name="post_content" required/></textarea></label>  	<label>Поле типа строка(произвольное) <input type="text" name="string_field"/></label>  	<label>Пост типа текст(произвольное) <textarea name="text_field"/></textarea></label>  	<label>Миниатюра(стандартное): <input type="file" name="img"/></label>  	<label id="first_img" class='imgs'>Дополнительные фото(произвольное): <input type='file' name='imgs[]'/></label>  	<a href="#" id="add_img">Загрузить еще фото</a>  	<input type="submit" name="button" value="Отправить" id="sub"/>  	<div id="output"></div> <?php // сюда будем выводить ответ ?>

2. Перехват отправки формы и подготовка данных:
Суньте это куда удобнее: прямо на страницу или в специальный js файл для кастом скриптов =)

function ajax_go(data, jqForm, options) { //ф-я перед отправкой запроса   	jQuery('#output').html('Отправляем...'); // в див для ответа напишем "отправляем.."   	jQuery('#sub').attr("disabled", "disabled"); // кнопку выключим  }  function response_go(out) { // ф-я обработки ответа от wp, в out будет элемент success(bool), который зависит от ф-и вывода которую мы использовали в обработке(wp_send_json_error() или wp_send_json_success()), и элемент data в котором будет все что мы передали аргументом к ф-и wp_send_json_success() или wp_send_json_error()  	console.log(out); // для дебага  	jQuery('#sub').prop("disabled", false); // кнопку включим  	jQuery('#output').html(out.data); // выведем результат  }  jQuery(document).ready(function(){ // после загрузки страницы  	jQuery("#child_cats").chained("#parent_cats"); // подключаем плагин для связи селект листов с терминами вложенной таксономии   	add_form = jQuery('#add_object'); // запишем форму в переменную   	var options = { // опции для отправки формы с помощью jquery form   		data: { // дополнительные параметры для отправки вместе с данными формы   			action : 'add_object_ajax', // этот параметр будет указывать wp какой экшн запустить, у нас это wp_ajax_nopriv_add_object_ajax   	nonce: ajaxdata.nonce // строка для проверки, что форма отправлена откуда надо   	},   	dataType: 'json', // ответ ждем в json формате   	beforeSubmit: ajax_go, // перед отправкой вызовем функцию ajax_go()   	success: response_go, // после получении ответа вызовем response_go()   	error: function(request, status, error) { // в случае ошибки   	console.log(arguments); // напишем все в консоль   	},   	url: ajaxdata.url // куда слать форму, переменную с url мы определили вывели в нулевом шаге    };    add_form.ajaxForm(options); // подрубаем плагин jquery form с опциями на нашу форму      jQuery('#add_img').click(function(e){ // по клику на ссылку "Добавить еще фото"   e.preventDefault(); // выключим стандартное поведение ссылки   jQuery(this).before("<label class='imgs'>Дополнительные фото(произвольное) <input type='file' name='imgs[]'/></label>"); // добавим перед ссылкой еще один инпут типа файл с таким же нэймом   });   });

3. Обработка данных и добавление поста:
Это тоже в functions.php

add_action( 'wp_ajax_nopriv_add_object_ajax', 'add_object' ); // крепим на событие wp_ajax_nopriv_add_object_ajax, где add_object_ajax это параметр action, который мы добавили в перехвате отправки формы, add_object - ф-я которую надо запустить  add_action('wp_ajax_add_object_ajax', 'add_object'); // если нужно чтобы вся бадяга работала для админов  function add_object() {  	$errors = ''; // сначала ошибок нет    	$nonce = $_POST['nonce']; // берем переданную формой строку проверки  	if (!wp_verify_nonce($nonce, 'add_object')) { // проверяем nonce код, второй параметр это аргумент из wp_create_nonce  		$errors .= 'Данные отправлены с левой страницы 
'; // пишим ошибку } // запишем все поля $parent_cat = (int)$_POST['parent_cats']; // переданный id термина таксономии с вложенностью (родитель) $child_cat = (int)$_POST['child_cats']; // id термина таксономии с вложенностью (его дочка) $tag = (int)$_POST['tag']; // id обычной таксономии $title = strip_tags($_POST['post_title']); // запишем название поста $content = wp_kses_post($_POST['post_content']); // контент $string_field = strip_tags($_POST['string_field']); // произвольное поле типа строка $text_field = wp_kses_post($_POST['text_field']); // произвольное поле типа текстарея // проверим заполненность, если пусто добавим в $errors строку if (!$parent_cat) $errors .= 'Не выбрано "Кастом категория-родитель"
'; if (!$child_cat) $errors .= 'Не выбрано "Кастом категория-ребенок xD"
'; if (!$tag) $errors .= 'Не выбрано "Кастом тэг"
'; if (!$title) $errors .= 'Не заполнено поле "Тайтл"
'; if (!$content) $errors .= 'Не заполнено поле "Пост контент"
'; // далее проверим все ли нормально с картинками которые нам отправили if ($_FILES['img']) { // если была передана миниатюра if ($_FILES['img']['error']) $errors .= "Ошибка загрузки: " . $_FILES['img']['error'].". (".$_FILES['img']['name'].")
"; // серверная ошибка загрузки $type = $_FILES['img']['type']; if (($type != "image/jpg") && ($type != "image/jpeg") && ($type != "image/png")) $errors .= "Формат файла может быть только jpg или png. (".$_FILES['img']['name'].")
"; // неверный формат } if ($_FILES['imgs']) { // если были переданны дополнительные картинки, пробежимся по ним в цикле и проверим тоже самое foreach ($_FILES['imgs']['name'] as $key => $array) { if ($_FILES['imgs']['error'][$key]) $errors .= "Ошибка загрузки: " . $_FILES['imgs']['error'][$key].". (".$key.$_FILES['imgs']['name'][$key].")
"; $type = $_FILES['imgs']['type'][$key]; if (($type != "image/jpg") && ($type != "image/jpeg") && ($type != "image/png")) $errors .= "Формат файла может быть только jpg или png. (".$_FILES['imgs']['name'][$key].")
"; } } if (!$errors) { // если с полями все ок, значит можем добавлять пост $fields = array( // подготовим массив с полями поста, ключ это название поля, значение - его значение 'post_type' => 'my_custom_post_type', // нужно указать какой тип постов добавляем, у нас это my_custom_post_type 'post_title' => $title, // заголовок поста 'post_content' => $content, // контент ); $post_id = wp_insert_post($fields); // добавляем пост в базу и получаем его id update_post_meta($post_id, 'string_field', $string_field); // заполняем произвольное поле типа строка update_post_meta($post_id, 'text_field', $text_field); // заполняем произвольное поле типа текстарея wp_set_object_terms($post_id, $parent_cat, 'custom_tax_like_cat', true); // привязываем к пост к таксономиям, третий параметр это слаг таксономии wp_set_object_terms($post_id, $child_cat, 'custom_tax_like_cat', true); wp_set_object_terms($post_id, $tag, 'custom_tax_like_tag', true); if ($_FILES['img']) { // если основное фото было загружено $attach_id_img = media_handle_upload( 'img', $post_id ); // добавляем картинку в медиабиблиотеку и получаем её id update_post_meta($post_id,'_thumbnail_id',$attach_id_img); // привязываем миниатюру к посту } if ($_FILES['imgs']) { // если дополнительные фото были загружены $imgs = array(); // из-за того, что дефолтный массив с загруженными файлами в пхп выглядит не так как нужно, а именно вся инфа о файлах лежит в разных массивах но с одинаковыми ключами, нам нужно создать свой массив с блэкджеком, где у каждого файла будет свой массив со всеми данными foreach ($_FILES['imgs']['name'] as $key => $array) { // пробежим по массиву с именами загруженных файлов $file = array( // пишем новый массив 'name' => $_FILES['imgs']['name'][$key], 'type' => $_FILES['imgs']['type'][$key], 'tmp_name' => $_FILES['imgs']['tmp_name'][$key], 'error' => $_FILES['imgs']['error'][$key], 'size' => $_FILES['imgs']['size'][$key] ); $_FILES['imgs'.$key] = $file; // записываем новый массив с данными в глобальный массив с файлами $imgs[] = media_handle_upload( 'imgs'.$key, $post_id ); // добавляем текущий файл в медиабиблиотека, а id картинки суем в другой массив } update_post_meta($post_id,'multifile_field',$imgs); // привязываем все картинки к посту } } if ($errors) wp_send_json_error($errors); // если были ошибки, выводим ответ в формате json с success = false и умираем else wp_send_json_success('Все прошло отлично! Добавлено ID:'.$post_id); // если все ок, выводим ответ в формате json с success = true и умираем die(); // умрем еще раз на всяк случ }

После того как форму отправят, по переданному параметру action вордпресс поймет какой экшн запустить, а именно wp_ajax_add_object_ajax и выполнит нашу функцию add_object(), а дальше все просто.

Ахтунг! Если вы создавали тип постов с помощью плагина Pods, убедитесь что тип постов не имеет обязательных дополнительных полей, иначе функция wp_insert_post вернет кусок несчастья, пост добавится не полностью и ответ в нужном формате тоже не придет.

4. Примечания:

  • Я специально усложнил все насколько смог, чтобы были примеры на все случаи жизни. Очевидно, что для добавления простого поста все проще, но по аналогии.
  • Все таксономии и произвольный тип постов были созданы с помощью плагина Pods Framework за 5 минут. Как работать с этим плагином и какие кнопки нажимать читайте здесь. Если обязательные поля нужны, то для добавления используйте api плагина pods.
  • Очень полезно будет прочитать про ajax в wordpress у Камы.

Ну вот и все. Мы запилили супер добавление кастом постов с произвольными полями, картинками и привязкой к таксономиям через ajax. оО

Шарьте статью, плюсуйте, спрашивайте, всем мир, развлекайтесь)

dontforget.pro

Параметры действия

В предыдущем примере, параметр действия spyr_plugin_do_ajax_request отвечает за связь между файлом JavaScript и кодом PHP. Рекомендуется все действия, включая и это, использовать с префиксами; таким образом, оно становится уникально и легко может быть идентифицировано. Сделать так, чтобы было видно, что оно принадлежит плагину WordPress.

Отдельные действия Ajax для WordPress

Существует два отдельных действия Ajax для WordPress, которые мы можем использовать.
Во-первых, wp_ajax_$action, которое обрабатывает запрос Ajax, если пользователь вошел в систему.
Во-вторых, wp_ajax_nopriv_$action, которое обрабатывает запрос Ajax, если пользователь не вошел в систему, и не имеет никаких привилегий.

Исходя из наших предыдущих примеров, нам нужно добавить эти обращения действий в наш плагин следующим образом:

Теперь, когда мы знакомы с основными принципами того, как события Ajax взаимодействуют с WordPress, давайте рассмотрим реальный пример. Давайте создадим простой плагин, который позволит администраторам удалять определенные записи на стороне клиента.

Плагин Ajax для удаления записей

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

  • Добавления файла JavaScript со скриптом Ajax;
  • Добавления в каждую запись ссылки, которая при нажатии будет удалять запись;
  • Обработки Ajax-запроса к PHP;
  • Обработки клика кнопки с помощью JQuery;
  • Добавления скрипта в очередь обработки.

Обеспечение безопасности всегда стоит на первом месте. Поэтому мы должны проверить, имеет ли текущий пользователь достаточные права, чтобы видеть ссылку «Удалить«. Мы также должны убедиться, что мы имеем дело с одиночной записью, в противном случае нет никакого смысла добавлять ссылку «Удалить«.

Если оба условия выполняются, мы переходим к обработке скрипта, который содержит код JavaScript для обработки того, что происходит после нажатия ссылку. Обратите особое внимание на то, как протокол используется на клиентской стороне сайта.

Мы должны соответствовать политике Ajax, согласно которой запросы и ответы должны иметь то же происхождение. Все запросы и ответы Ajax должны обрабатываться с того же домена; и протоколы также должны соответствовать.

В WordPress можно установить протокол https в панели администрирования вашего сайта, задав для параметра «FORCESSLADMIN» значение ‘true’ в конфигурационном файле WordPress. Отправка запроса с адреса http://example.com/sample-post/ на адрес https://example.com/wp-admin/admin-ajax.php не будет работать. Даже если мы установили https:// на стороне сервера, мы можем выполнить вызов admin-ajax.php без https://.

Наконец, последняя значимая строка кода выводит динамические переменные, которые будут использоваться в ajax-delete-posts.js:

Добавление ссылки «Удалить» к содержимому страницы

Коротко и ясно. Cнова проверяем права доступа и убеждаемся, что мы просматриваем одиночную запись. Такие меры безопасности необходимы, и к этому вы должны привыкнуть. Далее создаем nonce и привязываем его к действию; обратите внимание на специальный формат.

Он использует следующую структуру, префикс_плагин-действие-идентификатор, где префикс — это spyr, adp = Ajax Delete Post, действие — это наше действие удаления, а идентификатор — ID удаляемого поста. Это не обязательно, но такой формат рекомендуется при составлении плагинов.

Обратите внимание, что мы также добавляем к ссылке ID записи и nonce, используя при этом атрибуты данных HTML5. Последний шаг — это прикрепить сформированную ссылку к содержимому страницы.

Обработка запросов Ajax с помощью PHP и WordPress

Мы уже дошли до половины статьи. Далее мы рассмотрим код, который на самом деле управляет представлением вашего Ajax запроса. Изучите его внимательно, поскольку он опирается на то, как вы называете данные, представленные запросом JQuery для получения идентификатора записи (pid) и значения nonce:

spyr_adp_ajax_delete_post — это имя действия передается в ответ на запрос файла JavaScript. Это подразумевает, что полное имя для вашего действия будет wp_ajax_spyr_adp_ajax_delete_post. Значения ID и nonce записи также передаются с помощью файла JavaScript, и мы можем получить их от $_REQUEST.

Мы собираемся установить экземпляр объекта WP_Ajax_Response, который позволит нам вернуть необходимый XML-ответ. После этого вы можете считать этот результат и действовать в соответствии с ним через JQuery.

Опять же, перед удалением записи вы должны убедиться, что пользователь является администратором, и значения nonce совпадают. Вы должны создать различные ответы для каждого сценария, так чтобы вы точно знали, была ли запись удалена или нет.

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

На сервер для обработки запрос отправляется очень просто:

action=spyr_adp_ajax_delete_post&pid=403&nonce=878727e18a

В качестве примера сформированного XML-файла, полученного в ответе, можно рассмотреть следующее:

Обработка нажатия на кнопку с помощью JQuery

Единственное, что нам осталось рассмотреть, это создание кода JavaScript, который будет отправлять запрос и обработать ответ. Сам код довольно понятен, но я все же добавил в него комментарии, чтобы он стал еще проще для понимания:

Разбирается XML через JQuery очень просто, мы просматриваем XML на наличие элементов с помощью jQuery.find();, как если бы мы пытались найти элемент в HTML-документе.

Заключение

Как видите, выполнение запросов Ajax в ваших плагинах и темах WordPress является довольно простым процессом. В частности, это делается еще проще, благодаря двум специальным действиям: wp_ wp_ajax_$action и wp_ajax_nopriv_$action.

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

Если вы хотите получить дополнительную информацию по этой теме, ознакомьтесь с разделом Кодекса WordPress по Ajax и Ajax в плагинах.

Перевод статьи «Adding Ajax to Your WordPress Plugin» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Правильный способ

Для начала вам нужно создать Ajax запрос. Это можно сделать с помощью jQuery следующим способом:

<script type="text/javascript" >  jQuery(document).ready(function($) {     var data = {   action: 'ACTION_NAME',   first_name: 'Ivan',   last_name: 'Ivanov',   _ajax_nonce: '<?php echo wp_create_nonce( 'my_ajax_nonce' ); ?>'   };     // начиная с 2.8 ajaxurl всегда определяется в admin-ajax.php   // Если вам нужно, чтобы это работало на внешней стороне сайта для гостей и обычных пользователей, тогда удалите комментарий ниже:   // var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';   jQuery.post(ajaxurl, data, function(response) {   alert('Ответ сервера: ' + response);   });  });  </script>

Вы можете добавить jQuery код в любой файл в WordPress, но это не будет правильно, потому что лучше всего использовать хуки.

Зайдите в functions.php и добавьте туда следующую функцию:

function my_custom_ajax() {   ?>     <script type="text/javascript" >   jQuery(document).ready(function($) {     var data = {   action: 'ACTION_NAME',   first_name: 'Ivan',   last_name: 'Ivanov',   _ajax_nonce: '<?php echo wp_create_nonce( 'my_ajax_nonce' ); ?>'   };     // начиная с 2.8 ajaxurl всегда определяется в admin-ajax.php   // Если вам нужно, чтобы это работало на внешней стороне сайта для гостей и обычных пользователей, тогда удалите комментарий ниже:   // var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';   jQuery.post(ajaxurl, data, function(response) {   alert('Ответ сервера: ' + response);   });   });   </script>     <?php  }  add_action('wp_footer', 'my_custom_ajax');

wp_footer добавить jQuery код перед </body> в вашей теме.

Далее под функцией  add_action('wp_footer', 'my_custom_ajax') нужно дописать следующее:

//если вы хотите принимать запрос только от авторизованных пользователей, тогда добавьте этот хук  add_action('wp_ajax_ACTION_NAME', 'my_AJAX_processing_function');    //если вы хотите получить запрос от неавторизованных пользователей, тогда добавьте этот хук  add_action('wp_ajax_nopriv_ACTION_NAME', 'my_AJAX_processing_function');    //Если хотите, чтобы оба вариант работали, тогда оставьте оба хука

Хуки выше должны иметь уникальные имена на подобии wp_ajax_ACTION_NAME и wp_ajax_nopriv_ACTION_NAME. Вы, в свою очередь, можете назвать их как угодно, но не забудьте дописать название action (в этом примере это ACTION_NAME ), которые вы отправляется через Ajax.

Вторым аргументом для add_action() пишется функция, которая будет обрабатывать Ajax запрос. Её пример приведен ниже.

function my_AJAX_processing_function(){   check_ajax_referer('my_ajax_nonce');     $first_name = $_POST['first_name'];   $last_name = $_POST['last_name'];     if( empty($first_name) || empty($last_name) ) {   echo json_encode(['success' => 0, 'message' => 'Вы не указали имя или фамилию.']);   wp_die();   }      echo json_encode(['success' => 1, 'message' => 'Все окей.']);   wp_die();  }

Ajax код приведенный в начале этой записи отправляет запрос с nonce, которые создается с помощью функции wp_create_nonce() (в целях безопасности).

Далее, на 3 строке (в коде выше), проверяется my_ajax_nonce, который был отправлен через Ajax и check_ajax_referer() вернет булевое значение, которое вы можете занести в if и вывести пользователю ошибку.

Если все окей, то мы получаем параметры имени и фамилии в  $first_name и $last_name и далее проверяем их на заполненность. Если они пустые, то выводим ошибку и на этом скрипт прерывается функцией wp_die(). Если все окей, то также выводим сообщение и прерываем скрипт.

Полный код

Полный код описанный в этой записи выглядит следующим образом:

function my_custom_ajax() {   ?>     <script type="text/javascript" >   jQuery(document).ready(function($) {     var data = {   action: 'ACTION_NAME',   first_name: 'Ivan',   last_name: 'Ivanov',   _ajax_nonce: '<?php echo wp_create_nonce( 'my_ajax_nonce' ); ?>'   };     // начиная с 2.8 ajaxurl всегда определяется в admin-ajax.php   // Если вам нужно, чтобы это работало на внешней стороне сайта для гостей и обычных пользователей, тогда удалите комментарий ниже:   // var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';   jQuery.post(ajaxurl, data, function(response) {   alert('Ответ сервера: ' + response);   });   });   </script>     <?php  }  add_action('wp_footer', 'my_custom_ajax');    //если вы хотите принимать запрос только от авторизованных пользователей, тогда добавьте этот хук  add_action('wp_ajax_ACTION_NAME', 'my_AJAX_processing_function');    //если вы хотите получить запрос от неавторизованных пользователей, тогда добавьте этот хук  add_action('wp_ajax_nopriv_ACTION_NAME', 'my_AJAX_processing_function');    //Если хотите, чтобы оба вариант работали, тогда оставьте оба хука    function my_AJAX_processing_function(){   check_ajax_referer('my_ajax_nonce');     $first_name = $_POST['first_name'];   $last_name = $_POST['last_name'];     if( empty($first_name) || empty($last_name) ) {   echo json_encode(['success' => 0, 'message' => 'Вы не указали имя или фамилию.']);   wp_die();   }      echo json_encode(['success' => 1, 'message' => 'Все окей.']);   wp_die();  }

Использованные WordPress функции

  • add_action()
  • wp_die()
  • check_ajax_referer()
  • wp_create_nonce()

bologer.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.