Ich habe den Codex und einige Blog-Beiträge über die Verwendung von jQuery in WordPress gelesen und es ist sehr frustrierend. Ich bin so weit gekommen, jQuery in eine functions.php
Datei zu laden , aber alle Anleitungen da draußen sind beschissen, weil sie davon ausgehen, dass Sie bereits eine Menge WordPress-Erfahrung haben. Zum Beispiel sagen sie, dass ich jetzt, da ich jQuery über die functions.php
Datei lade, nur noch meine jQuery laden muss.
Wie genau mache ich das? Zu welchen Dateien füge ich speziell Code hinzu? Wie genau füge ich es für eine einzelne WordPress-Seite hinzu?
Antworten:
Ich weiß, was du mit den Tutorials meinst. So mache ich das:
Zuerst müssen Sie Ihr Skript schreiben. Erstellen Sie in Ihrem Themenordner einen Ordner mit dem Namen "js". Erstellen Sie in diesem Ordner eine Datei für Ihr Javascript. ZB your-script.js. Fügen Sie dieser Datei Ihr jQuery-Skript hinzu (Sie benötigen keine
<script>
Tags in einer .js-Datei).Hier ist ein Beispiel dafür, wie Ihr jQuery-Skript (in wp-content / theme / your-theme / js / your-scrript.js) aussehen könnte:
Beachten Sie, dass ich zu Beginn der Funktion jQuery und nicht $ verwende.
Ok, jetzt öffne die Datei functions.php deines Themas. Sie sollten die
wp_enqueue_script()
Funktion verwenden, damit Sie Ihr Skript hinzufügen und WordPress mitteilen können, dass es auf jQuery basiert. So geht's:Angenommen, Ihr Thema hat wp_head und wp_footer an den richtigen Stellen, sollte dies funktionieren. Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.
WordPress-Fragen können unter WordPress Answers gestellt werden .
quelle
Uncaught TypeError: Cannot read property 'fn' of undefined
undUncaught TypeError: undefined is not a function
Fehler, auch wenn ein anderes Skript in der Datei Funktionen der Warteschlange wird, und das funktioniert gutNach langem Suchen habe ich endlich etwas gefunden, das mit dem neuesten WordPress funktioniert. Hier sind die folgenden Schritte:
Stellen Sie sicher, dass Ihre benutzerdefinierte jQuery .js folgendermaßen aussieht:
Gehen Sie in das Verzeichnis des Themas und öffnen Sie die Datei functions.php
Fügen Sie oben einen Code hinzu, der folgendermaßen aussieht:
quelle
Wenn Sie ein untergeordnetes WordPress- Thema zum Hinzufügen von Skripten zu Ihrem Thema verwenden, sollten Sie die Funktion get_template_directory_uri in get_stylesheet_directory_uri ändern, zum Beispiel:
Übergeordnetes Thema:
Kinderthema:
get_template_directory_uri: / your-site / wp-content / themes / parent-theme
get_stylesheet_directory_uri: / your-site / wp-content / theme / child-theme
quelle
Sie können jQuery oder Javascript in die function.php-Datei des Themas einfügen. Der Code lautet wie folgt:
Weitere Informationen finden Sie in diesem Tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/
quelle
Neben dem Einfügen des Skripts in Funktionen können Sie "nur" einen Link (ein Link-Rel-Tag) in die Kopf- und Fußzeile einer beliebigen Vorlage einfügen, wo immer dies möglich ist. Sie müssen nur sicherstellen, dass der Pfad korrekt ist. Ich schlage vor, so etwas zu verwenden (vorausgesetzt, Sie befinden sich im Verzeichnis Ihres Themas).
Es empfiehlt sich, dies direkt vor dem schließenden Body-Tag oder zumindest kurz vor Ihrer Fußzeile einzufügen. Sie können auch PHP-Includes oder verschiedene andere Methoden zum Abrufen dieser Datei verwenden.
quelle
** # Methode 1: ** Versuchen Sie, Ihren jquery-Code in einer separaten js-Datei abzulegen.
Registrieren Sie nun dieses Skript in der Datei functions.php.
Jetzt bist du fertig.
Das Registrieren von Skripten in Funktionen hat Vorteile, da es
<head>
beim Laden der Seite im Abschnitt enthalten ist und daher immer Teil von header.php ist. Sie müssen Ihren Code also nicht jedes Mal wiederholen, wenn Sie einen neuen HTML-Inhalt schreiben.#Methode 2: Fügen Sie den Skriptcode im Seitenkörper unter
<script>
Tag ein. Dann müssen Sie es nicht in Funktionen registrieren.quelle
Mit diesem Plugin können Sie benutzerdefiniertes Javascript oder JQuery hinzufügen.
https://wordpress.org/plugins/custom-javascript-editor/
Wenn Sie jQuery verwenden, vergessen Sie nicht, den jquery noconflict-Modus zu verwenden
quelle
Hier finden Sie viele Tutorials und Antworten zum Hinzufügen Ihres Skripts, das in die Seite aufgenommen werden soll. Was ich aber nicht finden konnte, ist, wie man diesen Code so strukturiert, dass er richtig funktioniert. Dies liegt daran, dass $ in dieser Form von JQuery nicht verwendet wird.
Hier ist mein Code, den Sie als Vorlage verwenden können.
quelle
Antwort von hier: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/
quelle
Die Lösungen, die ich gesehen habe, bestehen aus der Perspektive, einem Thema Javascript-Funktionen hinzuzufügen. Das OP fragte jedoch speziell: "Wie genau füge ich es für eine einzelne WordPress-Seite hinzu?" Dies klingt so, als würde ich Javascript in meinem Wordpress-Blog verwenden, in dem einzelne Beiträge möglicherweise unterschiedliche "Widgets" mit Javascript enthalten. In einem Beitrag kann der Benutzer beispielsweise Variablen (Schieberegler, Kontrollkästchen, Texteingabefelder) ändern und die Ergebnisse zeichnen oder auflisten.
Ausgehend von der JavaScript-Perspektive:
Denken Sie nicht einmal daran, signifikantes JavaScript in das HTML Ihres Posts aufzunehmen - erstellen Sie eine oder mehrere JavaScript-Dateien mit Ihrem Code.
Wenn Ihr JavaScript-Widget mit HTML-Steuerelementen und -Feldern interagiert, müssen Sie wissen, wie Sie diese Elemente in JavaScript abfragen und festlegen und wie Sie UI-Elemente Ihre JavaScript-Funktionen aufrufen lassen. Hier sind einige Beispiele; Zunächst aus JavaScript:
Und von HTML:
Fügen Sie dies Ihrer .js-Datei hinzu, indem Sie den Namen Ihrer Funktion verwenden, die Ihr JavaScript-Widget konfiguriert und zeichnet, wenn die Seite dafür bereit ist:
Im Wordpress-Code-Editor gebe ich normalerweise die Skripte am Ende des Beitrags an. Zum Beispiel habe ich einen Skriptordner in meinem Hauptverzeichnis. Im Inneren habe ich ein Dienstprogrammverzeichnis mit allgemeinem JavaScript, das einige meiner Beiträge möglicherweise gemeinsam nutzen - in diesem Fall einige meiner eigenen mathematischen Dienstprogrammfunktionen und die flotr2-Plotbibliothek. Ich finde es bequemer, das postspezifische JavaScript in einem anderen Verzeichnis zu gruppieren, wobei die Unterverzeichnisse auf dem Datum basieren, anstatt beispielsweise den Medienmanager zu verwenden.
Wordpress registriert jQuery, ist jedoch nur verfügbar, wenn Sie Wordpress mitteilen, dass Sie es benötigen, indem Sie es in die Warteschlange stellen. Wenn Sie dies nicht tun, schlägt der Befehl jQuery fehl. In vielen Quellen erfahren Sie, wie Sie diesen Befehl zu Ihrer functions.php hinzufügen können. Nehmen Sie jedoch an, dass Sie einige andere wichtige Details kennen.
Erstens ist es eine schlechte Idee, ein Thema zu bearbeiten. Jedes zukünftige Update des Themas löscht Ihre Änderungen. Machen Sie ein untergeordnetes Thema. Hier ist wie:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
Die Datei functions.php des Kindes überschreibt nicht die gleichnamige Datei des übergeordneten Themas, sondern fügt sie hinzu. Das Tutorial zu untergeordneten Themen schlägt vor, wie die übergeordnete und untergeordnete Datei style.css in die Warteschlange gestellt werden. Wir können dieser Funktion einfach eine weitere Zeile hinzufügen, um auch jQuery in die Warteschlange zu stellen. Hier ist meine gesamte Datei functions.php für das untergeordnete Thema:
quelle
Sie können die vordefinierte WordPress-Funktion verwenden, um eine Skriptdatei zum WordPress-Plugin hinzuzufügen.
Schauen Sie sich den Beitrag an, der Ihnen hilft zu verstehen, wie einfach Sie jQuery und CSS im WordPress-Plugin implementieren können.
quelle
Nein. Sie sollten in WordPress niemals einfach einen Link zu einem externen Skript wie diesem hinzufügen. Durch das Einreihen in die Datei functions.php wird sichergestellt, dass die Skripte in der richtigen Reihenfolge geladen werden.
Wenn Sie sie nicht in die Warteschlange stellen, funktioniert Ihr Skript möglicherweise nicht, obwohl es korrekt geschrieben ist.
quelle
Sie können Ihr Skript in eine andere Datei schreiben. Und stellen Sie Ihre Datei wie folgt in die Warteschlange, vorausgesetzt, Ihr Skriptname lautet
image-ticker.js
.an der Stelle von
/js/image-ticker.js
sollten Sie Ihren js-Dateipfad setzen.quelle
In WordPress können Sie die Skripte mithilfe der folgenden Funktionen korrekt in Ihre Website aufnehmen.
Diese Funktionen werden im Hook aufgerufen
wp_enqueue_script
.Weitere Details und Beispiele finden Sie unter Hinzufügen von JS-Dateien in Wordpress mit wp_register_script & wp_enqueue_script
Beispiel:
quelle
"Wir haben Google" cit. Um das Skript in WordPress richtig zu verwenden, fügen Sie einfach gehostete Bibliotheken hinzu. Wie Google
Nach der ausgewählten Bibliothek, die Sie vor Ihrem benutzerdefinierten Skript verknüpfen müssen: exmpl
und nach deinem eigenen Skript
quelle
Müssen Sie nur jquery laden?
1) Registrieren Sie Ihr Skript wie in den anderen Handbüchern wie folgt in Ihrer Datei functions.php:
2) Beachten Sie, dass wir jQuery nicht registrieren müssen, da es sich bereits im Kern befindet. Stellen Sie sicher, dass wp_footer () in Ihrer footer.php und wp_head () in Ihrer header.php aufgerufen wird (hier wird das Skript-Tag ausgegeben) und jQuery auf jeder Seite geladen wird. Wenn Sie jQuery mit WordPress in die Warteschlange stellen, befindet es sich im Modus "Kein Konflikt". Sie müssen also jQuery anstelle von $ verwenden. Sie können jQuery abmelden, wenn Sie möchten, und Ihre eigene neu registrieren, indem Sie wp_deregister_script ('jquery') ausführen.
quelle
quelle