Quick Tipps: Startseite in die Navigation einbinden und wenn sie aktiv ist hervorheben.

letztes Update:08.06.08 von

Du möchtest die Startseite in die Navigation einbinden und außerdem soll sie speziell hervorgehoben werden, wenn sie aktiv ist.

Du hast mittels CSS Deine Naviagtion so gestaltet, dass die jeweils aktive Seite speziell hervorgehoben wird. Du nutzt den template tag wp_list_pages und musst daher die Startseite extra angeben. Damit auch die Startseite hervorgehoben wird benötigst Du folgendes:

aktive Startseite hervorheben

aktive Startseite hervorheben
Die Startseite hervorheben
<li <?php if(is_home()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>

Nutzt Du WP 2.5 oder höher kannst Du auch den neuen Conditonal Tag is_front_page nutzen.

<li <?php if(is_front_page()){echo 'class="page_item current_page_item"';} else { echo 'class="page_item"';}; ?>><a href="<?php bloginfo('siteurl'); ?>/" title="Zur Startseite">Start</a></li>

Dies alles bedeutet der Reihe nach:

Liebes PHP wenn die Startseite (is_home / is_front_page) angezeigt wird, dann gib (echo) class page_item current_page_item zurück, sonst (else) gib class page_item zurück.

Der Rest ist der Link.

Fertig!

Wie merke ich mir diese Quick Tipps für die Navigation

Bookmarken bei einem der Social Dienste hilft da ungemein.

……… und das Weitersagen ist ausdrücklichst erlaubt ;)

6 Kommentare zu "Quick Tipps: Startseite in die Navigation einbinden und wenn sie aktiv ist hervorheben."

  1. peteck

    11.05.08 um 14:54

    Mal wieder ein sehr hilfreicher Artikel. Ich bin gerade dabei von Free auf eigenes Hosting umzusteigen und deine Seite ist Anlaufpunkt nummer eins.

  2. Michael

    18.05.08 um 14:26

    Respekt!

    Für einen ‚newbe’ unerschöpfliche Quelle brillanter Erklärungen. Reizvoll und entzückend ihre didaktische Geduld.

    Ob Sie mir auch auf die Sprünge helfen könnten?

    Habe zwei horizontale Navigationsleisten, auf der Oberen Leiste die Seiten. Der Unteren Leiste die Kategorien. Mit dem Plugin von NAVT – Navigationtool v1.0.26 wurden die unterschiedlichen Kategorien den jeweiligen Seiten zugeordnet. Klappt auch alles wunderbar. Mit folgender css habe ich das ganze gestylt:

    /******************************************
*    navigation styles                       
******************************************/
 
/* Seiten navigation */
 
#obenavi {
	background:#fff;
	font-size:1em;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
	}
#obenavi, #obenavi ul {
	list-style: none;
	line-height: 1;
	}
#obenavi a, #obenavi a:hover {
	display: block;
	text-decoration: none;
	border:none;
	}
#obenavi li {
	float: left;
	list-style:none;
	}
#obenavi a, #obenavi a:visited {
	display:block;
	font-weight:normal;
	color: #999;
	padding:5px 12px 6px 0px;
	}
#obenavi a:hover {
	background-color:#fff;
	color:#333;
	text-decoration:none;
	}	
#obenavi a:active {
	color:#000;
	text-decoration:none;
}	
 
.current_page_item	a, #home .on  { 
	color:#000!important;
	text-decoration:none;
	}	
#obenavi li:hover ul, #obenavi li li:hover ul, #obenavi li li li:hover ul, #obenavi li.sfhover ul, #obenavi li li.sfhover ul, #obenavi li li li.sfhover ul {left: auto;}
a.main:hover {background:none;}
    /* Kategory navigation */
 
#untenavi {
	margin-top:0px;
	background:#fff;
	font-size:1em;
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
	}	
#untenavi, #untenavi ul {
	list-style: none;
	line-height: 1;
	}
#untenavi a, #untenavi a:hover {
	display: block;
	text-decoration: none;
	border:none;
	}
#untenavi li {
	float: left;
	list-style:none;
	}
#untenavi a, #untenavi a:visited {
	display:block;
	font-weight:normal;
	color: #999;
	padding:5px 12px 6px 0px;
	}
#untenavi a:hover {
	background-color:#fff;
	color:#333;
	text-decoration:none;
	}	
#untenavi a:active {
	color:#000;
	text-decoration:none;
	}	
 
 
.current_page_item  a, #untenavi {
	color:#000!important;
	text-decoration:none;
	}
 
#untenavi li li a:hover, #untenavi li li a:active {background:#ddd;}		
#untenavi li:hover ul, #untenavi li li:hover ul, #untenavi li li li:hover ul, #untenavi li.sfhover ul, #untenavi li li.sfhover ul, #untenavi li li li.sfhover ul {left: auto;}
a.main:hover {background:none;}
 
/******************************************
*    ende navigation styles                       
******************************************/

    Zum ‘Problem’: die Farbe des ‚Links’ in der oberen Navigationsleiste der ‘aktiven Seite’ wird mit:

    .current_page_item	a, #home .on  { 
	color:#000!important;
	text-decoration:none;
	}

    Korrekt als aktiver Link mit collor:#333; angezeigt.

    Mit der unteren Navigationsleiste bekomme ich das leider nicht hin mit:

    .current_page_item  a, #untenavi {
	color:#000!important;
	text-decoration:none;
	}

    Habe wirklich mit unterschiedlicher Syntax versucht mir das zurechtbiegen…
    Ohne Erfolg.

    Wie erwähnt ist es z.Zt. so, dass nur sie aktive ‚Seite’ der oberen Navigationsleiste mit der Farb-Gestaltung „Korrekt“ angezeigt wird. Klickt man aber auf der unteren Navigationsleiste, einer der ‚Kategorien’ an, funktioniert es dann aber auch nicht mehr. Und zwar mit beiden nicht.

    Kurz. Mein Ziel ist: wenn man auf ‚Seite’ X ist, und die ‚Kategorie’ Y anklickt. Welche durch das Plugin von NAVT der ‚Seite’ X zugeordnet wurde, dass beide aktiven ‚Links’ mit color:#000!important; dunkel bleiben.

    Man kann davon ausgehen das hier eine ‚if-schleife’ zur Loesung führt. Bin grad ma froh bisschen css zu verstehen…

    Ich würde mich wirklich sehr freuen, wenn Sie wieder mal eine Lösung für mich und natürlich allen anderen WP Usern geben könnten.

    Liebe Grüsse

    Michael

  3. texto

    18.05.08 um 17:35

    Grüß Dich Michael

    Danke für Deine Rückmeldung. :-)

    hier gilt das “Internet Du ” ;)

    Wenn man beim eigenen Browser oben auf Ansicht==>Quelltext geht,schaut man seiner Webseite unterm Rock.

    Diese Seite kann man durchsuchen mit Bearbeiten==>Suche

    da fand ich, dass “Hallo cat” mit current_item_parent gestaltet werden kann. Dies könnte helfen.

    ich habe bei Deinem Kommentar nur die Code Tags eingefügt.

    lg

  4. Frau Braun

    26.06.08 um 15:27

    Ein ausgezeichneter Tip. Das habe ich nirgendwo vorher in dieser Einfachheit erklärt bekommen. Dabei müsste das doch jeder, der WordPress als CMS nutzt, wissen wollen. 1000 Dank, auch für Forumshilfe!

  6. Ramona

    28.07.08 um 11:51

    Auf den Tipp oben
    <li ><a href=”/” title=”Zur Startseite”>Start
    hat meine css durch den Eintrag
    #menu ul li a:hover, #menu ul li.current_page_item a
    {color: #666666; } reagiert!
    Aber wie klappt das für die anderen Seiten? So nur mit dem Eintrag in der CSS geht es nicht. Danke für eine Antwort, falls möglich!!!