jQuery idTabs in eigenes Theme integrieren

mfitzen

Hi!

Ich erstelle gerade ein eigenes Theme (momentan noch Rohbau :-D) und möchte dabei die jQuery idTabs in die Sidebar integrieren. Im Firefox schien es eigentlich zu funktionieren, aber es hatte auch nur den Anschein. Ich habe den Code

Code

<script type="text/javascript" src="jquery.idTabs.min.js"></script>

(Pfad natürlich angepasst) in die header.php, vor

PHP

<?php wp_head(); ?>

eingefügt. Danach wurde dieser Code für "javascriptless use" in die sidebar.php eingefügt:

Code

<div class="usual"> 
  <ul class="idTabs"> 
    <li><a href="#idTab1">Tab 1</a></li> 
    <li><a href="#idTab2">Tab 2</a></li> 
    <li><a href="#idTab3" class="selected">Tab 3</a></li> 
  </ul> 
  <div id="idTab1">This is tab 1.</div> 
  <div id="idTab2">More content in tab 2.</div> 
  <div id="idTab3">Tab 3 is always last!</div> 
</div>

Sollte ja nur zum Testen sein und funktionierte zunächst auch. Dann habe ich festgestellt, dass das ganze im IE7 nicht reibungslos läuft. Das äußert sich darin, dass sobald das Script aktiv ist, der Speicherverbrauch unaufhaltsam in die Höhe schießt. Den Browser normal beenden geht dann meistens nicht mehr. Es scheint als würde dort irgendwas "schleifenmäßig" in den Speicher geladen. Den Browser kann ich dann nur über den Taskmanager beenden, wo man dann genau sehen kann wie sich der Verbrauch sekündlich erhöht.

Hier könnt ihr es selbst testen. Vielleicht kann mir jemand sagen wo der Fehler liegt?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

flobster

Denke nicht, das es daran liegt, aber sollte die "jquery.idTabs.min.js" nicht erst nach dem jQuery Framework aufgerufen werden?

mfitzen

Das hat man davon, wenn man sich versucht in die Thematik zu googlen :-D Habe wahrscheinlich jQuery falsch aufgerufen. Wie hier bei im-web-gefunden.de erklärt habe ich folgenden Code zum Aufruf von jQuery verwendet:

PHP

<?php wp_enqueue_script('jquery');?>

Das hat das ganze aber irgendwie durcheinander gewürfelt. In der header.php war die Reihenfolge richtig, aber der Quelltext gabs genau andersherum aus. Vielen Dank für den Hinweis!

Ich hab jQuery nun direkt in den Themeordner kopiert und rufe es dort auf. Dies funktioniert nun auch im IE7. Jetzt jedoch meine Frage, ob jQuery nun doppelt aufgerufen wird, da WordPress es ja schon mitbringt?!

codestyling

Also bitte nicht jquery rumkopieren, sondern die WP eigene Variante benutzen. Und sicherstellen, das die jquery.idTabs.min.js auch dazu passen.

Und ab WP 2.6 geht das so und sollte in der functions.php deines Themes stehen ([COLOR=Red]Theme basiert[/COLOR]):

Code

$themes = get_themes(); 
$script = $themes[get_current_theme()]['Template Dir'] . "/jquery.idTabs.min.js";
if ( file_exists(WP_CONTENT_DIR . $script) ) {
  wp_enqueue_script('jquery.idTabs.min.js', WP_CONTENT_URL . $script, array('jquery'));
}

oder für Benutzung innerhalb von eigenen Plugins, die WP erweitern ([COLOR=Red]Plugin basiert[/COLOR]):

Code

$ct = current_theme_info();
$script = $ct->template_dir . "/jquery.idTabs.min.js";
if ( file_exists(WP_CONTENT_DIR . $script) ) {
  wp_enqueue_script('jquery.idTabs.min.js', WP_CONTENT_URL . $script, array('jquery'));
}

Erstens wird das aktuelle Theme und die URL korrekt ermittelt und das jquery.idTabs.min.js direkt von dort geladen aber nur wenn auch existent. Da es von jQuery abhängt, ist das auch mit dem 3. Parameter angegeben und sorgt dafür, das jQuery noch vorher geladen wird.

codestyling

Und noch ein Nachschlag: Man braucht nicht unbedingt eine externe Erweiterung, denn WP hat auch Tabs auf jQuery Basis im Angebot:
Doku: UI/Tabs - jQuery JavaScript Library

Im Theme zu haben mit:

Code

wp_enqueue_script('jquery-ui-tabs');

...und steht sogar von Haus aus zur Verfügung, ohne das man sein Theme mit zusätzlichen javascripts spicken muß.

Ich finde, man sollte viel mehr das nutzen, was von Haus aus schon da ist und ist dann bei WP oder Plugin Updates auch immer auf der sicheren Seite.

Ergänzung: In der header.php des Themes muß allerdings der Hook auch aufgerufen werden mit:

PHP

<?php wp_head(); ?>

Und man sollte die Doku ansehen, wie die class Namen von ui.tabs erwartet werden und ob man ggf. noch eine Initialisierungsfunktion aufrufen muß.

mfitzen

Hallo codestyling!

Vielen Dank für Deine Antworten! Habe beide von Dir aufgeführten Möglichkeiten auf die Schnelle mal getestet. Leider funktionierte es bei keinen von beiden (beim 1. kam ne weiße Seite mit Fehlermeldung "called undefined function current_theme_info()" und bei der 2. passierte gar nichts. Habe dabei den Beispielcode aus dem von Dir angegebenen Link getestet. Werde mich aber heute Abend nochmal dransetzen wenn ich mehr Zeit habe.

PS: Und ja, eine interne Lösung wäre auch mir lieber, anstatt das immer irgendwelche zusätzlichen Dinge geladen werden müssen. Es war mir auch nicht bewusst, dass WordPress auch Tabs mit an Bord hat, was natürlich ne super Lösung wäre...

Gruß
Michael

codestyling

Ich hab beide oben genannten Artikel ergänzt, um das, was ich zwar gedacht aber nicht beschrieben hab :)

mfitzen

Zitat von codestyling
Also bitte nicht jquery rumkopieren, sondern die WP eigene Variante benutzen. Und sicherstellen, das die jquery.idTabs.min.js auch dazu passen.
Und ab WP 2.6 geht das so und sollte in der functions.php deines Themes stehen ([COLOR=Red]Theme basiert[/COLOR]):
Code
$themes = get_themes(); 
$script = $themes[get_current_theme()]['Template Dir'] . "/jquery.idTabs.min.js";
if ( file_exists(WP_CONTENT_DIR . $script) ) {
  wp_enqueue_script('jquery.idTabs.min.js', WP_CONTENT_URL . $script, array('jquery'));
}

Danke für den Code! Funktioniert bestens, solange Javascript aktiviert ist. Wie sieht´s denn bei deaktiviertem JS aus? Gibt´s da auch ne Lösung für?

codestyling

Zitat von infected

Danke für den Code! Funktioniert bestens, solange Javascript aktiviert ist. Wie sieht´s denn bei deaktiviertem JS aus? Gibt´s da auch ne Lösung für?

Dann bleibt dir nur auf den CSS Seiten von Stu Nicholls nachzulesen und das Ganze pur in CSS zu machen. Allerdings kann man in CSS nicht dafür sorgen, wenn z.B. der letzte Tab angeclickt wurde und die Box sichtbar ist, das ein Click in die Seite wieder auf den 1. Tab zurückspringt.
Um dauerhaft einen Tab aktiv zu halten, braucht es js oder ein Neuladen der Seite.

harry22

... dann fasse ich nochmal alles zusammen:

1)folgendes in das template einbauen:(wo genau?)

wp_enqueue_script('jquery-ui-tabs');

2) wie erstelle ich dann die tabs? ich habe gegoogle aber nur wenig infos bekommen.

und: vielen, vielen dank für eure hilfe

mfitzen

Hallo harry22!

Habe Deinen Post erst jetzt gelesen, sorry! Also in die functions.php meines Themes habe ich folgendes integriert:

PHP

<?php
$themes = get_themes(); 
$script = $themes[get_current_theme()]['Template Dir'] . "/js/jquery.idTabs.min.js";
if ( file_exists(WP_CONTENT_DIR . $script) ) {
  wp_enqueue_script('jquery.idTabs.min.js', WP_CONTENT_URL . $script, array('jquery'));
}


?>

Die Tabs habe ich in meine sidebar.php mit folgendem Code eingebaut:

Code

<ul class="idTabs"> 
    <li><a href="#idTab1" class="selected">Tab 1</a></li> 
    <li><a href="#idTab2">Tab 2</a></li>
   ...
  </ul>
  <div class="tabcontent"> 
  <div id="idTab1">
  <ul>
    <li>...</li>
  </ul>
</div>
</div>

Alles anzeigen

Meinen Code aus der sidebar habe ich jetzt mal gelöscht. Wenn Du mit den Schnipseln nicht zurecht kommst, kann ich Dir auch gerne mal meine komplette sidebar.php zukommen lassen, oder hier posten. Vielleicht wird´s dann deutlicher.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

jQuery idTabs in eigenes Theme integrieren

Jetzt mitmachen!