23Mrz2011
Autor
Raptor
Kategorie
Bloggen
Keywords
, , , ,

WordPress Menüs und Themes

Wordpress Navigation und MenuesAls WordPress Theme Entwickler bzw. Designer wird man sehr oft mit der Frage über die Konfiguration der Menüs konfrontiert. Wer schon des öfteren mit WordPress oder besser gesagt der Erstellung eigener Themes zu tun hatte, kennt das Thema. Dieser Artikel ist jedoch nicht nur interessant für Entwickler oder Designer sondern auch für jene die ein Theme gekauft haben, welches mit der aktuellen WordPress Version vielleicht nicht kompatibel ist.

Seit WordPress 3.0 existiert ein neues Navigations-Menü System welches nicht nur sehr einfach zu konfigurieren ist sondern dazu auch sehr schnell in Aktion gebracht werden kann. Es gibt jedoch sehr oft mehr Fragen als der eine oder andere denkt. Für diese Fragen sollte dieser Artikel vielleicht ein wenig Abhilfe schaffen.

Zunächst zu den “Basics”: Das relativ WordPress-Menü System findet Ihr im Administrationsbereich im linken Hauptmenü, Design -> Menüs. Schauen wir uns einfach folgende fast schon selbsterklärende Punkte in der Menükonfiguration an:

wordpress menue

1. Anordnung im Theme: Sollte Euer Theme die Navigations-Menüs unterstützen, so werden dafür vorhergesehene Punkte innerhalb WordPress registriert damit Ihr Euer Menü von hier aus ganz einfach einfügen könnt. Sollte Euer Theme das Menü-System nicht unterstützen werdet Ihr in dieser Box eine Fehlermeldung bekommen. Ich kenne die Fehlermeldung der deutschen Version leider noch nicht aber englisch lautet sie wie folgt: “”The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.”. Kurz und mit anderen Worten heisst es nichts anderes als: “Dein WordPress Theme/Design unterstützt keine Menüs aber Du kannst ein eigenes Menü ebenso über die Widgets einfügen blablabla…!”

2. Die Menü Tabs (rechts): Hier legen wir die Namen der einzelnen Menüs fest welche wir auf unserem Blog darstellen möchten. Das “+” Zeichen fügt beim anklicken ein neues Menü hinzu.

3. Zum Menü hinzufügen: An dieser Stelle erscheinen noch weitere Meta-Boxes wie diese wo Ihr auswählen könnt, welche Inhalte in Eurer Navigation erscheinen soll wie z.B. individuelle Links, Seiten, Kategorien etc.

4. Die Menü-Inhalte: Wie der Name schon sagt :) verwalten wir hier die hinzugefügten Inhalte. Diese Inhalte erscheinen direkt nach dem speichern auf Eurem Blog in der Navigationsleiste,

Wordpress-Menü InhaltJeder Menü-Inhalt hat seine eigene Konfiguration. Sobald einer dieser Inhalte zum Menü hinzugefügt wurde, könnt ihr diesen öffnen und frei konfigurieren, Attribute hinzufügen oder andere Dinge damit ändern wie z.B. URL, Navigation Label, Titel/Beschreibung, CSS Classes, Link Relationship (XFN), Link Target.

Im Beispiel hier Links haben wir dem Menü z.B. einen Link zum Webroyals Forum hinzugefügt. Da wir unsere Navigation mit weiteren anderen Funktionen steuern seht Ihr im Beispiel leider die Möglichkeit zum Link Target festlegen nicht. Keine Panik, diese Funktion wird bei Euch ganz normal erscheinen :)

Das Menü für Euer Theme/Design registrieren

Um das WordPress Menü in Euer Design einzufügen müssen wir diese Punkte zuerst registrieren. Tun wir dies nicht, so wird WordPress später auf der Blogseite nicht wissen, welches von Euch angelegte Menü, wo auf der Seite erscheinen soll. Zwei bedeutende Funktionen sollten uns dabei helfen:

  • register_nav_menu(): Registriert einen einzelnen Theme/Design Punkt.
  • register_nav_menus(): Registriert wie man erahnen kann eine Reihe von Punkten.

In unserem Beispiel registrieren wir in unserem Design functions.php File ein einzelnes Menü, welches wir einfach mal “Primary Menü” nennen wollen.

add_action( 'init', 'register_my_menu' );

function register_my_menu() {
	register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}

Würden wir mehrere Menüs registrieren wollen, würde die Funktion wie folgt aussehen (wir verwenden für die weiteren Menüs dann die Namen “Secondary und Tertiary Menue. Natürlich könnt Ihr diese nennen wie ihr möchtet.):

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' ),
			'secondary-menu' => __( 'Secondary Menu' ),
			'tertiary-menu' => __( 'Tertiary Menu' )
		)
	);
}

Das Navigations-Menü auf der Blogseite darstellen

Es existieren wie bereits zu Beginn des Artikels erwähnt, zwei Möglichkeiten ein Menü darzustellen bzw. einzubinden. Eine Möglichkeit ist die wp_nav_menu() Funktion in einem Template File. die andere Methode ist die Darstellung über ein Widget.

Darstellung des Menüs über das Template

Die häufigste Methode ein Menü aufzurufen istt mit Sicherheit über das header.php Template. Im Prinzip könntet Ihr Eure Menüs aber überall aufrufen. Die einfachste Form zum aufrufen Eures Menüs erfolgt über diesen Befehl:

<?php wp_nav_menu(); ?>

Diese Funktion ruft das erste erstellte Menü auf, sofern wir eines konfiguriert haben. Da wir jedoch mehr Flexibilität haben möchten, geben wir uns mit dieser Funktion nicht gleich zufrieden und rufen nicht das einfach zuletzt konfigurierte Menü, sondern direkt unser “Primary Menu” auf:

<?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>

An dieser Stelle sollten wir vielleicht noch anmerken dass Ihr weit mehr Kontrolle zur Ausgabe der Menüs habt:

  • theme_location: Das aufzurufende Menü, welches mit der entsprechenden Theme-Location in Verbindung steht.
  • menu: Aufruf einer spezifischen Menü-ID, Beschreibung oder Name.
  • container: Das Element um die Liste. Als Standard wird hier div verwendet aber kann zu nav umbenannt werden falls Ihr mit HTML 5 arbeitet.
  • container_class: Die CSS Class des Containers.
  • menu_class: Die CSS Class für die ungeordnete Liste.
  • fallback_cb: Eine Funktion die den Fall anzeigt dass kein Menüpunkte angelegt wurden. Als Standard wird wp_list_pages() aufgerufen.
  • before: Text der vor dem Link Text aber im Link angezeigt wird.
  • after: Text der nach dem Link Text aber im Link angezeigt wird.
  • link_before: Text der vor dem Link angezeigt wird.
  • link_after: Text der nach dem Link angezeigt wird.
  • depth: Legt fest wie viele Level im Menü festgelegt werden. Sehr nützlich für z.B. Drop-Downs.
  • walker: Erlaubt eine eigene walker PHP Class um ein Menü zu konfigurieren.

Standardmässig gibt Euch WordPress die Möglichkeit, Eure Navigation auch als Widget in der Sidebar anzeigen zu lassen. Alles was Ihr dazu benötigt ist natürlich ein Theme, welches Widgets zulässt. Wir wollen aber das Widget-Thema überspringen da die Widgets selbst sehr einfach und relativ selbsterklärend sind.

Das Thema “stylen” kann ebenso weitaus grösser werden als man denkt und wäre an dieser Stelle vielleicht auch zu viel des Guten. Darum wollen wir es erst einmal bei der Einbindung belassen und hoffen Ihr könnt etwas mit diesen Informationen anfangen und Euer WordPress Theme auf den neuesten Stand bringen ;)

  • Facebook
  • Twitter
  • E-Mail
  • Google Bookmarks
  • Google Buzz
  • Yahoo! Bookmarks
  • LinkedIn
  • Digg
  • Windows Live
  • MySpace
  • Delicious
  • Bebo
  • FriendFeed
  • Google Reader
  • Yahoo Buzz
  • Identi.ca
  • Mixx
  • Netvibes
  • Newsvine
  • Posterous
  • Reddit
  • Slashdot
  • Squidoo
  • StumbleUpon
  • Technorati
  • Tumblr
Autor
Raptor

Kommentare

5 Kommentare zu "WordPress Menüs und Themes"

  • Meiky sagt:

    In dem Beispielfoto hier steht ein Feld für css Class – das hab ich, nicht nach neustem Update in meinem Menu. Wo kommt das denn her?

    • Raptor sagt:

      Hey Meiky, ich muss ganz verwundert sagen dass ich gerade ebenso mal nachgeschaut habe. Bei einer meiner Blog Installationen die nicht auf WordPress 3.1.1 geupdated wurden erscheint dieses Feld. Bei Version 3.1.1 sehe ich dieses CSS Feld allerdings auch nicht mehr. Ich werde mich mal erkundigen woran das liegen könnte. Danke für den Hinweis :)

  • Gienna sagt:

    Da ich grad noch vor dem selben Problem stand…
    Diese Felder lassen sich, wenn man auf “Optionen einblenden” (oben rechts) klickt mit nem Häkchen bei CSS-Klassen aktivieren.

  • troller sagt:

    Manchmal sieht man den Wald vor lauter Bäumen nicht :D Danke für den Hinweis! Sollte man vielleicht noch im Artikel jinzufügen.

  • 3eich03 sagt:

    Dieser Beitrag hat mir sehr geholfen, vielen vielen Dank! :)

Kommentar hinzufügen