Jquery Integration mit meinem Thema

Ich möchte eine Folie Seite Wege jquery zu meiner Website hinzufügen, habe ich den folgenden Code versucht, aber scheint nicht zu arbeiten

Jquery-Code: –

   $(function(){ $('.slide-out-div').tabSlideOut({ tabHandle: '.handle', pathToTabImage: 'images/contact_tab.gif', imageHeight: '122px', imageWidth: '40px', tabLocation: 'left', speed: 300, action: 'click', topPos: '200px', leftPos: '20px', fixedPosition: false }); });

Div & CSS Code:

   .slide-out-div { padding: 20px; width: 250px; background: #ccc; border: 1px solid #29216d; }   Content Contact me
 Hello 
 Welcome to my Blog

Wenn ich den obigen Code in meine Headerdatei und den Div-Code in der Fußzeilendatei versuchte, scheint die DIV-Box nach außen geschoben zu sein, geht aber nicht hinein, die jquery funktioniert nicht und das Bild contact_tab.gif wird nicht angezeigt und Meine Google Maps auf meiner Website lädt nicht, ich weiß, das ist wegen der falschen Integration von Jquery, aber ich weiß nicht, wie man es mit WordPress-Themen integrieren

Solutions Collecting From Web of "Jquery Integration mit meinem Thema"

Ich denke, das Hauptproblem besteht darin, dass Sie beim Aufrufen des Tab-Slideouts einen Wrapper ohne Konflikte verwenden müssen. Anstatt jedoch auf das Problem hinzuweisen, werde ich einige Dinge behandeln, die Sie tun sollten, damit dieses Skript “The WordPress Way” funktioniert (dh mit Hilfe einer Enqueue und Haken an einem geeigneten Haken, um diese Enqueue zu machen) .

Zuerst brauchen wir eine angemessene Aktion und es gibt ein Paar, das wir vorne verwenden können.

Der Haken, den ich verwenden werde, ist wp_print_scripts , denn wie du vielleicht vermutet hast, dient er zum Einreihen von Skripten.

 add_action( 'wp_print_scripts', 'enqueue_slideout' ); function enqueue_slideout() { wp_enqueue_script( 'jquery-slideout', 'http://tab-slide-out.googlecode.com/svn/trunk/jquery.tabSlideOut.v2.0.js', array('jquery'), '2.0', false ); }

Ich bin gegangen und habe den Ort der neuesten Version ausgegraben, 1.3 ist ein gutes Jahr älter als das neueste 2.0, daher habe ich den Pfad auf eine neuere Version aktualisiert.

jQuery wird als Abhängigkeit in die Enqueue geladen, so dass Sie keine zusätzlichen Includes für jQuery benötigen. Die Enqueue erledigt das für Sie (unabhängig davon, ob Ihr jQuery-Skript erneut von Google registriert wurde) – Wie viele WP Benutzer wählen).

Als Nächstes haken wir uns in wp_head und geben das Skript aus, um die Registerkarte für die Ausgabe mit einem konfliktfreien Wrapper einzurichten, der ausgetriggers wird, wenn das Dokument fertig ist (die meisten Skripts funktionieren gut, wenn auch nicht alle).

 add_action( 'wp_head', 'setup_slideout_tabs' ); function setup_slideout_tabs() { ?>  < ?php }

Sie sollten beachten, dass ich ein wenig PHP hinzugefügt habe, um den contact_tab.gif auf den Ordner des aktuellen Themas zu verweisen, also stellen Sie sicher, dass Sie ein Bild namens contact_tab.gif im contact_tab.gif Ihres Themes haben, d. wp-content/themes/YOUR_THEME/images/contact_tab.gif oder den wp-content/themes/YOUR_THEME/images/contact_tab.gif aktualisieren.

Fügen Sie das CSS, das Sie vorher gepostet haben, in das Stylesheet Ihres Themes ein, es gibt wirklich keine Notwendigkeit, es inline auszugeben, und das Stylesheet wird sowieso geladen, also macht es Sinn, es einfach dort zu kleben.

Am Ende solltest du etwas haben, das so aussieht.

Tab wurde geschlossen Tab geöffnet

Ich hoffe, das hilft...