Tab-Menü ohne Plug-In

Ich wollte gerne innerhalb des Blogs einige Seiten miteinander verlinken.
Die Tab-Menü Optik scheint mir dafür recht praktisch, da sie selbsterklärend ist und der Besucher eher mal draufklickt.
Auf meiner Archiv-Seite habe ich folgendes eingebaut:

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

Das Tab-Menü ist eigentlich nur eine unsortierte Auflistung (ul-li) die mit Styling-Angaben “aufgebohrt” wird.

• style.css-Angaben (txt-Datei)

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

Um die Tab-Leiste bequem in Beiträgen einfü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 einfü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.

Verlinkung Shortcode
Für die Verlinkung gibt es eine elegante alternative Lösung:
Zukunftssicherer bei URL-Angaben ist die Nennung der ID weil der Name eines Beitrags oder der Name des Domain kann sich ändern. Die ID bleibt!
Hierzu hat Michael Oeser eine sehr gute Lösung gefunden:

• Shortcodes für Permalinks

Den Code von der Seite in die functions.php einfügen.
Hierbei ist sind die richtigen Anführungszeichen zu beachten! [siehe Bild]

Der daraus resultierende Shortcode*:
[permalinkz id=49 text='Linktext']
lässt sich dann mit AddQuicktags in eine <li>...</li>-Auflistung einfügen:

So würde dann der Code* im Beitrag aussehen: anzeigen

Anmerkungen / Hinweise: anzeigen

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:

• Tab-Menü mit Plug-In Anleitung zum Einbau
• horizontale Linkleiste mit Sprungankern