Tab-Menü ohne Plug-In

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…

• 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:

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="https://blog.funkygog.de/archiv/seiten-uebersicht/">Seiten</a></li>

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

Anmerkungen / Hinweise:

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. https://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