current navigation highlighting

WordPress vergibt bei der Ausgabe der Seitenliste/Navigation für die gerade aktive Seite die CSS-Klasse current_page_item, so dass dieses Listenitem per CSS speziell formatiert werden kann.

Das geht aber nur automatisch, wenn man die Seitenliste mit Hilfe von WordPress (wp_list_pages) ausgibt und nicht manuell zusammenbaut.

Im Moment sehe ich leider nur die weiße Seite aus dem anderen Thread :sad:

In der linken Navigation sollte so etwas Ähnliches wie

.sidebar .current_page_item {border:red solid 5px;}

funktionieren. In der Navigation oben funktioniert das nicht so einfach, weil die scheinbar statisch in der entsprechenden Template-Datei steht und nicht von WordPress erzeugt wird (Warum eigentlich?).

Zitat von andalusiWEBDESIGN

Danke für Deine schnelle Antwort.
Leider kann ich dir nicht folgen, mein Wissen ist noch sehr begrenzt.
Es handelt sich um diese WP-Seite:
http://www.restaurant-seehof.de

Ich habe dazu das "Starkers-Theme" (nacked) verwendet und mit einer CSS Datei den Style gemacht.
Die einzelnen Seiten die man in der linken Seitenleiste aufrufen kann habe ich mit dem WP-Backend erstellt.

Kannst Du mir bitte etwas genauer erklären wo genau ich den Hebel ansetzen muss?

Vielen Dank, Gruss andalusi

Hallo,

wenn Spickzettel's erklärung noch zu schwierig für dich (ich bin auch anfänger :p) vielleicht hilft dieses Video, wie mann current_page_item im style.css einfügen kann.

Gruß.

Hat ja in der Sidebar schon mal funktioniert :razz:

In der Navigation oben könnte man das so lösen (am Beispiel der ersten Zeile):

<li><a href="?page_id=66"<?php if (is_page(66)) {echo ' class="current_page_item"';} ?>>A la carte</a></li>

Übersetzung: Wenn man sich auf der Seite mit der ID 66 befindet, wird die CSS-Klasse current_page_item hinzugefügt. Für die anderen Links analog mit der jeweiligen ID.

Ergänzung in der CSS-Datei:

.mainbar .current_page_item{
background-color: #59002E;
}

Oh, das würde mich für diese Seite http://muehltalrestaurant.de/events-catering/ auch mal interessieren.

wenn das menu mit 'wp_list_pages()' gemacht ist, scheint es folgende classes mit auszugeben (abhaengig ob die seite einen parent oder eine noch aeltere generation davor hat):

current_page_parent
current_page_ancestor

http://codex.wordpress.org/Template_Tags/…g_of_page_items

bgeissler:
in der 'muehltal' site scheint da kein parent/child seitenverhaeltnis zu bestehen.
(zB 'veranstaltungen' scheint keine unterseite von 'catering&higlights' zu sein.)

andalusiWEBDESIGN
wenn das nicht zu dynamisch werden soll, geht vielleicht die erweiterung der von spickzettel vorgeschlagenen if-abfrage; die unterseiten mit einbeziehen ('speisekarte' z.zt. weggelassen):

<li><a href="?page_id=68"<?php if ( is_page(68) || is_page(99) || is_page(101) || is_page(103) ) {echo ' class="current_page_item"';} ?>>Cocktailbar</a></li>

Zitat von alchymyth

bgeissler:
in der 'muehltal' site scheint da kein parent/child seitenverhaeltnis zu bestehen.
(zB 'veranstaltungen' scheint keine unterseite von 'catering&higlights' zu sein.)

Das stimmt. Hab es mit if-Abfragen aufgebaut. Werde es mal umbauen und entspr. formatieren, vielen Dank.

Eine Idee...

Hallo miteinander :lol:

Weiß zwar nicht, ob das hier die Lösung bringt, bei mir hats jedenfalls funktioniert, dass beim öffnen einer Unterseite die Hauptkategorie ebenfalls noch zusätzlich farblich hervorgehoben wird.

Viel Glück :mrgreen:

http://forum.wordpress-deutschland.org/konfiguration/…ghtproblem.html

Das funktioniert hier nicht, da die obere Navigation nicht mit wp_list_pages() gemacht ist (warum eigentlich nicht?)

Hier mal mein CSS (ich habe nur die CSS-Datei verändert!)
(Theme siehe im Text):

/* **************** TOPNNAV *************** */
#nav {
        background:transparent;
        color:#FFFFFF;
        font-size:16px;
        margin:0;
        padding: 207px 0px 0px 11px ;
        width:1000px;
        float: left;
        overflow: hidden;
}
.nav { margin:0 25px; }
#nav ul {
        list-style-type:none;
        margin:0px;
        padding:0px;
}
#nav a {
        background:none;
        color:#8C8C8C;
        display:block;
        margin:0px 50px 0px 0px;
        padding:8px 6px;
        text-transform:none;
        text-decoration: none;
}
#nav a:hover {
        background:none ;
        color:#FFFFFF;
        display:block;
        margin:0px 50px 0px 0px;
        padding:8px 6px;
        text-decoration:none;
}
#nav li {
        float:left;
        margin:0px;
        padding:0px;
}
#nav li li {
        float:left;
        margin:0px;
        padding:0px;
        width:160px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
        background-image: url(http:www.meinedomain.de/wp-content/themes/webbutveckling/images/unternavi.png);
        border-top:0px solid #C0C0C0;
        float:none;
        margin:0px 0px 0px 0px;
        padding:8px 6px;
        width:200px;
}
#nav li li a:hover, #nav li li a:active {
        background-image: url(http:www.meinedomain.de/wp-content/themes/webbutveckling/images/unternavi_b.png);
}
#nav li li.current_page_item a {
        background-image: url(http:www.meinedomain.de/wp-content/themes/webbutveckling/images/unternavi_b.png);
}
#nav li ul {
        left:-999em;
        position:absolute;
        width:10em;
}
#nav li:hover ul {
        display:block;
        left:auto;
}
#nav li:hover ul, #nav li.sfhover ul {
        left:auto;
}
#nav li.current_page_item a{
        color:#FFFFFF;
}
#nav li.current_page_parent a{
        color:#FFFFFF;
}

Vielleicht bringt das ja einen Hinweis?!

:mrgreen:

Bei mir hat's auch geklappt (http://muehltalrestaurant.de/events-catering/catering/):

parent/child seitenverhaeltnis eingerichtet
und in der style.css

#navcontainer li.[COLOR=Red]current_page_ancestor.current_page_parent[/COLOR] a {
   background-image:url(images/taste1.jpg); 
   background-repeat:no-repeat;
}

Es waren beide Angaben nötig.

Hattest Du was an den Bildern geaendert?
Die sind meiner Meinung nach immer noch bescheiden bis sehr schlecht.
... und die Ladezeiten sind nicht tragbar.
Hat der die Seite bei sich im restaurant auf dem Rechner liegen?

Gruss
aao_scout

Edit sagt:
Sorry, falscher Fred.

Mich würde interssieren, wie man bei einer aktiven Unterseite auch die dazugehörige Hauptseite noch mit der aktiven CSS-Beschreibung definieren kann.

Konkret folgendes:
http://roger.irene-hofer.ch

Bei einer aktivierten Unterseite soll darüber noch immer der blaue Streifen vorhanden sein. Wie kriege ich dies hin?

das ist hier schon mehrfach in diesem thread beantwortet worden:

den selben style wie fuer .current_page_item auch fuer die folgenden classes verwenden:

.current_page_parent { … } /* parent of the current Page */
.current_page_ancestor { … } /* any ancestor of the current Page */

http://codex.wordpress.org/Template_Tags/wp_list_pages