Anleitung zum Einbau einer Tab-Navigation (oder eines Karteireiter-Menüs) in WordPress
Schon länger habe ich geplant ein Tab-Menü einzubauen.
Ich konnte mich bislang aber nicht recht entscheiden welches Script ich dazu einbaue.
Folgende Seiten habe ich dazu gefunden:
- mooTabs
Versionen die mit mooTools 1.2. arbeiten: morphTabs – Kiwi - jQuery
Anleitung: for Designers inkl. Video - Dom-Tab-Navigation
- Tabs & Slides von Artonesia
als Plug-In für WordPress - Tab-Menü ohne Plug-In
falls man nichts zu verbergen hat – also nichts ausgeblendet werden soll
Zunächst war mein Gedanke jQuery einzubauen, da dieses Script bereits mit WordPress ausgeliefert wird. Ich hatte aber meine Schwierigkeiten es zum Laufen zu kriegen. (jQuery ist wohl nicht gleich jQuery)
zu 3.) Dom Tab Navigation
Das Script ist sehr schlank (10KB) und lässt sich auch in Templates einbauen.
Anwendungsbeispiel: Startseite
Auf der Seite OnlineTools das Script runterladen und nur die Datei domtabs.js in den Theme-Ordner schieben.
Oftmals gibt es dort bereits einen Ordner für javascripts …/js oder …/javasript
Das Script muss jetzt in das Theme eingebunden werden. Ich habe den Code im Footer eingesetzt. Das senkt etwas die Ladezeiten. Kann aber auch im Header platziert werden.
Der Code zum reinkopieren:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/domtab.js"></script>
Den Inhalt der beiliegenden css-Datei habe ich kopiert und in meine style.css eingefügt. Dadurch lässt sich zunächst bequemer an der Optik feilen.
meine derzeitigen css-Angaben
Zunächst habe ich für den Beitrag die Vorgabe von der Dom-Tab Seite übernommen und dann den Text geändert.
Und so sieht der Text zu diesem Beitrag aus:
<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">Download</a></li>
<li><a href="#t2">Einbinden</a></li>
<li><a href="#t3">Styling</a></li>
<li><a href="#t4">Beitrag</a></li>
</ul>
<div>
<h2><a name="t1" id="t1"></a></h2>
Auf der Seite das Script runtergeladen und in meinem Theme-Ordner geschoben.
</div>
<div>
<h2><a name="t2" id="t2"></a></h2>
Das Script einbinden. Ich habe den Code im Footer eingebunden. </div>
<div>
<h2><a name="t3" id="t3"></a></h2>
Den Inhalt der beiliegenden css-Datei habe ich kopiert und in meine style.css eingefügt.
</div>
<div>
<h2><a name="t4" id="t4"></a></h2>
Zunächst habe ich für den Beitrag die Vorgabe von der Dom-Tab Seite übernommen und dann den Text geändert.
</div>
</div>
zu 4.) Tabs & Slides (Plug-In)
Vorteil ist die einfache Installation, die simple Eingabe in Beiträgen und der zusätzliche Slide Effekt.
Für Templates ist es (glaube ich) nicht geeignet. Die css-Datei ist sehr unübersichtlich.
Überschriften h2 und h3 im Content-Bereich werden nicht angezeigt. Habe dann h4 verwendet.
Anwendungsbeispiel: Ferienhaus in Nizza
Aktivieren
Das Plug-In entpacken und in den
wp-content/plugins Bereich verschieben. Dann noch im Admin-Bereich aktivieren.Styling
Den Inhalt der beiliegenden css-Datei kann man noch nach belieben anpassen.
Am der Optik feile ich gerade. Der Standard ist aber schon sehr ansprechend.
Beitrag
Die Eingabe ist denkbar einfach.
So sieht der Text zu diesem Beitrag aus:
{tap=TAB 1}
Content 1
{tap=TAB 2}
content 2
{/taps}
Anmerkung: Es muss immer tab statt tap heissen.
