WEBDESIGN

WordPress 3.3 Toolbar anpassen / verändern

Seit Version 3.3 hat sich die Admintoolbar von WordPress stark verändert und meiner Meinung nach auch verbessert. Trotzdem ist der ein oder andere vielleicht noch nicht ganz zufrieden und würde gerne einige Optionen ausblenden oder neue hinzufügen.

Die WordPress Toolbar API

Die neue Toolbar ist ein Objekt erzeugt aus der Klasse WP_Admin_Bar (wp-includes/class-wp-admin-bar.php). Wenn man die Klasse nun genauer betrachtet findet man einige nützliche Methoden.

  • add_node() — neuen Knoten der Toolbar hinzufügen
  • remove_node() — Knoten der Toolbar löschen
  • get_node() — Daten eines Knotens auslesen
  • get_nodes() — Liste aller Knoten auslesen

Toolbar Knoten entfernen

Um bestimmt Knoten aus der Toolbar zu entfernen, erstellen wir ein kleine Funktion in der functions.php Datei des Themes. Die Funktion soll später auch noch mehr können, als nur Knoten zu entfernen, deswegen geben wir ihr einen allgemeineren Namen wie z.B. change_toolbar().

    function change_toolbar($wp_toolbar) {} 
    add_action('admin_bar_menu', 'change_toolbar', 999); 

Zusätzlich zur Definition der Funktion, muss sie natürlich auch noch mit add_action auf die Toolbar gehooked werden.

Als nächstes kann man mit Hilfe der oben genannten Methoden der Klasse WP_Admin_Bar beliebige Knoten entfernen. Doch um einen Knoten zu entfernen, muss man wissen unter welcher ID dieser definiert ist. Dazu verwendet man am einfachsten Firebug, oder ein anderes Entwicklertool. Unter Firefox (aber auch bei fast jedem anderen Browser) genügt dann ein Rechtsklick auf die Admin Bar und im Kontextmenü muss dann noch die Option Element untersuchen geklickt werden.

Nun sollte folgendes Fenster erscheinen, wenn man andere Entwicklertools verwendet (z.B. von Chrome) sieht man etwas ähnliches.
admin bar wordpress WordPress 3.3 Toolbar anpassen / verändern

Die einzelnen Knoten sind dabei die Listenelemente, jedes dieser Listenelemente hat eine ID. Die ID hat folgende Form wp-admin-bar-CODE, der hintere Code dient zur internen Identifizierung des Knotens.

Wenn wir jetzt also z.B. das Logo aus der Toolbar entfernen möchten und sonst nichts weiter, würde die Funktion change_toolbar() folgendermaßen aussehen:

function change_toolbar($wp_toolbar) {
$wp_toolbar->remove_node('wp-logo');
} 

Neuen Knoten der Admin Toolbar hinzufügen

Das Hinzufügen eines neuen Knotens läuft Analog zum Entfernen und kann deshalb auch in derselben Funktion definiert werden. Mit der Methode add_node() können neue Knoten hinzugefügt werden, dabei wird der Methode ein Array übergeben das sämtliche Daten des neuen Knotens enthält.

function change_toolbar($wp_toolbar) {
$node = array(  
    'id' => 'st_help',  
    'title' => 'Help',  
    'href' => 'http://staticfloat.com/support/',  
    'meta' => array('onclick' => 'alert("alles ist cool!")')  
);
$wp_toolbar->add_node($node);
} 

Die Variable $node ist ein Array mit folgendem Inhalt:

  • id — Die ID des Knotens
  • title — Der Titel des Knotens
  • parent — Die ID des Eltern Menüs (optional)
  • href — Die URL des Links (optional)
  • group — true wenn der Knoten eine Gruppe sein soll (optional)
  • meta — wieder ein Array, indem sämtliche zusätzliche Daten des Knotens/Links definiert werden können (z.B. class, onclick, target, title etc.)

Beides zusammen

Die komplette Funktion, welche nun das Logo aus der Admin Toolbar entfernt und einen neuen Link hinzufügt:

function change_toolbar($wp_toolbar) {
// Knoten entfernen
$wp_toolbar->remove_node('wp-logo');

// Knoten hinzufügen
$node = array(  
    'id' => 'st_help',  
    'title' => 'Help',  
    'href' => 'http://staticfloat.com/support/',  
    'meta' => array('onclick' => 'alert("alles ist cool!")')  
);
$wp_toolbar->add_node($node);

} 


Kommentare ( 1 Kommentar )

  • Oliver Antworten ↓

    Mit dem Parameter parent kann man es auch in die Unterordner schieben:

    	$node = array(
    		'id' => 'simple-cache',
    		'title' => '<span class="ab-icon" style="float:right;background:url('.plugins_url('img/icon.png', __FILE__).')"></span> Superduperfunktion',
    		'href' => admin_url('options-general.php?page=plugin-options'),
    		'parent' => 'appearance'
    	);
    

    Dann steht der Eintrag unter dem Menü, wo auch die Widgets und die Themeoptionen stehen.

Schreib einen Kommentar