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 id="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" class="this_price" 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 style="color:#0FB10F">Сохранено</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

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году. С 2014 года меня можно встретить на WordCamp — официальной конфе по WordPress, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля — пишите мне.

Комментарии 63

  • VRS:

    Михаил, просто слов нет, чтобы передать, как Вы меня выручили! С ajaxurl не была близко знакома. Вот всю неделю пыталась воплотить функцию по выводу редактируемых произвольный полей в админке, столько вариантов перепридумывала.. только себе жизнь усложнила.. в конце-концов доигралась и все цены проставились как одна, сидела правила их всю ночь.
    Ваш код - спасение! Немного подкрутила под свои колонки и поля, и теперь, благодаря Вам, моим мучениям с обновлениями цен - конец!
    Преклоняюсь :).. теперь я знаю, чем займусь ночами на следующей неделе - буду учить матчасть. Благодарю!

  • VRS:

    Доброй ночи...
    вот и опять я, с вопросом =).
    Такая заковыка по аяксу:
    есть самописный блок, который передает все значения в одно произвольное поле key . Удалось из массива вытащить цену

    $art = get_post_meta($post_id, 'key', 1);
    echo '<input  type="text" class="this_price" data-id="' . $post_id .'" value="' . $art['price'] . '" /><p></p>';

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

  • VRS:

    Привет,
    array_merge() я смотрела, но так и не нашла как прикрутить. Играет ли роль, что массив там сериализован? Если не затруднит, помочь с кодом, буду рада =).

    • Миша:

      Привет ещё раз, как-то так:

      $art = get_post_meta($post_id, 'key', 1);
      $art['price'] = // новая цена
      update_post_meta( $post_id, 'key', $art );

      array_merge() не понадобился, что-то я тупанул вчера:)

      • VRS:

        Так пробовала, обновляет всё поле. Причем перезаписывает и оставляет только первую цифру.

        • Миша:

          А сама переменная, переданная в функцию update_post_meta() - корректная?
          Блмн, я как-то сталкивался с поддобной проблемой, но уже даже и не помню,
          попробуйте перед использованием массива указать, что это массив, вот так:

          $art = new array();
          • VRS:

            $art = new array();

            дает белый экран

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

            Вот смотри, что пока я напридумывала.
            Значение произвольного поля key это сериализованный массив.
            Я с помощью принт_р вывожу его в текстовое поле area
            Затем в админке произвожу манипуляции в этом поле (меняю допустим цену).
            Затем при потере фокуса снова сериализую массив, запихиваю его в input readonly, значение которого передаю уже в update_post_meta по событию blur.

            Код такой:

             
                  function fill_name_column($column_name, $post_id) {  
                    if( $column_name != 'key' )  
                    return;  
            		$art = array();
            		$art = get_post_meta($post_id, 'key', 1);
             
            				if( $art != '' )  {		   
             
             
            		echo 'Параметры: <textarea rows="13" style=" width:200px;" class="this_dop_sv" name="' . $post_id .'">'; 
            		print_r($art);
            		echo '</textarea>';		
            		echo '<input  type="text" class="this_price" data-id="' . $post_id .'" value="" readonly /><p class="result"></p>';
            		}
             
             
                }
             
             
            wp_enqueue_script('jquery');
            wp_enqueue_script('ajaxpostmeta', get_stylesheet_directory_uri() . '/js/ajax-post-meta.js', array('jquery'));
             
             
            function updatePrice_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках
             
            	update_post_meta($_POST['post_id'], 'key', esc_attr($_POST['key_val']));
            	die();
            }
             
            function updateDopSv_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках
             
            	//die();
            }
             
            if( is_admin() ) {
            	add_action('wp_ajax_updatePrice', 'updatePrice_callback');
            	add_action('wp_ajax_nopriv_updatePrice', 'updatePrice_callback');
            	add_action('wp_ajax_updateDopSv', 'updateDopSv_callback');
            	add_action('wp_ajax_nopriv_updateDopSv', 'updateDopSv_callback');
            }
             
            jQuery(function($){
            $('.this_dop_sv').blur(function(){
            		this_price = $(this);
            		var ap = this_price.val();
            		var newcost = $ap.serialize();
            		$.ajax({
            			type:'POST',
            			url:ajaxurl,
            			data:this_price.next().attr('value').text(newcost),
            			beforeSend:function(xhr){
            				this_price.attr('readonly','readonly').next('.result').html('Сохраняю...');
            			},
            			success:function(results){
            				this_price.removeAttr('readonly').next('.result').html('<span style="color:#0FB10F">Сохранено</span>');
            			}
            		});
            	});
             
             
            	$('.this_price').blur(function(){
            		this_price = $(this);
            		$.ajax({
            			type:'POST',
            			url:ajaxurl,
            			data:'action=updatePrice&key_val=' + this_price.val() + '&post_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 style="color:#0FB10F">Сохранено</span>');
            			}
            		});
            	});
            });

            ajax от башки написала.. сейчас пытаюсь дотыкать методом тыка до работоспособного состояния.. может и проще есть выход.. Вся надежда только на тебя 0:-)

  • VRS:

    Ну так в них же код не рабочий 😉

  • west:

    нифига не выходит, всё равно при запросе /wp-admin/admin-ajax.php показывает 0.

  • Техноблоггер:

    Зачем же вы хук вешаете на wp_ajax_nopriv_...
    Это же для незарегистрированных пользователей, вам так кто угодно сможет запросы посылать. В админке нужно вешать только на wp_ajax_...

  • Андрей:

    Функционалом пользовплся этим, но вот всегда была проблема, незалогененым нельзя было пользоваться, только у вас вот увидил хук wp_ajax_nopriv_
    Спасибо!

  • Роман llgr:

    Привет, спасибо за статью, полезный материал
    Можно заменить input на textarea чтобы вставлять текст не в 1 строку а в несколько?

      • Роман llgr:

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

        Подскажите вот с чем:
        Я хочу создать на сайте отдельную страницу и некоторые блоки на ней сделать редактируемыми (contenteditable) только для 1 конкретного пользователя, чтобы он залогинился, перешел на эту страницу и мог её редактировать онлайн, не имея доступа в админку сайта. Наверное правильно будет создать для этого пользователя свою роль.

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

      • Роман llgr:

        Я настроил вывод стобца с произвольным полем в раздел "пользователи" админки:

        /* USERs columns */
        add_action('manage_users_columns','manage_users_columns');
        add_action('manage_users_custom_column','custom_manage_users_custom_column',10,3);
        function manage_users_columns($column_headers) {
            $column_headers['dogshowme_comment_profile'] = __('Комментарий','wpex');
            return $column_headers;}
        function custom_manage_users_custom_column($custom_column,$column_name,$user_id) {
            if ($column_name=='dogshowme_comment_profile') {
                $user_info = get_userdata($user_id);
                $dogshowme_comment_profile = $user_info->dogshowme_comment_profile;
                $custom_column = "<textarea class=\"this_COMMENT\" rows=\"4\" cols=\"45\" name=\"dogshowme_comment_profile_$user_id\" >{$dogshowme_comment_profile}\n</textarea><p></p>";
            }
            return $custom_column;}

        Заменил update_post_meta на update_user_meta. Не уверен правильно ли я задаю $meta_key.

        /* Функция-обработчик для "dogshowme_comment_profile" */
        function update_dogshowme_comment_profile(){
        	update_user_meta($_POST['COMMENT_id'], 'dogshowme_comment_profile', esc_attr($_POST['COMMENT_val']));
        	die();}
        if( is_admin() ) {
        	add_action('wp_ajax_updateCOMMENT', 'update_dogshowme_comment_profile');}
        /*--------------------------------------*/

        В итоге скрипт не обрабатывает поле 🙁
        Подскажите в чём может быть ошибка?

        jQuery(function($){
        	$('.this_COMMENT').blur(function(){
        		this_COMMENT = $(this);
        		$.ajax({
        			type:'POST',
        			url:ajaxurl,
        			data:'action=updateCOMMENT&COMMENT_val=' + this_COMMENT.val() + '&COMMENT_id=' + this_COMMENT.attr('name'),
        			beforeSend:function(xhr){
        				this_COMMENT.attr('readonly','readonly').next().html('Сохраняю...');
        			},
        			success:function(results){
        				this_COMMENT.removeAttr('readonly').next().html('<span style="color:#0FB10F">Сохранено</span>');
        			}
        		});
        	});
        });
        • Роман llgr:

          Решил проблему, это невнимательность.
          Правильный name=\"$user_id\" и пара неточностей при выводе самого поля:

          /* доп.textarea */
          add_action( 'show_user_profile', 'add_extra_social_links' );
          add_action( 'edit_user_profile', 'add_extra_social_links' );
          function add_extra_social_links( $user )    {   ?>
          <table class="form-table">
          <tr>
              <th><label for="dogshowme_comment_profile">Комментарий</label></th>
              <td>
                  <textarea name="dogshowme_comment_profile" id="dogshowme_comment_profile" rows="5" cols="30" ><?php echo esc_attr(get_the_author_meta( 'dogshowme_comment_profile', $user->ID )); ?></textarea>
                  <p class="description">Укажите дополнительные данные.</p>
              </td>
          </tr>
          </table>
          <?php   }
          /* Сохраняем введенные данные */
          add_action( 'personal_options_update', 'save_extra_social_links' );
          add_action( 'edit_user_profile_update', 'save_extra_social_links' );
          function save_extra_social_links( $user_id )    {
              if (!current_user_can('edit_user', $user_id ))
          		return false;
              update_user_meta( $user_id,'dogshowme_comment_profile', sanitize_text_field( $_POST['dogshowme_comment_profile'] ) );
          }
  • Артем:

    Добрый день! Михаил, подскажите, откуда берутся данные вот в этих переменных

    $_POST['product_id'],$_POST['price_val']

    Никак не могу сообразить, как мне поменять названия, а то чего-то не срабатывает

  • вадик:

    привет. а как всетаки сделать чтобы на отдельной странице а не в админке можно было вывести такие аджакс блоки?

    • Миша:

      Привет!
      Точно так же, как и в админке, только jQuery не забыть ещё подключить.

      • вадик:

        в шаблоне страницы добавил:

        echo '<input type="text" class="this_price" style="width:100%;" data-id="'.$post->ID.'" value="'.get_post_meta( $post->ID, '_price', true ).'" /><p></p>';

        в functions.php:

        wp_enqueue_script('jquery');
        wp_enqueue_script('ajaxpostmeta', 'site/js/ajax-post-meta.js', array('jquery'));
         
        function updatePrice_callback() {
        	update_post_meta($_POST['product_id'], '_price', esc_attr($_POST['price_val']));
        	die();
        }
        add_action('wp_ajax_updatePrice', 'updatePrice_callback');

        подскажи, пожалуйста, какой именно jQuery подключать?

        • Миша:

          jQuery пожалуйста через хук подключай, подробные примеры тут.

          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 style="color:#0FB10F">Сохранено</span>');
            			}
            		});
            	});
            });

            только наверно нужен не он? в джаваскрипте не силен, поэтому все на уровне скопировал/вставил - получилось/неполучилось

            по поводу подключения jQuery не понял, он ведь и так подключен через

            wp_enqueue_script('jquery');
  • Артем:

    Приветствую, Михаил! Подскажи, с чем связано, что
    1. Надо размещать файл с аякс скриптом обязательно там же где и файл функшионс, то бишь в коневой папке темы
    2. Ну и подключать не через функцию как положено, а отдельно.

    Так-то все работает, по ВП ошибку выдает... http://snap.ashampoo.com/3BapngwE

    • Миша:

      Привет!

      1. Ты про .js файл? Нет, не обязательно.
      2. Не совсем понял.

      А wp_enqueue_script() через фильтр подключена?

      • Артем:

        1. Ты сам написал что обязательно - " (важно, чтобы он находился в той же папке, что и functions.php, style.css)" . Пробовал по другому подключать, тогда не работает

        2. Вот именно что когда подключаешь через фильтр, например так

        function true_include_myscript_dep_jquery() {
         	wp_enqueue_script( 'myscript', get_stylesheet_directory_uri() . '/script.js', array('jquery') );
        }
         
        add_action( 'wp_enqueue_scripts', 'true_include_myscript_dep_jquery' );

        То нифига не срабатывает, а если просто так впихиваешь

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

        То все прекрасно работает, но при этом выдает ошибку, так как скрипт подключен не через фильтр

        И кстати, мне почему-то уведомления не приходят...

        • Миша:

          1. Если расположение файла изменить, то и в функции подключения надо менять путь, только и всего.
          2. В HTML код погляди, если не робит через фильтр, то либо wp_head() отсутствует, либо где-то косяк.

          Может в спаме?

          • Артем:

            Хм, ну с первым понятно, тут чет я тупанул, а вот со вторым все нормально

            wp_head()

            на месте, да и в нескольких темах проверял, не хочет через фильтр работать...

            Не, в спаме точно нету, просто ничего не приходить, попробую другую почту указать

  • Артем:

    Михаил, категорически приветствую! С наступающим!
    У меня как обычно вопрос)))
    есть вот такое подключение

    function artabr_add_post_columns($my_columns){
    	$slider = array( 'hide_ad' => 'Реклама' );
    	$my_columns = array_slice( $my_columns, 0, 5, true ) + $slider + array_slice( $my_columns, 5, NULL, true );
    	return $my_columns;
    }
     
    function artabr_fill_post_columns( $column ) {
    	global $post;
    	switch ( $column ) {
    		case 'hide_ad':
    			$html_ad = (get_post_meta($post->ID, 'ad_post',true) == 'on') ? ' checked="checked"' : '';
    			$html_ad_value = get_post_meta($post->ID, 'ad_post', true);
    			echo 'div'. $html_ad_value;
    			echo '<input type="checkbox" '.$html_ad.'  class="this_ad_post" data-id="' . $post->ID .'" value="'. $html_ad_value .'" /><p></p>';
     
    			break;
    	}
    }
     
    add_filter( 'manage_edit-post_columns', 'artabr_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns
    add_action( 'manage_posts_custom_column', 'artabr_fill_post_columns', 10, 1 );
     
    wp_enqueue_script('jquery');
    wp_enqueue_script('ajaxpostmeta', plugins_url( '/ajax-post-meta.js', __FILE__), array('jquery'));
     
     
    function AdPostCustom_callback(){ // название не имеет значения, но должно соответствовать названиям в хуках
    	update_post_meta($_POST['ad_post_id'], 'ad_post', $_POST['ad_post_val']);
    	die();
    }
     
    if( is_admin() ) {
    	add_action('wp_ajax_AdPostCustom', 'AdPostCustom_callback');
    	// wp_ajax_nopriv_ не нужен, так как мы работаем в админке (а в админку не попадают незареганные пользователи)
    }

    и js с ajax

    jQuery(document).ready(function($){
    	$('.this_ad_post').click(function(){
    		this_ad_post = $(this);
    		$.ajax({
    			type:'POST',
    			url:ajaxurl,
    			data:'action=AdPostCustom&ad_post_val=' + this_ad_post.val() + '&ad_post_id=' + this_ad_post.attr('data-id'),
    			beforeSend:function(xhr){
    				this_ad_post.attr('readonly','readonly').next().html('Б-р-р...');
    			},
    			success:function(results){
    				this_ad_post.removeAttr('readonly').next().html('<span style="color:#0FB10F">Ок!</span>');
    			}
    		});
    	});
    });

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

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.