wake-up-neo.net

JQuery in Child Theme

Ich bin neu in Wordpress und benötige Hilfe bei der Integration meiner eigenen Abfrage in ein untergeordnetes Thema.

Ich habe diesen JQuery-Tooltip, der funktioniert, aber ich möchte ihn in mein WordPress-Kinderthema aufnehmen.

Schauen Sie sich dazu den Quellcode an:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="js/jquery.balloon.js"></script>

    <script>
    $(document).ready(function() {
    $('.sample').balloon({ position: "left" })  
    });
    </script>

Wie füge ich all dies in das untergeordnete Thema ein, damit der Tooltip funktioniert? Vielen Dank

3
Finerwhite

Zuallererst wird jquery höchstwahrscheinlich bereits vom Hauptthema in die Warteschlange gestellt. Wenn nicht, ist der richtige Weg, wp_enqueue_script('jquery') in einer Funktion für den Aktions-Hook wp_enqueue_scripts aufzurufen.

Beispiel:

function enqueue_jquery() {
   wp_enqueue_script('jquery');
}

add_action('wp_enqueue_scripts', 'enqueue_jquery').

Dieser Code muss zur Dateifunctions.phpfür Ihr untergeordnetes Thema hinzugefügt werden.

Sie würden einen Dateinamen in wp_enqueue_script nur angeben, wenn Sie eine andere jquery-Version als die mit WordPress gelieferte oder die mit Ihrem Hauptthema gelieferte laden möchten. Und Sie müssten dann sicherstellen, dass eine bereits geladene Version von jquery zuerst mit wp_deregister_script('jquery') entladen wird. Das Abmelden einer bereits geladenen jquery-Version vor dem Laden einer neuen führt zu Konflikten (dieselben jquery-Funktionen werden zweimal definiert ...).

Verwenden Sie dann für Ihre Dateijquery.balloon.jsdieselbe Bemerkung wp_enqueue_script (und für die Aktion hook wp_enqueue_scripts). Sie sollten auch die Verwendung von relativen URLs vermeiden. Angenommen, Sie legen die Dateijquery.balloon.jsim Verzeichnis "js" für Ihr untergeordnetes Thema ab. In WordPress ist es Standard, Code zu verwenden, der die folgenden Kriterien erfüllt:

wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);

Die Funktion get_stylesheet_directory_uri gibt die vollständige Pfad-URL zu Ihrem untergeordneten Themenverzeichnis zurück.

EDIT(hatte vergessen den Balloneffekt zu aktivieren)

Für den Aktivierungsteil (der $(document).ready(...);-Code) besteht die Standardmethode für WordPress (und diejenige, die das geringste Unterbrechungspotential in Bezug auf die Beziehung zwischen Hauptthema und Kind aufweist) darin, eine js-Datei damit zu erstellen, die beispielsweise als "js" bezeichnet wird "balloonactivate.js", und legen Sie diese Datei in den Ordner "js" für Ihr untergeordnetes Thema.

Nehmen wir an, Ihr untergeordnetes Thema ist für ein Thema namens "Hauptthema". Dann sollte sich Ihr Child-Theme in einem Ordner namens "maintheme-child" befinden (dh wp-content/themes/maintheme-child). Legen Sie im folgenden Ordner "js" (der entweder bereits vorhanden ist oder den Sie erstellt haben, um die Datei "jquey.balloon.js" abzulegen) die Datei "** strong text ** balloonactivate.js" ab. Sie müssen es nur noch wie die Skripte jquery und jquery.balloon.js einreihen.

Der vollständige Code, der für Sie funktionieren könnte, lautet also wie folgt:

function enqueue_jquery_balloon() {
   wp_enqueue_script('jquery');
   wp_enqueue_script('jquery-balloon', get_stylesheet_directory_uri().'/js/jquery.balloon.js', array('jquery'), false, false);
   wp_enqueue_script('activate-balloon', get_stylesheet_directory_uri().'/js/balloonactivate.js', array('jquery-balloon'), false, false);
}

add_action('wp_enqueue_scripts', 'enqueue_jquery_balloon').

Dieser Code sollte zur Dateifunctions.phpim Verzeichnis für Ihr untergeordnetes Thema hinzugefügt werden.

Zur Aktivierung des Sprechblaseneffekts kann der Code $(document).ready(...); auch inline am Ende der Datei footer.php des untergeordneten Themas hinzugefügt werden (wenn das untergeordnete Thema eine vom Hauptthema abweichende Fußzeile erfordert). Aber wenn die Fußzeile des Hauptthemas ausreicht, wäre es schade, einfooter.phpim untergeordneten Thema nur für das Sprechblasen-Skript zu erstellen (daher der obige Kommentar zu den "am wenigsten störenden" Auswirkungen desballoonactivate.jsDatei).

Das Einreihen von jquery ist in Ihrem Fall wahrscheinlich nicht erforderlich, aber das erneute Einreihen ist kein Problem. Ein Problem wäre, wenn eine Version von jquery bereits geladen wäre und Sie eine zweite geladen hätten.

Hoffe das hilft.

2
Phil R.