Kategorien
(Free-) Software PHP Websiteerstellung Wordpress

WordPress – Nur Unterseiten in der Sidebar anzeigen

Wordpress LogoEs ist schon einige Male gewünscht worden, dass die Seitennavigation Oben das Hauptmenü anzeigt und in der Sidebar dann nur die Unterseiten zum gewählten Hauptmenüpunkt.
Nachfolgend möchte ich zwei Wege zeigen, wie das realisiert werden kann…
 


1. Individuelle Menüs
Die Vorgehensweise hier besteht darin, dass für jeden Bereich ein eigenes Menü angelegt wird, also eines für die Hauptnavigation sowie jeweils eines für jedes Untermenü.
Das ist zwar aufwändig, aber damit hat man auch die volle Kontrolle über die Menüpunkte, die erscheinen sollen. Hier auch unabhängig, wo die Seiten tatsächlich in der Struktur angelegt worden sind.
In der Sidebar werden dann über das Standard-Widget für ein „Individuelles Menü“ alle (!) Submenüs eingefügt und beregelt über ein PlugIn, wie z.B. Dynamic Widgets, nur beim jeweils passenden Hauptmenüpunkt eingeblendet.
Der Vorteil an dieser Stelle liegt auch darin, dass die komplette Umsetzung ohne Anpassungen im Code auskommt und z.B. auch nach einem Themewechsel erhalten bleibt.

2. Komplettes Menü
Ein anderer Weg ist es, ein komplettes Menü zu erstellen, welches alle nötigen Menüpunkte enthält.
Sollen alle Seiten enthalten sein, reicht ggf. sogar die Standardausgabe ohne die Anlage einer eigenen Menüstruktur.
Dann ist jedoch ein wenig ‚Programmieraufwand‘ notwendig, der sich jedoch sehr in Grenzen hält.
Empfehlenswert ist es an dieser Stelle jedoch mit einem s.g. Childtheme zu arbeiten und nicht – sofern es sich nicht sowieso um ein eigenes Theme handelt – die originalen Themedateien anzupassen. Diese Anpassungen könnten im schlimmsten Falle nämlich beim nächsten Update verloren gehen…

2.1 Das Hauptmenü muß so eingebunden werden, dass nur die oberste Menüebene angezeigt wird.
Dazu wird in den Themedateien (meist in der header.php) nach dem Aufruf für das Menü gesucht und dieser ersetzt bzw. erweitert:

// VORHER
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );

// NACHHER
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'depth' => '1' ) );

Hier wurde also, gemäß den lt. WordPress-Codex verfügbaren Optionen, nur die Anzeigetiefe auf die erste Ebene beschränkt.

2.2 Nur die erwünschten Menüpunkte in der Sidebar anzeigen
Dazu wird zunächst über das Standard-Widget für ein „Individuelles Menü“ unser Hauptmenü komplett noch einmal in der Sidebar eingebunden.
Die Punkte, die nicht zum aktuellen Menübaum gehören blenden wir via CSS aus. Genau genommen blenden wir mit den folgenden Zeilen zunächst alles aus und nur den aktuellen Zweig des Menüs wieder ein.
Eingefügt werden diese Zeilen in die Datei style.css des aktuellen (Child-) Themes.

UPDATE 11/2014:
Kevin hat noch eine Verbesserung gepostet, bitte nutzt deshalb den erweiterten CSS-Code aus seinem Kommentar!

/* Menu in der Sidebar (nur Subpages anzeigen) */
.widget_nav_menu li {
  display: none;
}
.widget_nav_menu .current-page-ancestor, 
.widget_nav_menu .current-page-ancestor li,
.widget_nav_menu .current_page_item,
.widget_nav_menu .current_page_item li {
  display: block;
}

Beide Wege führen zum gewünschten Ergebnis, wie es umgesetzt wird liegt dann halt an den eigenen Wünschen und Möglichkeiten.

6 Antworten auf „WordPress – Nur Unterseiten in der Sidebar anzeigen“

Hi, der Tipp war genau was ich gesucht habe als WP Quereinsteiger (vorher Joomla!).
Nur gab es ein kleines Problem. Wenn man dann ein Punkt aus der 2. Ebene anklickt wechselten die Klassen so das wieder alles ausgeblendet wurde.
Die korrekte und aktuelle CSS Anpassung (Nov 2014) wäre so:

.widget_nav_menu .current-page-ancestor,
.widget_nav_menu .current-page-ancestor li,
.widget_nav_menu .current_page_item,
.widget_nav_menu .current_page_item li,
.widget_nav_menu .current-menu-ancestor,
.widget_nav_menu .current-menu-parent,
.widget_nav_menu .current-menu-ancestor .sub-menu li,
.widget_nav_menu .current-menu-parent .sub-menu li
{
display: block;
}

Eventuell eine Aktualisierung wert

Hallo,
das ist auch genau das was ich gesucht habe. Es funktioniert aber nicht ganz so wie ich es brauche und ich komme nicht dahinter. Bei mir wird zwar korrekt nur das Submenü angezeigt welches ausgewählt wurde, aber immer noch mit der ersten Ebene. Ich würde gerne nur die Links anzeigen, die unter dieser Ebene sind, da diese ja schon oben im Hauptmenü ist.
Was mache ich falsch?

Leider ist das nicht online, sondern nur lokal, aber ich stelle den betreffenden Code hier mal rein. Ich habe den Code schon etwas kleiner gemacht, da der gleiche Effekt erzielt wurde. Hier ist die Menüstruktur, die WordPress automatisch in meiner Sidebar (ich nutze kein Widget, sondern schreibe ein eigenes Theme) anlegt:

Home 
Einführung 
Aktuelles 


Der Tell
Beschreibung
Topographie

Mein CSS sieht so aus:

#SecondaryNavigation a {
	color: #0F2A37;
	padding-right: 15px;
	font-size: 12px;
	line-height: 30px;
	text-decoration: none;
}
#SecondaryNavigation a:hover {
	color: #781F24;
}
#SecondaryNavigation .menu-item {
	background-color: #dddbd4;
	border-bottom: 1px solid #FFF;
	display: none;
	text-align: right;
	width: 100%;
	float: left;
  clear: right;
}
#SecondaryNavigation .current-menu-item {
	background-color: #868e8a;
}

#SecondaryNavigation .current-menu-item a {
	color: #FFF;
}

/* Menu in der Sidebar (nur Subpages anzeigen) */
#SecondaryNavigation .current-menu-ancestor,
#SecondaryNavigation .current-menu-ancestor li
{
	display: block;
}

Ich glaube so ein bisschen, das Problem liegt darin, dass ich nicht die Überschrift (in meinem Fall also Home) nicht einzeln ansprechen kann poder?

Hallo Sebastian,
das Menü sieht also so aus:
1. Ebene: Home / Einführung / Aktuelles
2. Ebene: Der Tell / Beschreibung / Typographie

Ich habe das gerade in einer Seite wie folgt gelöst, wobei der Menü-Aufruf im Quelltext so aussah:

wp_nav_menu( array( 'theme_location' => 'MENUENAME', 'menu_class' => 'nav-menu' ) );

Und das zugehörige CSS. Einiges davon ist nicht zwingend nötig, aber für das Gesamtbild vlt. ganz gut.
In der Ausgabe habe ich ein fixiertes Menü mit zwei Zeilen, wobei die zweite Zeile immer das entsprechende Submenü zeigt:

/* Menustyles */
  .nav-menu {
    position: absolute;
    right: 1em;
    bottom: 1em; 
    margin-bottom: 0;  
    width: 100%;
  }
  .nav-menu .sub-menu {
    display: none;
  }
  .nav-menu .current-menu-parent .sub-menu {
    display: block;
    position: absolute;
    right: 2.1em;
    bottom: -3.2em; 
    margin-bottom: 0;
  }
  ul.nav-menu, ul.sub-menu {
    list-style: none; 
  }  
  ul.nav-menu li {
    float: right;
    margin-left: 1em; 
    text-transform: uppercase;
  }                                           
  .nav-menu li a {
    font-size: 1.143em;
  }                               
  .nav-menu li.current-menu-ancestor a,
  .nav-menu li.current-menu-item a {
    color: green;
  }
  .nav-menu li.current-menu-ancestor .sub-menu a {
    color: black;
  }
  .nav-menu .sub-menu li.current-menu-item a {
    color: green;
  }

Ist eine weitere alternative Lösung, aber vlt. sogar besser nutzbar?
Ansonsten mail mir bitte mal den kompletten Quelltext der erzeugten Seite… hier in den Kommentaren wird das zu viel, denke ich.

Schreibe einen Kommentar zu Eike Vogt Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert