WordPress & Webwork - perun.net

Aktiven Menüpunkt hervorheben

Vladimir am 19. 12. 2007 um 14:30 Uhr

Hier kommt ein WordPress-Quickie. Wenn man die Seiten (Pages) in WordPress durch wp_list_pages() ausgibt. Dann bekommt jeder Menüpunkt ein Klassen-Attribut zugewiesen mit dem Wert page_item. Zusätzlich bekommt der aktive Menüpunkt noch den Wert current_page_item. Dadurch kann man dann in der CSS-Datei, die beiden Werte ansprechen:

.page_item a:hover, .current_page_item a {
background: #444; }

Der obere Code ist nur Beispiel, auf jeden Fall hat man die Möglichkeit den aktiven Menüpunkt visuell hervorzuheben. Ab und an kommt aber die Frage auf, wie man die aktive Eltern-Seite im Menü hervorhebt, wenn man sich auf einer Kind-Seite befindet. So etwas ergibt sich wenn man die Pages hierarchisch aufbaut und verschachtelt. Beispiel: Eltern-Seite ist "Webdesign" und Kind-Seite ist "XHTML" und man will dann den Menüpunkt "Webdesign" visuell hervorheben auch wenn man sich auf der Unterseite "XHTML" befindet … ich hoffe man versteht worauf ich hinaus will. :-)

Die Lösung ist einfach. Die entsprechende Übergeordnete Eltern-Seite bekommt anstatt current_page_item den Klassen-Wert current_page_parent zugewiesen. Somit muss man die CSS-Datei folgendermaßen erweitern:

.page_item a:hover, .current_page_item a, .current_page_parent a {
background: #444; }

Das war's. Ja, ich weiß, dies ist für die WP-Profis ein alter Hut. Dennoch, bekomme ich Fragen in diesem Zusammenhang alle paar Wochen zu hören.

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
WordPress
Tags:
 
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 

15 Kommentare

  1. 1. – Viktor

    Kommentar vom 19. December 2007 um 15:05

    Hi, hier fehlt irgendwo ein schließender Tag. Nach diesem Post sind alle Zeichen dieses Blogs in dargestellt.

  2. 2. – Manuel

    Kommentar vom 19. December 2007 um 22:35

    Hmm wie sieht das aus mit den ConditionalTags Abfragen? Da funktioniert das nämlich bei mir nicht :(

    0?php if (is_home() || is_single() || is_search() || is_page('archives')) {?>class="selected"Startseite

    Musste leider die Klammern durch eine Null ersetzen damit es angezeigt wird :oops:

    Dieser Code ist in meinen LI Tags zugeordnet und sollte dann ja auf die class="selected" greifen was jedoch nicht passiert :cry:

  3. 3. – Perun

    Kommentar vom 20. December 2007 um 00:36

    Hallo Manuel,

    Musste leider die Klammern durch eine Null ersetzen damit es angezeigt wird

    Deswegen steht über dem Kommentar-Formular folgende Information:

    Code-Beispiele: damit die Code-Beispiele richtig angezeigt werden müssen die Sonderzeichen maskiert werden (z. B. < zu &lt;).

    Mit deinem Code-Beispiel:

    <?php if (is_home() || is_single() || is_search() || is_page('archives')) {?>class="selected"

    erreichst du das wenn man sich auf der Startseite oder Einzelansicht oder Suchseite oder der Archiv-Seite befindet, dem Startseite-Link eine zusätzliche Klasse hinzugefügt wird. Und was genau funktioniert bei dir nicht?

  4. 4. – Tim

    Kommentar vom 21. December 2007 um 09:14

    Das passt ja! Hab gerade dasselbe gemacht, war ja auch nicht so schwer. Nur ergibt sich bei mir ein anderes Problem.
    Ich verwende das PlugIn "Fold Page List". Im Code entsteht da sowas:

    <ul>
    <li class="page_item current_page_item page_folder">
    Eltern-Seite
    </li>
    <ul>
    <li class="page_item"> Kind-Seite I</li>
    <li class="page_item"> Kind-Seite II</li>
    <li class="page_item"> Kind-Seite III</li>
    </ul>
    </ul>

    Klicke ich jetzt auch die Eltern-Seite werden automatisch die Kind-Seiten mit eingefärbt, was einfach nicht so toll aussieht.

    Beispiel gefällig? http://www.weserems-geckos.de/leopardgeckos/

    Tim

  5. 5. – Tim

    Kommentar vom 21. December 2007 um 10:29

    Sorry, hat sich erledigt:

    .current_page_item a,.current_page_item a:hover{
    color: #3BA6E4 ! important;
    }
    .current_page_item .page_item a{
    color: #EAAB02 ! important;
    }

  6. 6. – Daniel

    Kommentar vom 21. December 2007 um 23:41

    Ich verstehe das immer noch nicht.

    <a href="" title="Startseite">Home

    Wie soll ich denn da die Seiten zuordnen, wenn die Seiten per php eingefügt werden? :?

  7. 7. – Daniel

    Kommentar vom 26. December 2007 um 15:15

    hmm genau das gesucht und nur durch Zufall hier gelandet. Das nennt man Glück :) .
    Aber danke.

  8. 8. – Dreamweaver Tutorials

    Kommentar vom 26. December 2007 um 17:21

    Danke für den artikel

  9. 9. – whitenexx

    Kommentar vom 27. December 2007 um 14:42

    Danke hat funktioniert! WordPress ist einfach super. :-)

  10. 10. – Webdesign

    Kommentar vom 11. January 2008 um 12:05

    Super Lösung.
    Noch weiter kann man den Code nicht eindampfen…

    Holger

  11. 11. – stony

    Kommentar vom 02. March 2008 um 18:25

    Danke für den WP-Quickie :)
    Und vor allem:
    Man versteht es auch, sogar als Anfänger :mrgreen:

  12. 12. – Johnny

    Kommentar vom 05. March 2008 um 09:11

    Super WP-Quickie!!!

    Aber ich habe dazu mal noch eine Frage, ich hoffe, es kann mir jemand weiterhelfen:
    Meine Struktur sieht folgendermaßen aus:

    Parent
    -Child1
    –ChildChild1
    —ChildChildChild1

    Ich möchte, dass IMMER Parent markiert ist …

    Ich hoffe, mein Problem ist klar?! :roll: Und schon mal danke für die Hilfe!!!

  13. 13. – Sandra

    Kommentar vom 12. March 2008 um 12:44

    Sehr gute Lösung;-) Konnte ich gut gebrauchen und hat auch bei mir funktioniert. LG Sandra

  14. 14. – Breitei

    Kommentar vom 24. July 2008 um 09:20

    Hab ein Menü das hartcodiert ist, also nicht per Funktion ausgegeben wird. Weiß jemand über welche Variablen ich da die aktuelle Seite und Eltern-Elemente rausfinden kann?

  15. 15. – Christoph

    Kommentar vom 05. September 2008 um 17:15

    Hallo, leider bin ich totaler Neuling und habe mir glaub ich grad beim probieren was zerschossen.
    das hier ist ein Auszug aus der header.php

    <li class="page_item current_page_item

    und hier ein auszug aus dem css

    #menu {
    padding:7px 0 8px 0;
    overflow:hidden;
    color: #fff;
    }
    #menu a {
    display:block;
    float:left;
    margin: -6px 10px 0 0;
    background:#87B5DD;
    color:#fff;
    border-top:1px solid #6DA5D6;
    text-decoration:none;
    padding: 12px 6px 8px;
    }
    #menu a:hover {
    background:#5C9BD1;
    color:#fff;
    border-color:#3B86C7;
    }

    ich krieg das nicht hin das die angewählte Seite aktiv angezeigt wird. was mach ich falsch?

    Vielen Vielen Dank
    Christoph

Hinweis:
WordPress 3.3 für Autoren & Redakteure
Der schnelle und unkomplizierte Einstieg auf 45 DIN-A4-Seiten

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.

Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.