Weitere Möglichkeiten um die Navigation umzusetzen

Im folgenden Abschnitt werde ich Ihnen einige Möglichkeiten aufzeigen, wie Sie ein Navigationsmenü aufbauen können, welches von dem Standard abweicht.

Plugins

Wie Sie mit Hilfe von Plugins in den Aufbau der Navigation eingreifen können, haben Sie bereits im vorherigen Abschnitt erfahren. Mit Hilfe des Plugins " Flexi Pages Widget " können Sie bequem bestimmen, welche Pages und vor allem wann sie im Menü auftauchen sollen.

Ein weiteres Plugin welches Sie verwenden können ist Subpages Extended . Die Bedienung dieser Erweiterung ist sehr einfach, wer dennoch nicht weiter kommt, kann sich den folgenden Artikel und/oder das folgende Video anschauen.

Code-Lösungen (1)

Recht häufig wird von den Kunden der Wunsch geäußert an einer Stelle, die Top-Level-Seiten ("Eltern" bzw. "Vorfahren" 1. Grades) anzuzeigen und anderswo auf der Seite, die untergeordneten Seiten ("Kinder" und "Enkel"). Mit folgendem Code zeigt man nur die Top-Level-Seiten an:

Code: Nur die Top-Level-Seiten anzeigen

              <ul id="hauptnavi">
               
               <?php wp_list_pages('sort_column=menu_order&title_li=&depth=1'); ?>
               
              </ul>

Diesen Code würde man klassischerweise oben im Kopfbereich unterbringen. Der Wert 1 bei dem Parameter depth ist dafür verantwortlich, dass nur die Seiten der obersten Ebene aufgelistet werden.

Jetzt geht es darum an der gewünschten Stelle, zum Beispiel in der Sidebar, die untergeordneten Seiten anzuzeigen:

              <?php
               
              if($post->post_parent) { /*Die Seite ist eine "Kind-Seite"*/
               
               wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->post_parent);
               
              }
               
              elseif(wp_list_pages("child_of=".$post->ID."&echo=0")) { /*Die Seite hat "Kinder"*/
               
               wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID);
               
              }
               
              ?>

Das obere Code-Beispiel ist dafür zuständig, auf den Seiten (Pages), die Unterseiten haben, diese auch als Listen auszugeben. Zuerst prüft der Code, ob die Seite, auf der man sich aktuell befindet, eine Unterseite ("Kind-Seite") ist. Wenn ja, dann werden hier alle Unterseiten der jeweiligen Eltern-Seite aufgelistet.

Anschließend wird geprüft, ob die aktuelle Seite selbst auch Unterseiten hat, wenn ja, dann werden auch diese Unterseiten aufgelistet.

Man könnte das auch in Klarsprache ausdrücken: "Wenn du ein Kind bist, dann zeige mir deine Geschwister. Wenn du Elternteil bist, dann zeige mir deine Kinder."

Code-Lösungen (2)

Eigentlich war es geplant, dass ich diese zweite Code-Lösung nicht hier in den Unterlagen erwähne, da an der Dropdown-Navigation viele Leser scheitern - und zwar nicht an dem WordPress-Code sondern an dem CSS. Um das folgende Beispiel nachzuvollziehen sind daher gute CSS-Kenntnisse notwendig.

Die Lösung basiert zwar nicht an dem uns bereits bekannten Template-Tag wp_list_pages(); sondern an der Menüfunktion von WordPress: wp_nav_menu(); . Hat man diese Funktion aktiviert, dann erscheint im Adminbereich unter dem Menüpunkt Design ein weiterer Unterpunkt mit dem Namen Menüs . Dort kann man dann individuelle Navigationmenüs per Klicken und Ziehen erstellen.

Das folgende Beispiel stammt von meiner Herr-der-Ringe-Website und dort kann man das Live und in Farbe begutachten.

Zuerst aktivieren und definieren wir diese Funktion in der functions.php :

              // Menü-Funktion aktivieren
               
              function die_hauptnavi() {
               
              register_nav_menus(
               
              array(
               
              'haupt_navi' => 'Die Hauptnavigation',
               
              )
               
              );
               
              }
                
              add_action( 'init', 'die_hauptnavi' );
                
              // Abfragen ob ein Menü erstellt wurde, wenn nicht...
               
              function meine_hauptnavi() {
               
               if ( function_exists( 'wp_nav_menu' ) )
               
               wp_nav_menu( 'menu=haupt_navi&container_class=pagemenu&fallback_cb=die_ersatznavi' );
               
               else
               
               die_ersatznavi();
               
              }
                
              // Die Definition der Ersatzlösung
               
              function die_ersatznavi() {
               
               wp_list_pages('title_li=&depth=1');
               
              }

Damit haben Sie sowohl die Menüfunktion aktiviert als auch eine Ausweichlösung definiert, falls kein Menü definiert wurde. Im übrigen müssen Sie dies, wenn Sie das Standard-Theme von WordPress nutzen nicht machen. Dort wurde diese Funktionalität bereits aktiviert.

Im Theme selber, zum Beispiel in der header.php , wird das individuelle Menü, dann durch <?php meine_hauptnavi(); ?> eingebunden.

Im HTML-Quelltext schaut das ganze dann folgendermaßen aus:

              <div 
              class="pagemenu">
               
               <ul 
              id="menu-hauptnavi" class="menu"
              >
               
               <li id="menu-item-575" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-575"><a title="Bebilderte Zusammenfassungen von Der Hobbit und Herr der Ringe" href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/">Zusammenfassungen</a>
               
               <ul 
              class="sub-menu">
               
               <li id="menu-item-612" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-612"><a href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/einstieg-in-tolkiens-mittelerde/">Einstieg in Tolkiens Mittelerde</a></li>
               
               <li id="menu-item-582" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-582"><a href="http://www.faszination-tolkien.de/zusammenfassung-hobbit-herr-der-ringe/hobbit/">Der kleine Hobbit</a></li>
               
               ...
               
               </ul>
               
               </li>
               
               <li id="menu-item-576" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-576"><a title="Die Ringe der Macht" href="http://www.faszination-tolkien.de/die-ringe-der-macht/">Die Ringe</a></li>
               
               <li id="menu-item-577" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-577"><a title="Die Geschichte von Mittelerde" href="http://www.faszination-tolkien.de/geschichte-arda-mittelerde/">Geschichte</a>
               
               <ul class="sub-menu">
               
               ...
               
               </ul>
               
               </li>
               
               ...
               
               </ul>
               
              </div>

Damit ganze noch übersichtlich bleibt, habe ich das Beispiel auf das notwendige gekürzt.

Wie Sie sehen, liefert uns auch hierbei WordPress automatisch Werte für id - und class -Attribute und zwar für das Menü, für die Liste und für die Untermenüs. Damit haben wir Punkte, an denen wir mit CSS ansetzen können.

Und hier die CSS-Regeln:

              #menu-hauptnavi {
               
               list-style: none; margin: 0; padding: 0;
               
               position: absolute; top: -86px; left: 0;
               
              }
                
              .pagemenu li {float: left; position: relative;}
                
              .pagemenu a {
               
               color: #eee; text-decoration: none;
               
               float: left;
               
               line-height: 40px;
               
               padding: 0 8px; margin: 0 1px;
               
              }
                
              .pagemenu a:first-child {margin-left: none;}
                
              .pagemenu a:hover, .pagemenu .current-menu-item a, .pagemenu .current-menu-parent a {
               
               background: #8b9b87 url(img/hover.png) repeat-x;
               
               color: #2B3A27; font-weight: normal;
               
              }
                
              .pagemenu li:hover {background: #8b9b87 url(img/hover.png) repeat-x;}
                
              .pagemenu .sub-menu {
               
               padding: 0 0 2px 0; margin: 0; list-style: none;
               
               position: absolute; top: -999px;
               
               background: #a1ad9e;
               
               opacity: 0;
               
              }
                
              .sub-menu li {float: none; display: block; position: static; padding-bottom: 1px;}
                
              .pagemenu li:hover .sub-menu {
               
               background: #8b9b87;
               
               top: 40px;
               
               opacity: 1;
               
               -webkit-transition: opacity .4s ease-in-out; transition: opacity .4s ease-in-out;
               
              }
                
              .pagemenu .sub-menu a {
               
               padding: 3px 10px; margin: 0;
               
               display: block; float: none;
               
               color: #2b3a27; background: none;
               
               line-height: 1.5; white-space: nowrap;
               
              }
                
              .pagemenu li ul a:hover {color: #eee; background: #425c3b;}

Das Ganze schaut dann auf der HdR-Seite dann so aus:

Abbildung 10: Dropdownmenü im Einsatz

Um so ein Dropdownmenü zu realisieren, müssen Sie nicht mit wp_nav_menu(); arbeiten, Sie können auch auf den alten Bekannten wp_list_pages(); zurückgreifen. Sie müssen lediglich per CSS die Untermenüs in der Standardansicht verstecken und die sie erst beim hover , also beim Mouseover, sichtbar werden lassen.

Eigenes WordPress-Theme erstellen

Suchmaschinenoptimierung, WP als CMS, Navigations-Alternativen und ein paar abschließende Tipps: Weitere Möglichkeiten um die Navigation umzusetzen

Auf dieser Seite

Plugins

Code-Lösungen (1)

Code-Lösungen (2)