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

aktive Startseite hervorheben
aktive Startseite hervorheben

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


<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!

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

6 Beiträge zu “Quick Tipps: Startseite in die Navigation einbinden und wenn sie aktiv ist hervorheben.

  1. Kommentar Autor
    peteck
    Kommentar

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

  2. Kommentar Autor
    Michael
    Kommentar

    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. Kommentar Autor
    Monika
    Kommentar

    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. Kommentar Autor
    Frau Braun
    Kommentar

    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!

  5. Kommentar Autor
    Ramona
    Kommentar

    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!!!