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


Как использовать AJAX в Wordpress

За последние несколько лет AJAX стал самым популярным способом создания динамичных, удобных и гибких сайтов. AJAX – это технология, предоставляющая возможность обновлять содержимое на сайте без перезагрузки страниц в браузере. Например, Google Docs использует эту технологию каждые несколько минут для автоматического сохранения Вашей работы. Здесь все этапы создания сайтаНесмотря на то, что существует несколько способов использовать AJAX в WordPress, и все они “правильные” в широком смысле слова, мы остановимся только на одном из них. Этот способ официально поддерживается WordPress, он очень логичен, за ним будущее, и он предоставляет очень много опций прямо “из коробки”.

Что такое AJAX?

Если Вы ещё не знакомы с AJAX, то предлагаю Вам по завершении чтения этого руководства обратить внимание на статью из Wikipedia. Это тот редкий случай, когда советуем читать как можно меньше о технологии, прежде чем приступить к практике. На практике всё не так сложно как в теории, потому что мы будем использовать библиотеку jQuery, а не чистый JavaScript.

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

Если на Вашем сайте есть страница, на которой пользователи могут изменять свой профиль, то Вы можете воспользоваться технологией AJAX для обновления профиля без перезагрузки страницы всякий раз, когда пользователь отправляет форму. После того как пользователь нажал на кнопку отправки формы, введенные им данные с помощью AJAX передаются на сервер для сохранения. Серверный скрипт возвращает строку: “данные сохранены”. После этого данные пользователя выводятся на страницу.

Чтобы разобраться в AJAX, нужно понять, чем он отличается от стандартного подхода. Если у Вас есть контактная форма на сайте, то, вероятно, она размечена с помощью HTML с применением CSS-стилей. А на сервере хранится PHP-скрипт, обрабатывающий полученную информацию. Единственное различие между AJAX-формой и обычной в том, каким образом информация попадает в скрипт на сервере и обратно к пользователю. Всё остальное идентично.

Чтобы использовать весь потенциал AJAX и получить максимальную пользу от этого руководства, Вы должны быть знакомы с JavaScript (jQuery будет достаточно), а также HTML, CSS и PHP. Если даже Ваши знания в JavaScript сомнительны, не волнуйтесь, Вы всё равно сможете следовать логике. Если Вам нужен будет совет или подсказка, напишите об этом в комментариях, и мы постараемся помочь.

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

Один из способов, которые мы использовали ещё в старые добрые времена, заключается в том, чтобы просто подключить файл wp-load.php к Вашему PHP-скрипту. Это позволит Вам использовать функции WordPress, определять текущего пользователя и так далее. Но по сути это хак, и прямо скажем, не лучшее решение. Этот способ не безопасен и не предоставляет Вам такие интересные варианты, которые предлагает система WordPress.

Как AJAX работает в WordPress

AJAX уже используется в движке WordPress и готов для работы. Всё, что от Вас требуется – использовать доступные функции. Давайте сначала посмотрим на этот процесс в общих чертах, прежде чем погрузиться в код.

Каждый AJAX-запрос проходит через файл admin-ajax.php, который находится в папке wp-admin. Пусть название файла Вас не сбивает с толку.

Каждый запрос должен передавать (используя метод GET или POST) информацию о выполняемом действии. Исходя из этого действия, код в файле admin-ajax.php создаёт два хука, wp_ajax_my_action и wp_ajax_nopriv_my_action, где my_action – переменная GET или POST, в которой хранится информация о действии.

Первый хук предназначен для авторизованных пользователей, а второй для неавторизованных.

Интеграция AJAX в WordPress

Давайте создадим элементарную систему голосования в качестве примера. Для начала создайте пустой плагин и активируйте его. Если Вам нужна помощь с этой частью, то прочитайте этот урок Как создать плагин для WordPress. После найдите файл single.php Вашей темы и откройте его.

Подготовка для выполнения AJAX-запроса

Давайте создадим ссылку, которая позволит посетителям голосовать за Ваши посты. Если в браузере посетителя включён JavaScript, то он будет использован; иначе – будет совершен переход по ссылке. В файле single.php где-то возле заголовка поста добавьте следующий фрагмент кода:

<?php

   $votes = get_post_meta($post->ID, "votes", true)

   $votes = ($votes == "") ? 0 : $votes;

?>

This post has <div><?php echo $votes ?></div> votes<br>

 

<?php

   $nonce = wp_create_nonce("my_user_vote_nonce");

    $link = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);

    echo '<a data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';

?>

Сначала мы получим количество голосов текущего поста с помощью функции get_post_meta. Если функция нам вернёт пустую строку (в случае, если голосов ещё не было), то покажем пользователям нуль.

Мы создали простую ссылку с единственным небольшим дополнением. Мы используем nonces в целях безопасности для предотвращения атак и ошибок. Иначе это была бы самая обычная ссылка, указывающая на файл admin-ajax.php и передающая через GET-параметры информацию о действии для выполнения и идентификатор поста.

Для удовлетворения посетителей с включенным JavaScript, мы добавили класс user_vote, к которому мы прикрепили событие (клик левой кнопкой мыши) и параметр data-post_id, содержащий идентификатор поста. Это поможет нам передать необходимую информацию в JavaScript-код.

Обработка события без JavaScript

Если Вы нажмёте на ссылке сейчас, то будете переадресованы к скрипту admin-ajax.php, который выведет на экран “-1”. Давайте, это исправим!

В своём плагине создайте функцию и добавьте её в новые хуки, которые недавно были созданы. Вот так:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

add_action("wp_ajax_my_user_vote", "my_user_vote");

add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");

 

function my_user_vote() {

 

   if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {

      exit("No naughty business please");

   }  

 

   $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);

   $vote_count = ($vote_count == '') ? 0 : $vote_count;

   $new_vote_count = $vote_count + 1;

 

   $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);

 

   if($vote === false) {

      $result['type'] = "error";

      $result['vote_count'] = $vote_count;

   }

   else {

      $result['type'] = "success";

      $result['vote_count'] = $new_vote_count;

   }

 

   if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {

      $result = json_encode($result);

      echo $result;

   }

   else {

      header("Location: ".$_SERVER["HTTP_REFERER"]);

   }

 

   die();

 

}

 

function my_must_login() {

   echo "You must log in to vote";

   die();

}

Прежде всего, мы выполняем проверку с помощью nonce, чтобы убедиться в безопасности выполнения запроса. Если что-то не так, мы останавливаем скрипт. Иначе мы двигаемся дальше и получаем количество голосов из базы данных. Если голосов ещё не было, то установим значение переменной vote_count равное 0. После этого добавим 1 к количеству голосов.

Используя функцию update_post_meta, обновим количество голосов соответствующего поста. Эта функция создаёт мета-данные поста, если их ещё нет. Она возвращает true в случае успешного выполнения и false при возникновении ошибки. Мы создадим массив для обоих случаев.

Нам нравится использовать массив для хранения конечных результатов. Это позволяет стандартизировать обработку этих результатов и облегчить отладку ошибок.

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

В завершении функции мы определяем, каким образом было вызвано действие – используя стандартный подход или AJAX-запрос. Если использовался AJAX, то подготовим массив для JavaScript-кода с помощью функции json_decode. В противном случае мы просто перенаправляем пользователя на страницу, с которой он пришёл.

Всегда заканчивайте выполнение своих скриптов функцией die, чтобы быть уверенным в корректности результатов. Иначе вместе с результатами Вы будете получать строку "-1".

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

Подключение JavaScript

Теперь, когда мы настроили обработку пользовательских действий, используя стандартные методы, давайте перейдём к JavaScript. Многие разработчики предпочитают именно этот метод из-за его изящности. Для того чтобы наша система использовала AJAX, нужно подключить библиотеку jQuery и сам JavaScript-код. Чтобы сделать это, добавьте следующий фрагмент кода в Ваш плагин:

add_action( 'init', 'my_script_enqueuer' );

 

function my_script_enqueuer() {

   wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );

   wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));        

 

   wp_enqueue_script( 'jquery' );

   wp_enqueue_script( 'my_voter_script' );

 

}

Таким способом в WordPress подключаются внешние файлы. Сначала мы регистрируем файл JavaScript, чтобы WordPress знал о нём (убедитесь в том, что файл создан и находится в папке с плагином). Первый аргумент функции wp_register_script – уникальный идентификатор нашего скрипта. Второй – путь к скрипту. Третий – массив зависимостей.

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

Локализация скрипта не обязательна, но это хороший способ объявить переменные, которые мы будем использовать. Мы указываем идентификатор скрипта в качестве первого аргумента. В качестве второго – имя объекта. А в качестве третьего можно указать свойства объекта. Мы делаем это для того, чтобы можно было использовать свойство myAjax.ajaxurl, содержащее URL-адрес файла admin-ajax.php.

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

Затем добавьте следующий код в файл my_voter_script.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

jQuery(document).ready( function() {

 

   jQuery(".user_vote").click( function() {

      post_id = jQuery(this).attr("data-post_id")

      nonce = jQuery(this).attr("data-nonce")

 

      jQuery.ajax({

         type : "post",

         dataType : "json",

         url : myAjax.ajaxurl,

         data : {action: "my_user_vote", post_id : post_id, nonce: nonce},

         success: function(response) {

            if(response.type == "success") {

               jQuery("#vote_counter").html(response.vote_count)

            }

            else {

               alert("Your vote could not be added")

            }

         }

      })  

 

   })

 

})

Давайте вернёмся к основам. Это будет полезно для тех, кто впервые сталкивается с AJAX и пока не понимает, что происходит во фрагменте кода выше. Если пользователь нажимает на кнопку голосования без включенного JavaScript, то запускается нужный PHP-скрипт и данные передаются с помощью GET-метода. Если JavaScript включен, происходит всё почти тоже самое, однако с использованием AJAX и без перезагрузки страницы.

Функция my_user_vote, объявленная в нашем плагине, обработает предоставленные ей данные и вернёт нам результат, закодированный в формате JSON. Благодаря тому, что данные возвращаются к нам именно в формате JSON, мы можем сразу же работать с ними, как с JavaScript объектом без лишних действий.

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

Выводы

На этом мы заканчиваем это краткое руководство по использованию AJAX в WordPress. В нашем примере ещё многое может быть сделано, но главная цель выполнена – показать Вам, как правильно использовать технологию AJAX в своих плагинах WordPress. Напомним, что это делается в четыре шага:

  1. Создаём AJAX-запрос;
  2. Создаём функцию, которая будет обрабатывать этот запрос;
  3. Добавляем функцию в хук, который был специально создан;
  4. Создаём обработчики результатов.

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

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

Возможно, Вам будет интересно ↓↓↓

2web-master.ru

AJAX в админке WordPress

Блог  /  jQuery  /  AJAX в админке WordPress (с обработчиком admin-ajax.php)

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

Но на деле всё оказалось очень удобным.

jQuery

Тут есть только две вещи, отличающие вордпрессовский ajax-запрос от обычного:

Как-то так:

jQuery.ajax({ type:'POST', url:ajaxurl, data:'action=myaction&input_val=' + my_value, success:function(data){ jQuery('#response').html(data); } });

Или так:В этом случае в HTML-форму обязательно нужно добавить скрытое поле с параметром action.

jQuery.ajax({ type:'POST', url:ajaxurl, data:jQuery('#form').serialize(), success:function(data){ jQuery('#response').html(data); } });
<form> <input type="text" name="input_val" /> <input type="hidden" name="action" value="myaction" /> <button>Отправить</button> </form>

PHP

Тут важно учесть только одну деталь — в хуках обязательно должно быть прописано значение параметра action, в моем примере это myaction.

А сам код, как обычно — в файл functions.php:

function true_function(){ update_option('my_settings', esc_attr($_POST['input_val'])); echo 'Привет, значение ' . $_POST['input_val'] . ' сохранено.'; die(); }   // wp_ajax_ - только для зарегистрированных пользователей add_action('wp_ajax_myaction', 'true_function'); // wp_ajax_{значение параметра action}   // wp_ajax_nopriv_ - только для незарегистрированных, т е для залогиненных он работать не будет (результатом выполнения запроса будет 0) add_action('wp_ajax_nopriv_myaction', 'true_function'); // wp_ajax_nopriv_{значение параметра action}

Пример. Изменение произвольных полей постов «на лету».

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

На самом деле есть два варианта решения, но мы рассмотрим только тот, который по теме.

Шаг 1. Добавление колонки с ценой в список товаров

Более подробно о колонках в списках постов я писал здесь, кстати, возможно плагин магазина, который вы используете (если используете) уже мог сам надобавлять колонок, тогда вам потребуется лишь немного отредактировать их содержимое.

Вот готовый код для колонок.

Обязательно убедитесь, что тип поста на 16-й строчке кода соответствует вашему (слово product)!

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function true_add_post_columns($my_columns){ $slider = array( 'price' => 'Цена' ); $my_columns = array_slice( $my_columns, 0, 5, true ) + $slider + array_slice( $my_columns, 5, NULL, true ); return $my_columns; }   function true_fill_post_columns( $column ) { global $post; switch ( $column ) { case 'price': echo '<input type="text" data-id="' . $post->ID .'" value="' . get_post_meta( $post->ID, '_price', true ) . '" /><p></p>'; break; } }   add_filter( 'manage_edit-product_columns', 'true_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns add_action( 'manage_posts_custom_column', 'true_fill_post_columns', 10, 1 );

Всталяем этот код в например functions.php, и у вас должно получиться что-то в этом роде:

добавление колонки с ценой в список товаров

По скриншоту виду, что никаких кнопок типа «Сохранить» к полю добавлено не было — на самом деле зачем они нам, если цену можно сохранять автоматически (при снятии фокуса), достаточно лишь кликнуть мышью за пределами поля ввода.

Шаг 2. Создание и подключение скриптов

Самый легкий шаг на самом деле, но при этом он очень важен. Итак, сначала нужно создать какой-нибудь пустой js-файл в папке с вашей текущей темой (важно, чтобы он находился в той же папке, что и functions.php, style.css). Назовите его как-нибудь, у меня это будет ajax-post-meta.js.

Теперь в functions.php добавим:

wp_enqueue_script('jquery'); wp_enqueue_script('ajaxpostmeta', get_stylesheet_directory_uri() . '/ajax-post-meta.js', array('jquery'));

Шаг 3. Асинхронный AJAX запрос. Содержимое файла ajax-post-meta.js

Если до этого шага вы делали всё в точности так, как я описывал, можете вставлять следующий код в ajax-post-meta.js, не задумываясь:

jQuery(function($){ $('.this_price').blur(function(){ this_price = $(this); $.ajax({ type:'POST', url:ajaxurl, data:'action=updatePrice&price_val=' + this_price.val() + '&product_id=' + this_price.attr('data-id'), beforeSend:function(xhr){ this_price.attr('readonly','readonly').next().html('Сохраняю...'); }, success:function(results){ this_price.removeAttr('readonly').next().html('<span>Сохранено</span>'); } }); }); });

Шаг 4. Функция-обработчик

В functions.php:

function updatePrice_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках update_post_meta($_POST['product_id'], '_price', esc_attr($_POST['price_val'])); die(); }   if( is_admin() ) { add_action('wp_ajax_updatePrice', 'updatePrice_callback'); // wp_ajax_nopriv_ не нужен, так как мы работаем в админке (а в админку не попадают незареганные пользователи) }

Функция is_admin() нужна в данном случае для того, чтобы подключать обработчик только в бэкэнде и не нагружать остальной сайт.

В итоге у вас всё должно получиться, то есть сначала вводим цену в поле, потом щелкаем где-нибудь на странице (например переходим в другое поле), и цена сохраняется.

асинхронное сохранение цены на ajax

Смотрите также

misha.blog

Login With Ajax | WordPress.org

Login With Ajax is for sites that need user logins or registrations and would like to avoid the normal wordpress login pages, this plugin adds the capability of placing a login widget in the sidebar with smooth AJAX login effects.

Some of the features:

If you have any problems with the plugin after reading the FAQ, Other Notes, etc. please visit the support forums.

Translated Languages Available

Here’s a list of currently translated languages. Translations that have been submitted are greatly appreciated and hopefully make this plugin a better one. If you’d like to contribute, please have a look at our translation site, or let us know on the support forums.

Заметки

Upgrading from v3 to v3.1

Due to the improvmenets necessary (specifically allowing multiple LWA widgets on one page), it was important to modify the template files to use classnames instead of ids.

If you have customized your widgets as per the instructions below, you will need make some modifications to your templates, and probably re-evaluate whether you still need custom JS if you went that far.

We’ve tried to minimize potential conflicts arising from this, but you should consider revising your template regarding these two points:

ru.wordpress.org


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта