Добавление редактируемого поля в админ-панели WordPress

Например, выведем сортируемое поле для даты окончания акции таксономии «stock»

Хуки для создания колонок

manage_(post_type)_posts_columns
Позволяет добавить колонки в таблицу записей на указанном экране.  указывается тип записи а не ID экрана… Название нашего фильтра будет: manage_stock_posts_columns. С версии 3.1. рекомендуется использовать этот хук.

manage_(post_type)_posts_custom_column
Отвечает за заполнение данных колонки на странице постов. В нашем случае: manage_stock_posts_custom_column. Передает название колонки и ID поста.

Создаем колонку

Вставляем такой код в файл темы function.php:

// добавляем колонки в акции
function true_add_post_columns($my_columns){
	$num = 2; // после какой по счету колонки вставлять новые
	$slider = array( 'price' => 'Заканчивается' );
	$my_columns = array_slice( $my_columns, 0, $num , true ) + $slider + array_slice( $my_columns, $num , 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, 'имя метаполя', true ) . '" /><p></p>';
			break;
	}
}
 
add_filter( 'manage_edit-stock_columns', 'true_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns
add_action( 'manage_posts_custom_column', 'true_fill_post_columns', 10, 1 );

В панели администратора должно получиться что-то вроде:

 

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

Создаем и подключаем скрипты

Создаем, например, в корневой папке темы файл ajax-post-meta.js и подключим его, добавив в functions.php строки:

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

Заполним наш js-файл ajax запроса ajax-post-meta.js:

jQuery(function($){
	$('.this_price').blur(function(){
		this_price = $(this);
		$.ajax({
			type:'POST',
			url:ajaxurl,
			data:'action=updateData&fieldVal=' + this_price.val() + '&postID=' + 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>');
			}
		});
	});
});

Добавим функцию-обработчик

В файле добавим:

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

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

На этом все. Весь код целиком:

<?php 
function true_add_post_columns($my_columns){
	$slider = array( 'price' => 'Заканчивается' );
	$my_columns = array_slice( $my_columns, 0, 3, true ) + $slider + array_slice( $my_columns, 3, 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, '_action_date', true ) . '" /><p></p>';
			break;
	}
} 

add_filter( 'manage_edit-stock_columns', 'true_add_post_columns', 10, 1 ); // manage_edit-{тип поста}_columns
add_action( 'manage_posts_custom_column', 'true_fill_post_columns', 10, 1 );

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

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

<script>
jQuery(function($){
	$('.this_price').blur(function(){
		this_price = $(this);
		$.ajax({
			type:'POST',
			url:ajaxurl,
			data:'action=updateData&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>');
			}
		});
	});
});
</script>

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

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