Erstellung der Navigation in WordPress 3.x

In diesem Artikel wird gezeigt, wie man in WordPress 3.0 und höher die neue Menüfunktion zur Erstellung der Navigation nutzt. Weiters erfahren Sie, wie Sie Ihrem WordPress Thema, das diese Funktion noch nicht anbietet, die neue Menü-Erstellung beibringen können.

Erstellung von Navigationsmenüs

Beginnen wir damit, erst einmal eine eigene Seitennavigation zu erstellen. Rufen Sie dazu den neuen Menüpunkt “Menüs” unter “Design” im Administrationsbereich auf. Erstellen Sie durch Klick auf das Plus-Symbol ein neues Menü. In unserem Beispiel erhält es den Namen “topnavigation”. Einer zweiten Navigation haben wir den Namen “bottomnavigation” verpasst.

Links davon sehen Sie in der Box “Seiten” Ihre vorhandenen Seiten, die Sie per Klick auf die Schaltfläche vor dem Seitennamen auswählen, und dann mit Klick auf “Zum Menü hinzufügen” dem neuen Menü “topnavigation” hinzufügen können. Sollten Sie eine Seiten nicht finden, dann klicken Sie “Zeige alle”. Dort finden Sie dann auch die WordPress-eigene “Startseite”.

Erwähnt sei, dass Sie jetzt auch beliebige Links in Ihre Seitennavigation aufnehmen können, und Kategorien sowieso. Das Erstellen “gemischter” Navigationen ist damit also kein Aufwand mehr.

Per Drag and Drop können Sie nun bei Ihrem eben erstellten Menü die Anordnung der Seiten verändern. Beachten Sie, dass die hierarchische Einteilung der Seiten neu vorgenommen wird, sie hat nichts mit der Einteilung der Seiten an sich zu tun. Sie könnten also im neuen Menü bisherige Kindseiten (also Unterseiten von Hauptseiten) gleichberechtigt neben Elternseiten stellen.

Wenn Sie bereits bei der Erstellung von Seiten Kindseiten angelegt haben, dann müssen Sie das Ihrem neuen Menü nochmals beibringen. Ziehen Sie dazu den Balken einer Kind-Seite ein wenig nach rechts.

Sie können den Namen eines Menüpunkts auch überschreiben. Das werden Sie vielleicht bei der Startseite (“Homepage”) tun wollen, wenn diese Seite einen anderen Namen hat. Im folgenden Beispiel erhält die Seite Willkommen bei der Trainer-Website, die als Startseite dient, im Menü im Feld “Angezeigter Name” den sichtbaren Menü-Namen Home.

Auf den richtigen Platz, fertig, los!

Wer bereits ein WordPress 3.0-fähiges Thema wie das neue TwentyTen verwendet, der muss jetzt nur mehr das neue Menü einem Menüplatz zuordnen und ist fertig. Das passiert mit Hilfe der Box “Anordnung im Theme” (“Theme Locations”). Das Thema TwentyTen kennt nur einen einzigen Platz für ein Menü und der heißt “Primäre Navigation”. Ein Navigationsmenü, das Sie diesem Platz in Twenty Ten zuordnen, wird als horizontales Menü direkt unter dem Kopfbild gezeigt. Natürlich können Sie trotzdem auch weitere Menüs erstellen, aber die müssten Sie bei Twenty Ten mit dem Widget “Individuelles Menü” (“Custom Menu”) in der Seitenleiste oder im Footer-Bereich anzeigen.

Fertig!

Lesen Sie weiter, wenn Ihr Thema diese neue Menügestaltung noch nicht anbietet, und Sie es ihm beibringen wollen. Achtung, ab hier muß es ein wenig “technisch” werden.

PHP Bastelstunde

Rufen Sie im Editor (“Design” -> “Editor”) die Datei auf, die das Menü anzeigen soll. In den meisten Fällen wird das die Datei header.php sein.

Suchen Sie nun die Stelle, an der die neugeschaffene Seitennavigation erscheinen soll. Eventuell steht dort noch ein Funktionsaufruf in der Art von

<?php wp_list_categories('title_li='); ?>

oder

<?php wp_list_pages('title_li='); ?>

Tragen Sie stattdessen folgendes ein, wenn es sich um ein (älteres) Thema handelt, das die neuen Registriermöglichkeiten für Navigationsplätze von WordPress 3.0 noch nicht nutzt.

<?php wp_nav_menu( array('menu' => 'topnavigation' ) ); ?>

Damit geben Sie an, dass Ihr neugeschaffenes Menü namens “topnavigation” an dieser Stelle gezeigt werden soll. Zum Behübschen der ganzen Sache und zur Nutzung zusätzlicher CSS-Anweisungen werfen Sie einen Blick in die Beschreibung der Funktion wp_nav_menu() im Codex von WordPress.

CSS zur Menügestaltung

Die Struktur, die von wp_nav_menu() erzeugt wird, sieht in unserem Fall (“topnavigation”) so aus.

<ul id="menu-topnavigation" class="menu">
  <li id="menu-item-70" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-2 current_page_item menu-item-70"><a href="#">Home</a></li>
  <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-72"><a href="#">Punkt 1</a>
  <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-71"><a href="#">Punkt 2</a></li>
    <ul class="sub-menu">
      <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-76"><a href="#">Unterpunkt</a></li>
    </ul>
  </li>
  <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-75"><a href="#">Punkt 3</a></li>
</ul>

Versuchen Sie also bei der Gestaltung nach Möglichkeit die <ul>-class-Attribute “menu” und “sub-menu” zu nutzen, denn in den IDs für <ul> stecken Ihre selbst gewählten Menübezeichnungen.

Registrierung von Navigationsplätzen in WP 3.0

Sie können aber auch gleich die Sache noch benutzerfreundlicher machen, indem Sie in Ihrem Thema eigene Plätze für Ihre Navigationsmenüs einrichten. Im Prinzip funktioniert das analog zur Registrierung von Sidebars.

Öffnen Sie im Editor (“Design” -> “Editor”) die Datei functions.php, und tragen Sie dort z.B. folgenden Code ein (innerhalb von <?php und ?>):

if ( function_exists( 'register_nav_menu' ) ) {
  register_nav_menu( 'primary', 'Primary Navigation Menu' );
  register_nav_menu( 'secondary', 'Secondary Navigation Menu' );
}

Damit registrieren Sie zwei Plätze für Navigationen in aktuellen WordPress-Versionen. Im angeführten Beispiel benutze ich den Platz “primary” für das Menü “topnavigation” am Kopf der Seite und den Platz “secondary” für das Menü “bottomnavigation” in der Fußzeile.

Jetzt richten Sie in der Datei header.php einen leicht anderen Aufruf der Funktion wp_nav_menu() ein:

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

bzw. in footer.php für das “Secondary Navigation Menu”

<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>

Sie geben damit also in header.php nicht mehr das konkrete Navigationsmenü (“topnavigation”) an, das Sie dort sehen möchten, sondern nur den Platz für ein Navigationsmenü (“primary”). Das konkrete Menü (in unserem Fall “topnavigation”) weisen Sie dann erst im Admin-Backend dem Platz (in unserem Fall “primary”) zu.

Geschafft!

Sie können nun ganz bequem im Menü-Bereich (“Design” -> “Menüs”) Ihre neugeschaffenen Navigationen den Plätzen “primary” oder “secondary” zuweisen (Box “Anordnung im Theme”).

Damit haben Sie Ihr Thema bezüglich Navigation WordPress 3.0-fähig gemacht. Wenn Sie Ihr Thema der Allgemeinheit anbieten möchten, dann vergessen Sie nicht eine Alternative für ältere WordPress-Versionen anzubieten.

Ähnliche Artikel:

• Navigation in WordPress mit mehr CSS-Klassen
• Anzeige von Unterseiten aus individuellen Menüs in der WordPress Seitenleiste
• Twenty Ten Child Thema anlegen

 
Wollen Sie den Artikel weiterempfehlen?