Navigation in Wordpress mit mehr CSS-Klassen

Standardmäßig sieht der HTML Quelltext der Seiten-Navigation bei Wordpress ja so aus:

<ul>
   <li class="page_item page-item-4"><a href="..." title="Seite 1">Seite 1</a>
   <ul>
     <li class="page_item page-item-7"><a href="..." title="Seite 1.1">Seite 1.1</a></li>
   </ul>
   </li>
</ul>

Manchmal bräuchte man aber mehr an CSS-Attributen in der Navigation. Schön wäre, so etwas zu haben:

<ul class="level1">
  <li class="level1 page_item page-item-4"><a class="level1" href="..." title="Seite 1"><span>Seite 1</span></a>
    <ul class="level2">
      <li class="level2 page_item page-item-7"><a class="level2" href="..." title="Seite 1.1"><span>Seite 1.1</span></a></li>
    </ul>
  </li>
</ul>

Die Angabe des Levels (level1, level2, …) bei den <ul>-Anweisungen konnte ich nicht erreichen, aber mit der folgenden Anweisung in sidebar.php kommt man sehr weit:

<?php
$fullnavigation = preg_replace('@\<li([^>^]*)>\<a([^>^]*)>(.*?)\<\/a>@i','<li$1><a$1$2><span>$3</span></a>',wp_list_pages('title_li=&echo=0' ));
echo $fullnavigation;
?>

Was passiert dabei: das Menu wird nicht sofort ausgegeben, sondern in eine PHP-Variable namens $fullnavigation geschrieben (dafür sorgt “echo=0″ in der Attributliste von wp_list_pages). Gleichzeitig werden erstens die <li>-class Attribute auch in die <a>-tags kopiert, und zweitens <span>-Elemente innerhalb der a-tags eingebaut. Dann (zweite Zeile) wird die Variable $fullnavigation ausgegeben. Nähere Angaben zu den Fähigkeiten der Funktion wp_list_pages finden Sie bei http://codex.wordpress.org/Template_Tags/wp_list_pages Das Ergebnis kann also so aussehen:

<ul>
  <li class="page_item page-item-4 current_page_ancestor current_page_parent"><a class="page_item page-item-4 current_page_ancestor current_page_parent" href="..." title="Seite 1"><span>Seite 1</span></a>
    <ul>
      <li class="page_item page-item-7 current_page_item"><a class="page_item page-item-7 current_page_item" href="..." title="Seite 1.1"><span>Seite 1.1</span></a></li>
    </ul>
  </li>
</ul>

level1, level2 und level3 gibt’s zwar damit nach wie vor nicht, aber das wird vielleicht gar nicht mehr benötigt. Da nun auch die <a>-tags CSS-Attribute haben und <span>-tags existieren, kann man mit CSS vieles wesentlich einfacher gestalten. Viel Erfolg damit!

Aktualisierung Juli 2009 (für WP 2.7+)

Es gibt nun eine neue Menüfunktion namens wp_page_menu. Damit ist es möglich <span>-tags in die Links schreiben zu lassen (<a href=”#”><span>Linktext</span></a>). Beispiel:

<?php $args = array(
  'sort_column' => 'menu_order, post_title',
  'menu_class' => 'menu',
  'include' => ,
  'echo' => true,
  'show_home' => false,
  'link_before' => '<span>',
  'link_after' =>  '</span>');
?>
<?php wp_page_menu( $args ); ?>

Damit das auch beim Menüpunkt “Home” klappt, muss es eine Seite namens “Home” geben, die die Blogpostings auflistet. Der Menüpunkt kann dann einen anderen Namen erhalten. Beispiel:

<?php wp_page_menu( array( 'show_home' => 'Blog' ) );Â ?>

Tags: CSS, navigation, trick, Wordpress