Aktuellen Link darstellen

  • Hallo,
    ich würde gerne in meinem Menue den aktuellen Link (der Seite, wo man sich befindet) hervorheben. Habe in Foren bisher zwar CSS-Anweisungen gefunden. Mir ist aber nicht klar, was der passende Eintrag dazu im Seiten-bzw. Header-Template wäre.

    Hier das bisherige Stylesheet:


    --------------
    Und schliesslich das Template dazu:
    <div class="nav">
    <ul>
    <li><a href="<?php bloginfo('url'); ?>">START</a></li>
    <li><a href="?page_id=2">EINE SEITE</a></li>
    <li><a href="?page_id=4">KONTAKT</a></li>
    <li><a href="?page_id=5">GESCHICHTE</a></li>
    <li><a href="?page_id=8">NEWS</a></li>
    </ul>
    -------------

    Ich hatte es auch schon mit "a class=active" versucht. Aber das funktioniert dann eben nicht individuell auf den Seiten...

    Für Hilfe wäre ich wirklich sehr dankbar!

    Schönen Gruß
    sux

    Einmal editiert, zuletzt von jottlieb (26. April 2010 um 18:34)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Die Lösung besteht aus zwei Teilen: Zum einen muss der aktuelle Link im Menü mit einer spezifischen Klasse versehen werden. Je nach Theme ist das vielleicht schon so.Siehst Du ja im Quelltext der Seite. Und zum zweiten muss für diese Klasse dann etwas im Stylesheet definiert sein.

  • Das Menü einfach mit der Funktion "wp_list_pages" einbinden und dann in der CSS folgende Anweisung einbinden:

    Code
    .current_page_item a {
    text-decoration: underline;
    font-weight: bold;
    }

    Jetzt wird der Link, der aktiv ist, unterstrichen und in fett dargestellt! ;-)


  • Vielen Dank für die Hinweise!
    So ähnlich hatte ich mir das eigentlich auch vorgestellt.
    Aber es funktioniert bei mir leider nicht :-(
    Folgendes hatte ich (zum oben gannanten Template) in meiner Verzweiflung schon als Anweisung versucht:
    .current_page_item
    .current
    #current
    #nav a:link#current, #nav a:visited#current, #nav a:hover
    .nav #current
    .nav li #current
    #current
    . class="current"
    .nav a:link.active
    .nav a:visited.active
    .nav a:current
    .current_page_item a

    Recht vielfältig, aber genutzt hats mir nix...

    Hat jemand eine Idee, was ich falsch mache???

  • Zitat

    Hat jemand eine Idee, was ich falsch mache???

    Du probierst willkürlich CSS-Anweisungen aus anstatt einfach zu schauen welche Klasse im Quelltext denn real dranhängt an dem Element und diese dann zu nehmen?! Wenn Du es selber nicht siehst, gib uns einen Link zur Seite, dann ist das schnell geklärt. ;-)

  • Also wenn deine "div" in der sich deine Navigation befindet "#nav" heißt, dann sieht das so aus:

    Code
    #nav ul.current_page_item li a {
    text-decoration: underline;
    font-weight: bold;
    }


  • Ja, ich probiere mittlerweile alles mögliche, weil ich nicht dahinter komme und auch absolut kein CSS-Profi bin...
    Danke dür den netten Hinweis von cester. Ich habs mit
    #nav ul.current_page_item li a
    und mit
    .nav ul.current_page_item li a
    versucht. Wieder nix :-(

    Mein Quellcode zeigt:
    <div class="nav">
    <ul>[FONT=monospace]
    [/FONT] <li><a href="?page_id=2">EINE SEITE</a></li>
    <li><a href="?page_id=4">KONTAKT</a></li>
    <li><a href="?page_id=5">GESCHICHTE</a></li>
    <li id="current"><a href="http://forum.wordpress-deutschland.org/view-source:ht…w.sulux.de/test">PROJEKTE</a></li>
    </ul>[FONT=monospace]
    [/FONT]
    Das Stylesheet (.nav a) usw. in seiner ganzen Länge hatte ich in meinen ersten Beitrag kopiert.

    Kann es denn daran liegen, dass alles per .nav und nicht mit #nav aufgebaut ist?
    Sorry, wenn ich so blöd frage, aber ich komm hier einfach nicht weiter.

  • class = "."
    id = "#"

    Demnach ist der Weg zum lStyling:

    div.nav ul li#current a {
    font-weight: bold; /* oder was auch immer ;) */
    }

    Es könnte aber zu Problemen mit der ID #current kommen, da IDs eigentlich nur 1x pro Seite erscheinen sollen.

  • Das Menü einfach mit der Funktion "wp_list_pages" einbinden und dann in der CSS folgende Anweisung einbinden:

    Wo muss ich dieses wp_list_pages einbinden und wie? Im Header siehts so aus:

    PHP
    <div id="menu">
    		<ul>
    			<a href="<?php echo get_settings('home'); ?>">Home</a>
    			<a href="/angebot">Angebot</a>
    			<a href="/zubehoer">Zubehör</a>
    			<a href="/service">Service</a>
    			<a href="/kontakt">Kontakt</a>
    		</ul>
    	</div>

    Im CSS sieht es so aus:

    Code
    #menu ul.current_page_item li a { color: #c03; }

    Bleibt der Navi-Link auch aktiv, wenn eine Unterseite angeklickt wird?

    Danke für die Hilfe.

  • Das könnte z.B. so aussehen:

    PHP
    <div id="menu">
      <ul>
        <?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
      </ul>
    </div>

    Das würde die Seiten ohne einen Titel darüber ausgeben, sortiert in der Reihenfolge wie im Seiteneditor angegeben und ohne Unterseiten. Du kannst auch Seiten explizit ausschließen und viele andere Parameter nutzen. Mehr dazu steht im Codex.

    Zitat

    Bleibt der Navi-Link auch aktiv, wenn eine Unterseite angeklickt wird?

    Vermutlich nicht.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!