Manipulieren von WP-Admin-Bar-Stilen mit Ereignissen

Ich habe gemischte Gefühle in Bezug auf die WordPress-Admin -Leiste, aber das hat damit zu tun, wie Lösungen von Drittanbietern ihre Optionen hinzufügen (außerdem kann sie deaktiviert werden, wenn Sie kein großer Fan davon sind).

Kürzlich habe ich ein kleines Plugin veröffentlicht – das hauptsächlich für Entwickler gedacht ist – das es Benutzern ermöglicht, Admin-Benachrichtigungen umzuschalten, wenn sie mit WordPress arbeiten (idealerweise in ihrer lokalen Umgebung, obwohl es überall dort installiert werden kann, wo WordPress installiert ist).

Das Plugin ist einfach:

• Es führt ein Element in die WP-Admin-Leiste ein,
• Wenn Sie auf ein Element klicken, werden alle angezeigten Hinweise oder Nachrichten umgeschaltet.
• Wenn Sie erneut darauf klicken, wird ihre Sichtbarkeit umgeschaltet.

Aber es gibt eine kleine Nuance, die es meiner Meinung nach wert ist, behandelt zu werden, und die mit der Manipulation der WP-Verwaltungsleistenstile mit clientseitigem Code zu tun hat.

All dies wird im ersten Beitrag behandelt, aber ein Aspekt des Codes, den ich denke, ist es wert, für diejenigen, die mit der Admin-Leiste arbeiten, und für diejenigen, die mit JavaScript arbeiten, geteilt zu werden.

Stile der WP-Verwaltungsleiste

Wenn Sie sich den Quellcode des im Plugin enthaltenen JavaScripts ansehen, sehen Sie Folgendes :

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

Im Allgemeinen wird ein Benutzer, wenn er auf ein Element in der WP-Verwaltungsleiste klickt, auf eine andere [Server]-Seite umgeleitet oder ein Untermenüelement angezeigt, das dasselbe tut. Im Fall dieses Plugins funktioniert es jedoch auf der Client-Seite, also ist alles JavaScript.

Das bedeutet, dass wir uns der Ereignisse bewusst sein müssen, die an das Element gebunden sind, damit wir sie manipulieren können. Und darum geht es mir in diesem Beitrag.

Zusamenfassend:

Menüpunkten ist ein Blur-Ereignis angehängt, mit dem wir auslösen können, damit wir die Stile der WP-Admin-Leiste manipulieren können.

Zugegeben, dies muss nicht von der clientseitigen Funktionalität isoliert werden, aber wenn Sie die Stile des Menüelements ändern möchten, wenn Sie mit der Maus über das Element fahren, bevor Sie eine andere Seite laden, ist dies das Ereignis, das Sie verwenden möchten (at zumindest zum Zeitpunkt des Schreibens dieses Beitrags).

Wenn Sie an einem Plug-in arbeiten, das in die Menüleiste integriert ist, und Sie die Stile der WP-Admin-Leiste mit JavaScript manipulieren möchten, ist das Blur-Ereignis dasjenige, das Sie verwenden möchten, wenn Ihr bestimmtes Menüleistenelement das Ereignis auslöst.