Die Navigation in WordPress hat man ja mittels wp_list_pages ganz gut im Griff und dank „current_page_item“ kann man sogar die aktive Seite hervorheben. Nun willst Du aber die Startseite ebenfalls in das Menue aufnehmen und dann auch noch hervorheben? Da ist etwas Handarbeit gefragt.

Das Menue in WordPress

Zunächst solltest du eine Liste erstellen, die du dann mittels CSS zu einem Menue formst. Hier auf dem Tocki-Blog verwende ich etwa das hier:

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

Das bedeutet: Mache eine ul-Liste, die den Namen „Menu“ hat. Sortiere die Einträge nach der Reihenfolge, die ich im Backend von WordPress angegeben habe (sort_column=menu_order), zeige dabei lediglich die Hauptseiten in der Liste an (depth=1) und sorge dafür, dass jeder Menue-Eintrag zwischen <li> und </li> ausgegeben wird (title_li=). Das erzeugt einen Quelltext, der so aussieht:

<ul id="menu">
 <li><a href="https://blog.tocki.de/who-is/">who is?</a></li>
 <li><a href="https://blog.tocki.de/datenschutz/">Datenschutz</a></li>
</ul>

Das kann man natürlich vorzüglich mit CSS gestalten. Mein CSS zum Menue sieht folgendermasen aus:

ul#menu {
list-style-type:none;
width:auto;
position:relative;
display:block;
height:30px;
float: right;
}

ul#menu li {
display:block;
float:left;
margin:0;
padding:0;
}

ul#menu li a {
display:block;
float:left;
color: #333333;
text-decoration:none;
padding:8px 12px 0 12px;
height:22px;
}

ul#menu li a:hover {
color: #ff01d8;
height:22px;
}

ul#menu .current_page_item a, ul#menu .current_page_parent a {
color: #0098ff;
display:inline;
height:22px;
float:left;
margin:0;
}

Dabei kann man sehen, dass ich eine Formatierung für den Zustand .current_page_item vorgesehen habe, um die jeweils aktive Seite im Menue hervorzuheben. Befindet man sich nämlich z.B. auf der Seite who is, dann wird als Quellcode folgendes ausgegeben:

<ul id="menu">
 <li class="current_page_item"><a href="https://blog.tocki.de/who-is/">who is?</a></li>
 <li><a href="https://blog.tocki.de/datenschutz/">Datenschutz</a></li>
</ul>

Link zur Startseite hinzufügen

Leider sieht WordPress nicht vor, dass die Startseite in dieses Menue eingebunden werden kann. Daher muss man sich mit einem Trick behelfen. Man vor den von den wp_list_pages einen Listeneintrag mit dem Link zur Startseite ein. Also so:

<ul id="menu">
  <li><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

Damit haben wir einen Link zur Startseite, der auf die selbe CSS Gestaltung hört, wie der Rest des Menues. Im nächsten Schritt geht es nun an die eigentliche Kunst, dass der Status der Startseite abgefragt wird.

Aktiver Status für die Startseite

Der oben hinzugefügte Link zur Startseite bringt leider nicht das Attribut .current_page_item im aktiven Zustand mit. Und hier kommt die angedrohte Handarbeit. Man ist ja mit solchen Ideen selten alleine und so gibt es auch für dieses Problem bereits eine Lösung von Texto.de, die ich leicht angepasst habe.

<?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>

Mit dieser Abfrage wird also abgefragt, ob die Seite, auf der wir uns befinden keine „Seite “ ist (!is_page). Wenn dem so ist, dann wird als Klasse eben das gewünschte .current_page_item ausgegeben. Andernfalls eben nicht. Keine „Seiten“ sind im Prinzip alle Seiten, außer denen, die tatsächlich extra angelegte Seiten sind. In diesem Blog also who is und Datenschutz. Bei allen anderen „Seiten“, also z.B. der Suche, Archiven, Artikeln und natürlich der Startseite, wird für den Startseiten-Eintrag im Menue der Status .current_page_item ausgegeben.

Natürlich kann man die Abfrage auch anpassen , sodass tatsächlich ausschließlich die Startseite als aktiver Status ausgegeben wird. Dann muss die Zeile so heißen:

<?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>

Eingebaut sieht das Ganze dann folgendermaßen aus:

<ul id="menu">
  <li<?php if(!is_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>
</ul>

Soweit. Viel Spaß damit.