Manipolazione degli stili della barra di amministrazione di WP con gli eventi

Ho sentimenti contrastanti sulla barra di amministrazione di WordPress, ma questo ha a che fare con il modo in cui le soluzioni di terze parti aggiungono le loro opzioni (inoltre, può essere disabilitato se non ne sei un grande fan).

Di recente, ho pubblicato un piccolo plug -in, pensato principalmente per gli sviluppatori, che consente agli utenti di attivare o disattivare gli avvisi dell’amministratore ogni volta che lavorano con WordPress (idealmente nel loro ambiente locale, sebbene possa essere installato ovunque sia installato WordPress).

Il plugin è semplice:

• Introduce un elemento nella barra di amministrazione di WP,
• Quando si fa clic su un elemento, si alternano gli avvisi o i messaggi visualizzati,
• Quando fai di nuovo clic su di esso, cambierà la loro visibilità.

Ma c’è una piccola sfumatura che penso valga la pena coprire e che ha a che fare con la manipolazione degli stili della barra di amministrazione di WP usando il codice lato client.

Tutto questo è trattato nel post iniziale, ma un aspetto del codice che penso valga la pena condividere per chi lavora con la barra di amministrazione e per chi lavora con JavaScript.

Stili della barra di amministrazione di WP

Se dai un’occhiata al codice sorgente del JavaScript incluso nel plugin, vedrai quanto segue :

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

In generale, ogni volta che un utente fa clic su un elemento nella barra di amministrazione di WP, lo reindirizzerà a un’altra pagina [server] o visualizzerà una voce di sottomenu che fa lo stesso. Nel caso di questo plugin, tuttavia, funziona sul lato client, quindi è tutto JavaScript.

Ciò significa che dobbiamo essere consapevoli degli eventi legati all’oggetto in modo da poterli manipolare. Ed è questo il punto a cui arrivo in questo post.

In breve:

Le voci di menu hanno un evento sfocatura allegato che ci consente di attivare in modo da poter manipolare gli stili della barra di amministrazione di WP.

Certo, questo non deve essere isolato dalla funzionalità lato client, ma se vuoi manipolare gli stili della voce di menu quando passi il mouse sopra la voce prima di caricare un’altra pagina, questo è l’evento che vuoi usare (a almeno nel momento in cui scrivo questo post).

Se stai lavorando su un plug-in che si integra con la barra dei menu e desideri manipolare gli stili della barra di amministrazione di WP con JavaScript, l’evento sfocatura è quello che desideri utilizzare ogni volta che la tua particolare voce della barra dei menu attiva l’evento.