Створення плагіна WordPress «Вибрані записи». Урок 9

10

Від автора: у цьому уроці ми продовжимо створення плагіна WordPress «Вибрані записи». Нагадаю, у попередньому уроці ми вивели список обраного, використавши для цього віджет в консолі, тобто на головній сторінці адмінки WordPress. У цьому уроці ми додамо дозволимо користувачеві видаляти ту чи іншу обрану статтю безпосередньо зі списку віджета. Це дуже зручно, оскільки весь список перед очима і якщо якась стаття вже не потрібна, то її відразу ж можна і видалити. Все це ми, звичайно ж, будемо робити, як і раніше, без перезавантаження сторінки, використовуючи можливості AJAX.

Створення плагіна WordPress «Вибрані записи». Урок 9

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

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

Створення плагіна WordPress «Вибрані записи». Урок 9Створення плагіна WordPress «Вибрані записи». Урок 9

Отже, почнемо з додавання іконки видалення статті. Для цього ми використовуємо іконку Юнікоду у вигляді хрестика, яку помістимо відразу після назви статті. Для кожної іконки задамо атрибут 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 ‘

    ‘;
    foreach($favorites as $favorite){
    echo ‘

  • ‘. get_the_title( $favorite ) . ‘

    Створення плагіна WordPress «Вибрані записи». Урок 9
  • ‘;
    }
    echo ‘

‘;
}

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

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

Як підключити 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.

На цьому поточний урок завершено. Удачі і до нових зустрічей!