Manipulowanie stylami paska administracyjnego WP za pomocą zdarzeń

Mam mieszane uczucia co do paska administracyjnego WordPressa, ale ma to związek z tym, jak rozwiązania innych firm dodają do niego swoje opcje (plus, można go wyłączyć, jeśli nie jesteś jego wielkim fanem).

Niedawno opublikowałem małą wtyczkę – przeznaczoną głównie dla programistów – która pozwala użytkownikom przełączać powiadomienia administratora za każdym razem, gdy pracują z WordPressem (najlepiej w ich lokalnym środowisku, choć można go zainstalować w dowolnym miejscu, w którym jest zainstalowany WordPress).

Wtyczka jest prosta:

• Wprowadza element do paska administracyjnego WP,
• Kliknięcie elementu spowoduje przełączenie wszystkich wyświetlanych powiadomień lub wiadomości,
• Gdy ponownie go klikniesz, przełączy ich widoczność.

Ale jest mały niuans, który moim zdaniem jest wart omówienia i ma to związek z manipulowaniem stylami paska administracyjnego WP za pomocą kodu po stronie klienta.

Wszystko to zostało omówione w początkowym poście, ale jeden aspekt kodu, który moim zdaniem jest wart udostępnienia osobom pracującym z paskiem administracyjnym i pracującym z JavaScript.

Style paska administracyjnego WP

Jeśli spojrzysz na kod źródłowy JavaScript, który jest dołączony do wtyczki, zobaczysz :

(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 );

Ogólnie rzecz biorąc, za każdym razem, gdy użytkownik kliknie element na pasku administracyjnym WP, przekieruje go na inną stronę [serwera] lub wyświetli element podmenu, który robi to samo. Jednak w przypadku tej wtyczki działa ona po stronie klienta, więc wszystko to jest JavaScript.

Oznacza to, że musimy być świadomi wydarzeń związanych z przedmiotem, aby móc nimi manipulować. I do tego właśnie zmierzam w tym poście.

W skrócie:

Pozycje menu mają dołączone zdarzenie rozmycia, które pozwala nam wyzwalać, abyśmy mogli manipulować stylami paska administracyjnego WP.

To prawda, nie musi to być izolowane od funkcji po stronie klienta, ale jeśli chcesz manipulować stylami elementu menu po najechaniu kursorem myszy na element przed załadowaniem kolejnej strony, to jest to zdarzenie, którego chcesz użyć (w przynajmniej w momencie pisania tego posta).

Jeśli pracujesz nad wtyczką, która integruje się z paskiem menu i chcesz manipulować stylami paska administracyjnego WP za pomocą JavaScript, zdarzenie rozmycia jest tym, którego chcesz użyć, gdy konkretny element paska menu wyzwala zdarzenie.