Manipulation des styles de barre d’administration WP avec des événements

J’ai des sentiments mitigés à propos de la barre d’administration de WordPress, mais cela a à voir avec la façon dont les solutions tierces y ajoutent leurs options (de plus, elle peut être désactivée si vous n’en êtes pas un grand fan).

Récemment, j’ai publié un petit plugin – destiné principalement aux développeurs – qui permet aux utilisateurs de basculer les avis d’administration chaque fois qu’ils travaillent avec WordPress (idéalement dans leur environnement local, bien qu’il puisse être installé partout où WordPress est installé).

Le plugin est simple :

• Il introduit un élément dans la barre d’administration WP,
• Lorsque vous cliquez sur un élément, il basculera les avis ou les messages qui sont affichés,
• Lorsque vous cliquez à nouveau dessus, cela basculera leur visibilité.

Mais il y a une petite nuance qui, à mon avis, mérite d’être abordée et qui concerne la manipulation des styles de barre d’administration WP à l’aide de code côté client.

Tout cela est couvert dans le message initial, mais un aspect du code qui, à mon avis, mérite d’être partagé pour ceux qui travaillent avec la barre d’administration et ceux qui travaillent avec JavaScript.

Styles de barre d’administration WP

Si vous regardez le code source du JavaScript qui est inclus avec le plugin, vous verrez ce qui suit :

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

De manière générale, chaque fois qu’un utilisateur clique sur un élément de la barre d’administration WP, il le redirige vers une autre page [serveur] ou affiche un élément de sous-menu qui fait la même chose. Dans le cas de ce plugin, cependant, il fonctionne côté client, donc tout est en JavaScript.

Cela signifie que nous devons être conscients des événements liés à l’élément afin de pouvoir les manipuler. Et c’est le point auquel je veux en venir dans ce post.

Bref:

Les éléments de menu sont associés à un événement de flou qui nous permet de déclencher afin que nous puissions manipuler les styles de la barre d’administration WP.

Certes, cela ne doit pas être isolé de la fonctionnalité côté client, mais si vous souhaitez manipuler les styles de l’élément de menu lorsque vous passez la souris sur l’élément avant de charger une autre page, c’est l’événement que vous souhaitez utiliser (à du moins au moment où j’écris cet article).

Si vous travaillez sur un plugin qui s’intègre à la barre de menus et que vous souhaitez manipuler les styles de barre d’administration WP avec JavaScript, l’événement de flou est celui que vous souhaitez utiliser chaque fois que votre élément de barre de menu particulier déclenche l’événement.