Tab-Menü ohne Plug-In

Kategorie: WordPress-Tipps | Share: funkygog       

Ich wollte gerne innerhalb des Blogs einige Seiten miteinander verlinken.
Die Tab-Menü Optik scheint mir daür recht praktisch, da sie selbsterklärend ist und der Besucher eher draufklickt.
Umsetzen lässt sich das durch eine unsortierte Auflistung (ul-li) die mit Styling-Angaben „aufgebohrt“ wird.


Verschiedene Tab-Menue Möglichkeiten – Automatisiert oder lieber volle Kontrolle…

Die Styling-Angaben:

Die Background-Bilder für die hinteren Karteikarten sind noch auszutauschen oder eine Farbe festlegen.
Einzig der aktive Link muss zusätzlich mit der class="aktiv" angegeben werden.

So sieht der Code zum obigen Bild aus: anzeigen

Tab-Leiste einügen in Beiträgen und Seiten

Um die Tab-Leiste bequem in Beiträgen einügen zu können verwende ich das Plug-In AddQuicktags von Frank Bültge.
Mit folgenden Einstellungen (klick auf das Bild zum vergrößern):

Damit lässt sich auf einfache Art und Weise das Grundgerüst des Tab-Menüs einügen.

Jetzt fehlen noch die Links zu den Beiträgen / Seiten.
Beispiel:

<li><a title="Seiten" href="http://blog.funkygog.de/archiv/seiten-uebersicht/">Seiten</a></li>

und anschließend das Tab-Menü schließen.

Anmerkungen / Hinweise: anzeigen

Tab-Leiste im Template einbauen

Die Tab-Menü-Leiste lässt sich auch in einem Template einbauen.
Die Tabs (Verlinkung) müssen dann über benutzerdefinierte Felder und logischen, automatisierten Links erzeugt werden.

Beispiel zur Automatisierung:

  1. Der aktive Beitrag: (class: active)

    <li class="aktiv"><a title="Archiv" href="<?php the_permalink() ?>">Beschreibung</a></li>

  2. Einen Link mit benutzerdefinierten Feld: custom fields

    <?php $produktlink = get_post_custom_values('Produkt'); ?>
    <?php if(!(empty($produktlink))) { ?><li><a href="Deine-URL/?p=<?php echo $produktlink[0]; ?>">Produkt-Info</a></li><?php } ?>

    bei dem Code würde in dem benutzerdef. Feld „Produkt“ eine ID angegeben und darauf würde der Beitrag mit dem Tab „Produkt-Info“ verlinkt.

  3. weitere Beiträge mit der Suchfunktion anzeigen

    <li><a title="weitere Beiträge" href="Deine URL/?s=TEXT+<?php the_title(); ?>">weitere</a></li>

    Mit dem Code wird ein Suchanfrage gestartet die automatisch den Titel des Beitrages + ein beliebigen Text verwendet.

*Deine URL ist dann auszutauschen. z. B. http://blog.funkygog.de

Anmerkungen / Hinweise:

  • Im Internet-Explorer sehen übrigens die Karteikarten etwas anders aus, da dort die abgerundeten Ecken nicht dargestellt werden.
  • Ich verwende hinter div-Containern mit float-Angaben zumeist:
    <div style="clear:both;"></div>
    damit ist man immer auf der sicheren Seiten.

weitere Links zum Tab-Menu:

Verlinkung mit Tab-Menue:

Verlinkung klassisch:




Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps