Kategorien
WordPress-Tipps

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…

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:

Spoiler

<div id="tab-menu">
<ul class="tab">
<li class="aktiv"><a title="Archiv" href="https://blog.funkygog.de/archiv/">Archiv</a></li>
<li><a title="Seiten" href="https://blog.funkygog.de/archiv/seiten-uebersicht/">Seiten</a></li>
<li><a title="Sitemap" href="https://blog.funkygog.de/archiv/sitemap/">Sitemap</a></li>
<li><a title="Die Top 50" href="https://blog.funkygog.de/archiv/top-of-the-archiv/">meistgelesen</a></li>
</ul>
</div>

[collapse]

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

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

Anmerkungen / Hinweise:

Spoiler

Wenn man das Tab-Menü in einem Beitrag verwendet…

  • so wird in einem Feed-Reader lediglich eine ul li-Liste zu sehen sein.
  • erscheinen mehrere Beiträge mit dem Menü auf einer Seite (Suche, Kategorie) so ist der Code nicht mehr valide, da die ID=Tab Menu mehrfach vergeben wird.

[collapse]

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.