Создание плагина для WordPress «Избранные записи». Урок 9

Создание плагина для WordPress Избранные записи

От автора: в этом уроке мы продолжим создание плагина для WordPress «Избранные записи». Напомню, в предыдущем уроке мы вывели список избранного, использовав для этого виджет в консоли, т.е. на главной странице админки WordPress. В этом уроке мы добавим разрешим пользователю удалять ту или иную избранную статью непосредственно из списка виджета. Это очень удобно, поскольку весь список перед глазами и, если какая-то статья уже не нужна, то ее сразу же можно и удалить. Все это мы, конечно же, будем делать, как и прежде, без перезагрузки страницы, используя возможности AJAX.

автор

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP, JavaScript.

скачать исходникискачать урок

Итак, начнем с добавления иконки удаления статьи. Для этого мы используем иконку Юникода в виде крестика, которую поместим сразу после названия статьи. Для каждой иконки зададим атрибут data-post, значением которого укажем ID статьи. Именно по этому ID у нас и будет происходить удаление конкретной статьи. Итоговый код функции wfm_show_dashboard_widget станет таким:

function wfm_show_dashboard_widget(){
	$user = wp_get_current_user();
	$favorites = get_user_meta( $user->ID, 'wfm_favorites' );
	if(!$favorites){
		echo 'Список пуст';
		return;
	}
	$img_src = plugins_url( '/img/loader.gif', __FILE__ );
	echo '<ul>';
	foreach($favorites as $favorite){
		echo '<li>
				<a href="' . get_permalink( $favorite ) . '" target="_blank">' . get_the_title( $favorite ) . '</a>
				<span><a href="#" data-post="' . $favorite . '" class="wfm-favorites-del">&#10008;</a></span>
				<span class="wfm-favorites-hidden"><img src="' . $img_src . '" alt=""></span>
			</li>';
	}
	echo '</ul>';
}

Как вы заметили, после иконки удаления мы также поместили лоадер для индикации процесса асинхронного запроса.

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

Как подключить css в админке на конкретной странице

Итак, как же подключить файлы css и js на конкретной странице админки? Сделать это поможет хук admin_enqueue_scripts. Этот хук позволяет узнать, на какой странице админки мы находимся в данный момент. Ну а зная адрес скрипта, мы можем решить, нужно ли что-то подключать по этому адресу. Адрес скрипта на главной странице админки WordPress — index.php, его и будем проверять. Добавим новый хук в файл wfm-favorites.php:

add_action( 'admin_enqueue_scripts', 'wfm_favorites_admin_scripts' );

И в файле функций плагина опишем новую функцию wfm_favorites_admin_scripts:

function wfm_favorites_admin_scripts($hook){
	if($hook != 'index.php') return;
	wp_enqueue_script( 'wfm-favorites-admin-scripts', plugins_url('/js/wfm-favorites-admin-scripts.js', __FILE__), array('jquery'), null, true );
	wp_enqueue_style( 'wfm-favorites-admin-style', plugins_url('/css/wfm-favorites-admin-style.css', __FILE__) );
	wp_localize_script( 'wfm-favorites-admin-scripts', 'wfmFavorites', ['nonce' => wp_create_nonce('wfm-favorites')] );
}

Пройдемся по коду функции. Как видим, функция принимает некий параметр. Это и есть тот самый адрес текущего скрипта. Далее мы проверяем: если текущий адрес не равен строке index.php, значит останавливаем работу текущей функции. Получается, что если мы не находимся в консоли админки, то функция прекратит дальнейшую работу. Если же это консоль, тогда подключим необходимые файлы скриптов и стилей.

Также мы локализуем данные для админского скрипта. Здесь нам потребуется только ключ безопасности. ID поста, как это было в пользовательской части, нам не потребуется. Также не нужно определять URL, на который будет отправлен AJAX запрос, этот адрес уже определен в админке и находится в JS переменной ajaxurl.

Добавим немного оформления в файл стилей wfm-favorites-admin-style.css:

.wfm-favorites-del{
	color: #ff0000;
	font-weight: bold;
}
.wfm-favorites-del:hover{
	color: #cc0000;
}
.wfm-favorites-hidden{
	display: none;
}

Осталось написать отправку запроса AJAX на удаление выбранной статьи. В файле wfm-favorites-admin-scripts.js опишем нужный код:

jQuery(document).ready(function($) {

	$('.wfm-favorites-del').click(function(e){
		e.preventDefault();
		if( !confirm("Подтвердите удаление") ) return false;
		var post = $(this).data('post'),
			parent = $(this).parent(),
			loader = parent.next(),
			li = $(this).closest('li');
		$.ajax({
			type: 'POST',
			url: ajaxurl, 
			data: {
				security: wfmFavorites.nonce,
				action: 'wfm_del',
				postId: post
			},
			beforeSend: function(){
				parent.fadeOut(300, function(){
					loader.fadeIn();
				});
			},
			success: function(res){
				loader.fadeOut(300, function(){
					li.html(res);
				});
			},
			error: function(){
				alert('Ошибка!');
			}
		});
	});

});

Он очень похож на аналогичный запрос из пользовательской части, но есть некоторые отличия. Например, мы добавили вначале запрос на подтверждение действия удаления с помощью функции confirm(). Но в целом суть кода не изменилась. Если мы нигде не ошиблись, тогда статьи можно удалять и из консоли WordPress.

На этом текущий урок завершен. Удачи и до новых встреч!

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree