Menu Seite ab WordPress 2.7 hinzufügen

In einer der letzten Beiträge habe ich für die Autoren von Plugins schon erklärt, wie ich Möglichkeiten ab Version 2.7 von WordPress nutze, um das Backend zu bereichern und an die Möglichkeiten anzupassen. Dabei kam es in den Kommentaren schon zur Frage, wie man denn eine Icon für Menupunkte, Top-Level, übergeben kann. Im Kommentar habe ich dabei nur sehr kurz eine Möglichkeit geschildert, die so funktioniert aber aus meiner Sicht besser und komfortabler für den User geht. Daher nun also eine ausführliche Lösung mit dem Hovereffekt für das Icon.

add_menu_page()

Die Funktion add_menu_page() existiert seit beginn von WordPress und hat nun ab Version 2.7 einen Parameter mehr – $icon_url.

add_menu_page( $page_title, $menu_title, $access_level, $file, $function = '', $icon_url = '' )

Dieser Parameter kann entweder einen Pfad zum Icon übergeben oder einen div, der dann via CSS angesprochen wird. Im weiteren möchte ich den Weg via CSS zeigen, weil man so die Möglichkeit des Hover-Effekt nutzen kann, der ab Version 2.7 von WordPress Standard ist und die Benutzerführung sehr angenehm gestaltet.

Beispiel Plugin

Im folgenden ist ein kleines Beispiel zum Nachvollziehen. Dabei habe ich das Plugin wie folgt erstellt und im Ordner /plugins/ der WP-Installation abgelegt.
→ plugins
   → test
     ⊥→ css
         ⊥→ style.css
     ⊥→ images
         ⊥→ fb_menu.png
     ⊥→ test.php

Im Plugin gibt es dann die folgende Funktion um den Menu-Punkt im Top-Level Bereich zu erzeugen. Dabei wird als letzter Parameter der Wert div übergeben.
Im Anschluss wird die Funktion via Hook aufgerufen, so dass der Menupunkt erzeugt wird und der Inhalt der Funktion zur Verfügung steht.

function add_menu_page_in_27() {
	add_menu_page(__('Test', 'test'), __('Test Description', 'test'), 9, basename(__FILE__), '', 'div');
}

add_action('admin_menu', 'add_menu_page_in_27');

Icon via CSS Sprites

Nun steht das HTML im backend, ein Icon ist damit aber noch nicht da und so nutzen wir die Möglichkeiten via CSS und erzeugen je nach Effekt das entsprechende Icon. Dazu nutze ich die Möglichkeit der CSS Sprites, die ich im Artikel „CSS Sprites einfach erklärt“ näher erläutere.

Als Icon lege ich dabei im Plugin eine Datei ab, die beiden Zustände enthält, siehe Abbildung.

Das zugehörige CSS sieht in meinem Beispiel wie folgt aus, welches ich im Ordner css des Plugins ablege und im Anschluss aufrufe.
Dabei wird das ID für den Menupunkt aus dem Namen der Datei erstellt – toplevel_page_test = toplevel_page_ + test.php.

#adminmenu #toplevel_page_test div.wp-menu-image {
	background: transparent url('../images/fb_menu.png') no-repeat scroll -1px -33px;
}
#adminmenu #toplevel_page_test:hover div.wp-menu-image,
#adminmenu #toplevel_page_test.wp-has-current-submenu div.wp-menu-image,
#adminmenu #toplevel_page_test.current div.wp-menu-image {
	background: transparent url('../images/fb_menu.png') no-repeat scroll -1px -1px;
}

wp_enqueue_style( 'test_css', plugins_url( $path = '/test/css/style.css'), array() );

Fazit

Damit steht eine saubere und übersichtliche Lösung bereit, die auch in kleineren Funktionen integriert werden kann, in dem man sie auf Basis der WP-Version abfragt.

if ( version_compare( $wp_version, '2.6.999', '>' ) ) {
 // ab Version 2.6.999
} else {
 // kleiner Version 2.6.999
}

Download:

Ist die Arbeit nicht 1 Euro wert?
Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.
Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.

Download als zip-Datei: mymenu27_test.zip – 1 kByte