Individualisierung der WordPress-Toolbar

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 3 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet ...

Viele Plugins nutzen die Möglichkeit sich oben in die Toolbar einzunisten, um spezielle Funktionen einzubauen. Caching-Plugins nutzen das, um eine Möglichkeit anzubieten, den Cache zu löschen. Aber es gibt haufenweise Beispiele für die Nutzung der Toolbar. In manchen Installation ist dieser Bereich bereits ganz schön voll. Auf kleineren Bildschirmen auch mal zu voll, so dass die Inhalte in die Webseite hinein laufen. Wenn ihr bei euch noch Platz habt und wissen möchtet, wie ihr dort eigene Inhalte einbaut, dann lest doch weiter.

Wie schon geschrieben, gibt es haufenweise Plugins, welche die Toolbar erweitern. Ein schönes Beispiel ist „What the File“, was die aktuell genutzten Template-Dateien im Frontend anzeigt:

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Es gibt auch Plugins, wie zum Beispiel Toolbar Extras von David Decker, die das Konzept Toolbar auf eine ganz neue Ebene bringen. Es hat einige Erweiterungen und unterstützt diverse Themes und Plugins und zeigt entsprechend hilfreiche Links an:

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Oder die Idee die Toolbar via Menü zu befüllen:

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Es ist unfassbar wie viele Plugins es gibt, die als einzige Funktion das Ausblenden der Toolbar haben. Eines der besseren bzw. flexibleren, dürfte dieses hier sein, wo das Ausblenden auf Basis der Benutzerrolle individuell konfiguriert werden kann:

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

In eine ähnliche Kategorie fällt da Ausblenden des WordPress-Logo ganz oben links und die Anpassung der Begrüßung (im Englischen ein „Howdy“, was auf den texanischen Ursprung von Matt Mullenweg zurückzuführen ist).

Noch eine spannende Idee ist das Aktivieren/Deaktivieren der Plugins in die Toolbar zu bringen (so ähnlich wie beim Troubleshooting-Modus des „Health Check“-Plugins):

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Aber ist das eigentlich besonders schwer, so etwas selbst umzusetzen? Eigentlich nicht. Damit wir das Ganze einfach an- und ausmachen können, packen wir das Snippet in ein Functionality-Plugin:

<?php
/**
 * Plugin Name: Custom Toolbar
 * Description: Add custom toolbar items in frontent to check page and/or site.
 * Plugin URI:  https://torstenlandsiedel.de
 * Version:     1.0
 * Author:      Torsten Landsiedel
 * Author URI:  http://torstenlandsiedel.de
 * Licence:     GPL 2
 * License URI: http://opensource.org/licenses/GPL-2.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

Dann geht es richtig los. Wir starten eine Funktion und übergeben das aktuelle AdminBar-Objekt via Parameter, da wir den Action Hook admin_bar_menu benutzen werden:

/**
 * Add toolbar item
 *
 * @param  Object $admin_bar WPAdminBar object.
 */
function add_admin_bar_items( $admin_bar ) {

Das Ganze soll nur Administratoren angezeigt werden, also verlassen wir die Funktion sofort wieder, wenn wir nicht die nötigen Rechte haben:

	// Bail early if no admin.
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

Für diesen Artikel hatte ich die Idee, dass wir im Frontend Links einbauen, die zu Testseiten führen, also benötige ich den Eintrag nur im Frontend und somit verlasse ich die Funktion wieder, wenn es sich um den Adminbereich handelt:

	// Bail early if in admin area.
	if ( is_admin() ) {
		return;
	}

Jetzt wird es interessant. Ich erstelle ein Array und befülle es mit einem Array, der die Werte für den neuen Eintrag enthält. Da ich daraus ein Obermenüpunkt machen möchte (ohne eigenes Linkziel vergebe ich nur ID und einen Titel:

	$menu = array(

		array(
			'id'    => 'quick_menu',
			'title' => 'Quick Menu',
		),

Dann folgt der spannendste Eintrag. ID und Titel sind klar, nun kommt noch ein Linkziel (href) dazu (in diesem Fall der HTML-Check vom W3C) und ein parent wird definiert, was dafür sorgt, dass dieser Punkt unter den eben erstellten Punkt als Untermenüpunkt eingebaut wird. Da ich die Testseite in einem neuen Fenster/Tab öffnen möchte, vergebe ich noch via meta-Array ein target.

		array(
			'id'     => 'check_w3c',
			'title'  => 'Validate HTML',
			'href'   => 'https://validator.w3.org/nu/?doc=' . rawurlencode( get_permalink() ),
			'parent' => 'quick_menu',
			'meta'   => array(
				'target' => '_blank',
			),
		),

Jetzt das Menü-Array wieder schließen und dann einmal durch das Array per for/each-Schleife und die einzelnen Punkte via add_node-Methode hinzufügen.

	);

	foreach ( $menu as $args ) {
		$admin_bar->add_node( $args );
	}

Dann nur noch die Funktion beenden und via add_action die Funktion an den Action Hook admin_bar_menu hängen. Je nachdem welche Plugins sich da schon verewigt haben und welche Position erwünscht ist, muss der Wert am Ende (die Priorität) eventuell noch angepasst werden:

}

add_action( 'admin_bar_menu', 'add_admin_bar_items', 500 );

Das Endergebnis sieht dann so aus:

Hier das ganze als Gist und noch in voller Länge:

<?php
/**
 * Plugin Name: Custom Toolbar
 * Description: Add custom toolbar items in frontent to check page and/or site.
 * Plugin URI:  https://torstenlandsiedel.de
 * Version:     1.0
 * Author:      Torsten Landsiedel
 * Author URI:  http://torstenlandsiedel.de
 * Licence:     GPL 2
 * License URI: http://opensource.org/licenses/GPL-2.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Add toolbar item
 *
 * @param  Object $admin_bar WPAdminBar object.
 */
function add_admin_bar_items( $admin_bar ) {

	// Bail early if no admin.
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	// Bail early if in admin area.
	if ( is_admin() ) {
		return;
	}

	$menu = array(

		array(
			'id'    => 'quick_menu',
			'title' => 'Quick Menu',
		),

		array(
			'id'     => 'check_w3c',
			'title'  => 'Validate HTML',
			'href'   => 'https://validator.w3.org/nu/?doc=' . rawurlencode( get_permalink() ),
			'parent' => 'quick_menu',
			'meta'   => array(
				'title'  => __( 'Menu Title', 'textdomain' ),
				'target' => '_blank',
			),
		),

	);

	foreach ( $menu as $args ) {
		$admin_bar->add_node( $args );
	}

}

add_action( 'admin_bar_menu', 'add_admin_bar_items', 500 );

Wird die Toolbar überhaupt in Zukunft noch relevant bleiben? Im Full Screen Modus von Gutenberg ist sie komplett ausgeblendet. Obwohl es auch da Plugins gibt, die das wiederherstellen:

Click here to display content from WordPress.org.
Erfahre mehr in der Datenschutzerklärung von WordPress.org.

Kennst du noch mehr gute Toolbar-Plugins oder hast eine Idee, wie die Toolbar genutzt werden kann? Oder hast eine Meinung zum Block Editor und der Zukunft der Toolbar? Dann ab damit in die Kommentare!

4 Antworten auf Individualisierung der WordPress-Toolbar

  1. Ich habe bisher noch keine Dinge in die Adminbar eingefügt. Aber das sieht wirklich recht einfach aus. Bei einem meine älteren Plugins wäre das sogar echt nützlich gewesen. Danke auf jeden Fall für die Snippets, vielleicht kann ich sie ja doch mal brauchen.

    Ein Plugin hätte ich noch als Vorschlag. Es fügt sich nicht nur in die Adminbar, aber es wird von dort aus aufgerufen. Die Rede ist vom Query Monitor, ohne den ich bei der Entwicklung nicht mehr leben könnte.

    • Oh ja, Query Monitor nutze ich auch exzessiv. Vor allem beim Debuggen ist das Gold wert und darf in keinem Entwickler:innen-Baukasten fehlen.

  2. Tolle Idee die Adminbar zu nutzen um damit einen Prozess/externen Dienst zu starten.

  3. Wirklich gute Idee, so den Validator einzubinden.

    Um nur die Toolbar kurz auszublenden, nutze ich ein Browser-Plugin für Chrome: „WordPress Admin Bar Control“. Das macht nur genau das: Toolbar aus/an – ohne reload. Man kann natürlich auch einfach ein Inkognito-Fenster öffnen, aber das sind schon wieder mehr Geklicke.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert