Ich bin vor kurzem auf ein kniffliges Problem gestoßen. WordPress generiert für feste Seiten, die in der Navigation laufen, die Klasse “current-page-item”, um den Zustand des Buttons auch in angewählter Form verändern zu können. So schaffen wir es ohne Probleme der Navigation einen aktiven Zustand zu verpassen. Doch was geschieht mit dem Navigationspunkt, der nicht aus einer festen Seite besteht, sondern lediglich eine Verknüpfung zur Startseite, also der index.php ist?

Logischerweise generiert WordPress für dieses Element keine Klasse current-page-item. Das führt zu einem Problem! Wir haben keine Möglichkeit diesen Navigationspunkt im angewählten Zustand anzusprechen. Klar, man könnte die Navigation ja auch komplett statisch aufbauen. Jedoch möchte man die Seite ja so dynamisch wie möglich halten.

Die Lösung

Mit folgendem PHP-Code würde die Navigation komplett über das WordPress Backend geladen werden. Das führt natürlich zum oben genannten Problem.

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

Sinnvoller wäre wie folgt:

<ul>
<li<?php if (is_home()){echo " class="current_page_item"";}?>><a href="<?php bloginfo('url') ?>" title="Home">Home</a></li>
<?php wp_list_pages('sort_column=menu_order&title_li='); ?>
</ul>

Was haben wir da gemacht? Der Menüpunkt “Home” (also die Verlinkung zur Startseite) wird nun statisch aufgerufen. Per PHP geben wir die Anweisung, dass die Klasse “current-page-item” generiert wird, wenn man sich gerade auf dieser Seite befindet. So kann man den Link via CSS ansprechen und anpassen. Alle anderen Menüpunkte werden jedoch wie gewohnt über das Menü im WordPress-Backend geladen. Somit bleibt der wichtige Teil der Navigation komplett dynamisch.

Eine sehr schöne und einfache Alternative, die Navigation mittels WordPress zu gestalten. Ich hoffe ich konnte dem ein oder anderen helfen, der ebenfalls auf dieses Problem gestoßen ist.

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


Schreibe einen Kommentar

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

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.