Tab-Menü in WP einfügen – Anleitung

Kategorie: WordPress-Tipps | Share: funkygog       

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.
Hier ein paar Optionen:

  1. jQuery
    Anleitung: for Designers inkl. Video
  2. Dom-Tab-Navigation
  3. Easy-Tabs von Kollermedia
    mit automatischen Umspringen der Tabs
  4. JavaScript tabifier von BarelyFitz Designs
  5. 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

Step 1Auf 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

Step 1Das 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>

Step 1Den Inhalt der beiliegenden css-Datei habe ich kopiert und in meine style.css eingeügt. Dadurch lässt sich zunächst bequemer an der Optik feilen.
meine derzeitigen css-Angaben

Step 1Zunä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 eingeü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>


  1. Fernstudium

    Hey, danke! Seit zwei Tagen bin ich auch am Grübeln, wie und mit welchem Script ich es umsetzen will. Ich denke ein wichtiger Punkt in der Überlegung sollte auch sein: Wie es aussieht, wenn javascript ausgeschaltet ist…
    Ich werde mich glaube für die jq variante entscheiden, obwohl ich das tabifier super finde. Aber ich habs nicht zum laufengebracht…



Einen Kommentar hinterlassen

*=erforderliche Angaben

Innerhalb der Kategorie: WordPress-Tipps