Маніпулювання стилями панелі адміністратора WP за допомогою подій

У мене змішані почуття щодо панелі адміністратора WordPress, але це пов’язано з тим, як рішення сторонніх розробників додають до неї свої параметри (до того ж, її можна вимкнути, якщо ви не є її великим шанувальником).

Нещодавно я опублікував невеликий плагін, призначений насамперед для розробників, який дозволяє користувачам перемикати сповіщення адміністратора щоразу, коли вони працюють із WordPress (в ідеалі в локальному середовищі, хоча його можна встановити будь-де, де встановлено WordPress).

Плагін простий:

• Він вводить елемент на панель адміністратора WP,
• Коли ви клацаєте елемент, він перемикає всі сповіщення або повідомлення, які відображаються,
• Коли ви знову клацнете на ньому, їх видимість перемкнеться.

Але є невеликий нюанс, який, на мою думку, варто розглянути, і він пов’язаний із маніпулюванням стилями панелі адміністратора WP за допомогою коду на стороні клієнта.

Все це описано в початковій публікації, але один аспект коду, яким, на мою думку, варто поділитися для тих, хто працює з панеллю адміністратора та тих, хто працює з JavaScript.

Стилі панелі адміністратора WP

Якщо ви подивитеся на вихідний код JavaScript, який включено до плагіна, ви побачите таке :

(function( $) {
    'use strict';

    /**
     * Hide all of the messages when the option is include and restore the menu items'
     * default hover state style.
     */
    var hide_menu_notices = function() {

        // Setup references to the plugin menu item and all admin notices.
        var $admin_button = $( '#wp-admin-bar-toggle-admin-notices a' ),
            $messages     = $( '.notice, .warning, .error' );

        $admin_button.on( 'click', function( evt) {
            evt.preventDefault();

            $messages.toggle( 'medium' );
            $( this ).trigger( 'blur' );
        });
    };

    $(function() {
    hide_admin_notices();
    });
})( jQuery );

Загалом, щоразу, коли користувач клацає елемент на панелі адміністратора WP, він перенаправлятиме його на іншу сторінку [сервера] або відображатиме пункт підменю, який робить те саме. Однак у випадку з цим плагіном він працює на стороні клієнта, тому це все JavaScript.

Це означає, що ми повинні бути в курсі подій, які пов’язані з елементом, щоб ми могли ними маніпулювати. І це те, до чого я звертаю увагу в цій публікації.

Коротко:

Пункти меню мають подію розмиття, прикріплену до них, що дозволяє нам запускати, щоб ми могли маніпулювати стилями панелі адміністратора WP.

Звичайно, це не обов’язково має бути ізольовано від функцій на стороні клієнта, але якщо ви хочете маніпулювати стилями пункту меню під час наведення курсора миші на елемент перед завантаженням іншої сторінки, це подія, яку ви хочете використовувати (на принаймні на момент написання цього допису).

Якщо ви працюєте над плагіном, який інтегрується з панеллю меню, і ви хочете керувати стилями панелі адміністратора WP за допомогою JavaScript, подія розмиття – це та, яку ви хочете використовувати щоразу, коли ваш конкретний пункт панелі меню ініціює подію.