Как использовать 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”. Давайте, это исправим!

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

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:

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. Напомним, что это делается в четыре шага:

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

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

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

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

2web-master.ru

AJAX в админке WordPress

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

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

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

jQuery

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

URL запроса, в данном случае это /wp-admin/admin-ajax.php, однако он уже записан в переменную ajaxurl — её то мы и будем использовать.
В запросе должен быть передан параметр action — что-то вроде идентификатора запроса, чтобы WordPress знал, какая функция должна обрабатывать его.

Как-то так:

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:

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

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

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Всталяем этот код в например 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() нужна в данном случае для того, чтобы подключать обработчик только в бэкэнде и не нагружать остальной сайт.

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

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

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:

AJAX-powered, no screen refreshes!
- Login
- Registration
- Remember/Reset Password
Custom Login/Logout redirections
- Redirect users to custom URLs on Login and Logout
- Redirect users with different roles to custom URLs
- WPML — Language-specific redirects
SSL-compatible
Fallback mechanism, will still work on javascript-disabled browsers
Compatible with WordPress, MultiSite, BuddyPress and many other plugins that alter the login/registration form (e.g. captcha plugins)
Customizable, upgrade-safe widgets
shortcode and template tags available
Widget specific option to show link to profile page

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.

Afrikaans — Johnny Dunhin
Albanian — Besnik Bleta
Arabic (SA) — Adel Madshel
Bosnian — Nenad Cvetkovic
Catalan — Xavi Valenti
Chinese — Simon Lau
Czech — Marek Liolias, Ondra Kalous, Henry Greek, Viktor Jezek
Danish — Christian B.
Dutch — Sjors Spoorendonk
Estonian — Oliver Busch
Finnish — Jaakko Kangosjärvi
French — Geoffroy Deleury
German — Linus Metzler
Greek — George Alexakis, Lamprakis Fousekis
Hebrew — Menachem Shapiro
Hindi — Anonymous
Hungarian — Lorinc Borda
Italian — Marco aka teethgrinder
Japanese — Ryuei Sasaki
Limburgish — Anonymous
Lithuanian — Gera Dieta
Persian — Mohammad Hosein Ameri, Mohammad Akbari
Polish — Ryszard Rysz
Portuguese (Brazil) — Humberto S. Ribeiro, Diogo Goncalves, Fabiano Arruda
Romanian — Gabriel Berzescu
Russian — xl32,
Slovak — Branco
Spanish — Myself and Danilo Casati
Swedish — Tommy Wahlund
Turkish — Mesut Soylu, Oskay Yurtturk

Заметки

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:

LoginWithAjax is now a static class, so things like $this->function() and $this->variable should become LoginWithAjax::function() and LoginWithAjax::$variable
Element IDs are now classnames, and are converted like so (we do have backwards compatibility to account for this, but still recommended):
- LoginWithAjax becomes lwa
- classname is all lowercase
- underscores become

ru.wordpress.org