Wie füge ich ein einfaches jQuery-Skript zu WordPress hinzu?

Ich lese den Codex und ein paar Blog-Posts über die Verwendung von jQuery in WordPress, und es ist sehr frustrierend. Ich habe so weit wie jQuery in functions.php Datei geladen, aber alle Führer da draußen sind beschissen, weil sie davon ausgehen, dass Sie bereits eine Tonne WordPress-Erfahrung haben. Zum Beispiel sagen sie, dass jetzt, wo ich jQuery durch die Datei functions.php lade, ich jetzt 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?

Ich weiß, was du mit den Tutorials meinst. Hier ist, wie ich es mache:

Zuerst müssen Sie Ihr Skript schreiben. Erstellen Sie in Ihrem Themenordner einen Ordner namens “js”. Erstellen Sie eine Datei in diesem Ordner für Ihr Javascript. ZB your-script.js. Fügen Sie Ihrer Datei Ihr jQuery-Skript hinzu (Sie benötigen keine -Tags in einer .js-Datei).

Hier sehen Sie ein Beispiel, wie Ihr jQuery-Skript (in wp-content / themes / Ihr-Thema / js / your-scrript.js) aussehen könnte:

 jQuery(document).ready(function($) { $('#nav a').last().addClass('last'); }) 

Beachten Sie, dass ich jQuery und nicht $ am Anfang der function verwende.

Ok, öffne jetzt die functions.php Datei deines Themes. Sie sollten die function wp_enqueue_script() verwenden, damit Sie Ihr Skript hinzufügen und WordPress wp_enqueue_script() können, dass es auf jQuery angewiesen ist. So geht's:

 add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_enqueue_script( 'your-script', // name your script so that you can attach other scripts and de-register, etc. get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file array('jquery') // this array lists the scripts upon which your script depends ); } 

Angenommen, Ihr Thema hat wp_head und wp_footer an den richtigen Stellen, sollte dies funktionieren. Lassen Sie es mich wissen, wenn Sie weitere Hilfe benötigen.

WordPress-Fragen können bei WordPress Answers abgefragt werden.

Nach langem Suchen habe ich endlich etwas gefunden, das mit dem neuesten WordPress funktioniert. Hier sind die folgenden Schritte:

  1. Suchen Sie das Verzeichnis Ihres Designs, erstellen Sie einen Ordner im Verzeichnis für Ihre benutzerdefinierte js ( custom_js in diesem Beispiel ).
  2. Setzen Sie Ihre benutzerdefinierte jQuery in eine .js-Datei in diesem Verzeichnis ( jquery_test.js in diesem Beispiel ).
  3. Stellen Sie sicher, dass Ihre benutzerdefinierte jQuery .js wie folgt aussieht:

     (function($) { $(document).ready(function() { $('.your-class').addClass('do-my-bidding'); }) })(jQuery); 
  4. Gehe in das Verzeichnis des Themas, öffne functions.php

  5. Fügen Sie oben etwas Code hinzu, der folgendermaßen aussieht:

     //this goes in functions.php near the top function my_scripts_method() { // register your script location, dependencies and version wp_register_script('custom_script', get_template_directory_uri() . '/custom_js/jquery_test.js', array('jquery'), '1.0' ); // enqueue the script wp_enqueue_script('custom_script'); } add_action('wp_enqueue_scripts', 'my_scripts_method'); 
  6. Überprüfen Sie Ihre Website, um sicherzustellen, dass es funktioniert!

Wenn Sie das untergeordnete wordpress- Thema für das Hinzufügen von Skripts zu Ihrem Design verwenden, sollten Sie die function get_template_directory_uri in get_stylesheet_directory_uri ändern. Beispiel:

Übergeordnetes Thema:

 add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_register_script( 'parent-theme-script', get_template_directory_uri() . '/js/your-script.js', array('jquery') ); wp_enqueue_script('parent-theme-script'); } 

Kinderthema:

 add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_register_script( 'child-theme-script', get_stylesheet_directory_uri() . '/js/your-script.js', array('jquery') ); wp_enqueue_script('child-theme-script'); } 

get_template_directory_uri: / your-site / wp-content / themes / übergeordnetes Thema

get_stylesheet_directory_uri: / your-site / wp-content / themes / untergeordnetes Thema

Sie können jQuery oder Javascript in der Datei function.php des Themes hinzufügen. Der Code ist wie folgt:

 add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_enqueue_script( 'your_script_name', // your script unique name get_template_directory_uri().'/js/your-script.js', //script file location array('jquery') //lists the scripts upon which your script depends ); } 

Für weitere Details besuchen Sie dieses Tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

Abgesehen davon, dass Sie das Skript in functionen einfügen, können Sie “nur” einen Link (ein link rel-Tag, das ist) in die Kopfzeile, die Fußzeile, in eine beliebige Vorlage einfügen. Sie müssen nur sicherstellen, dass der Pfad korrekt ist. Ich schlage vor, so etwas zu verwenden (vorausgesetzt, Sie befinden sich im Verzeichnis Ihres Themes).

  

Eine gute Übung ist es, dies direkt vor dem schließenden Body-Tag oder zumindest kurz vor dem Footer einzufügen. Sie können auch php includes oder mehrere andere Methoden zum Ziehen dieser Datei verwenden.

  

Sie können benutzerdefiniertes JavaScript oder Jquery mit diesem Plugin hinzufügen.
https://wordpress.org/plugins/custom-javascript-editor/

Wenn Sie jQuery verwenden, vergessen Sie nicht, jquery noconflict mode zu verwenden

Es gibt viele Anleitungen und Antworten, wie Sie Ihr Skript hinzufügen können, um auf der Seite angezeigt zu werden. Aber was ich nicht finden konnte ist, wie man diesen Code strukturiert, damit er richtig funktioniert. Dies liegt daran, dass $ in dieser Form von JQuery nicht verwendet wird.

Also hier ist mein Code und Sie können das als Vorlage verwenden.

 jQuery(document).ready(function( $ ){ $("#btnCalculate").click(function () { var val1 = $(".visits").val(); var val2 = $(".collection").val(); var val3 = $(".percent").val(); var val4 = $(".expired").val(); var val5 = $(".payer").val(); var val6 = $(".deductible").val(); var result = val1 * (val3 / 100) * 10 * 0.25; var result2 = val1 * val2 * (val4 / 100) * 0.2; var result3 = val1 * val2 * (val5 / 100) * 0.2; var result4 = val1 * val2 * (val6 / 100) * 0.1; var val7 = $(".pverify").val(); var result5 = result + result2 + result3 + result4 - val7; var result6 = result5 * 12; $("#result").val("$" + result); $("#result2").val("$" + result2); $("#result3").val("$" + result3); $("#result4").val("$" + result4); $("#result5").val("$" + result5); $("#result6").val("$" + result6); }); }); 

Sie können die vordefinierte WordPress-function verwenden, um dem WordPress-Plugin eine Skriptdatei hinzuzufügen.

 wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery')); 

Schauen Sie sich den Beitrag an, der Ihnen hilft zu verstehen, wie einfach Sie jQuery und CSS im WordPress-Plugin implementieren können.

** # Methode 1: ** Versuchen Sie, Ihren jquery-Code in eine separate js-Datei zu schreiben.

Registrieren Sie dieses Skript jetzt in der Datei functions.php.

 function add_my_script() { wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/your-script-name.js', array('jquery') ); } add_action( 'wp_enqueue_scripts', 'add_my_script' ); 

Jetzt bist du fertig.

Das Registrieren eines Skripts in functionen hat Vorteile, da es im Abschnitt ist, wenn die Seite geladen wird, daher ist es immer ein Teil von header.php. Sie müssen Ihren Code nicht jedes Mal wiederholen, wenn Sie einen neuen HTML-Inhalt schreiben.

#Methode 2: Setzen Sie den Skriptcode in den Seitenkörper unter -Tag. Dann müssen Sie es nicht in functionen registrieren.

“Wir haben Google” cit. Um das Script innerhalb von WordPress korrekt 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

  

Abgesehen davon, dass Sie das Skript in functionen einfügen, können Sie “nur” einen Link (ein link rel-Tag, das ist) in die Kopfzeile, die Fußzeile, in eine beliebige Vorlage einfügen.

Nein. Sie sollten niemals einen Link zu einem externen Skript in WordPress hinzufügen. Wenn Sie sie über die Datei functions.php in die Warteschlange stellen, wird sichergestellt, dass die Skripte in der richtigen Reihenfolge geladen werden.

Wenn sie nicht in die Warteschlange eingereiht werden, funktioniert das Skript möglicherweise nicht, obwohl es korrekt geschrieben wurde.

Sie können Ihr Skript in eine andere Datei schreiben. Und nehmen Sie Ihre Datei so in die Warteschlange, dass der Name des Skripts image-ticker.js .

 wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

anstelle von /js/image-ticker.js sollten Sie Ihren js-Dateipfad angeben.

Antwort von hier: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Trotz der Tatsache, dass WordPress schon eine Weile existiert und die Methode, Skripten zu Themen und Plugins hinzuzufügen, seit Jahren gleich geblieben ist, gibt es immer noch Verwirrung darüber, wie genau Skripte hinzugefügt werden sollten. Also lasst es uns klären.

Da jQuery immer noch das am häufigsten verwendete JavaScript-Framework ist, casting wir einen Blick darauf, wie Sie Ihrem Theme oder Plugin ein einfaches Skript hinzufügen können.

jQuery’s Kompatibilitätsmodus

Bevor wir anfangen, Skripte an WordPress anzuhängen, schauen wir uns den Kompatibilitätsmodus von jQuery an. WordPress wird mit einer Kopie von jQuery ausgeliefert, die Sie mit Ihrem Code verwenden sollten. Wenn WordPress ‘jQuery geladen wird, verwendet es den Kompatibilitätsmodus, mit dem Konflikte mit anderen Sprachbibliotheken vermieden werden.

Worauf es ankommt, ist, dass Sie das Dollarzeichen nicht direkt wie in anderen Projekten verwenden können. Wenn Sie jQuery für WordPress schreiben, müssen Sie stattdessen jQuery verwenden. Sehen Sie sich den folgenden Code an, um zu sehen, was ich meine:

Müssen Sie nur jquery laden?

1) Wie die anderen Guides sagen, registrieren Sie Ihr Skript in Ihrer functions.php-Datei wie folgt:

 // register scripts if (!is_admin()) { // here is an example of loading a custom script in a /scripts/ folder in your theme: wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true); // enqueue these scripts everywhere wp_enqueue_script('jquery'); wp_enqueue_script('sandbox.common'); } 

2) Beachten Sie, dass wir jQuery nicht registrieren müssen, da es sich bereits im core befindet. Stellen Sie sicher, dass wp_footer () in Ihrer footer.php aufgerufen wird und wp_head () in Ihrer header.php aufgerufen wird (hier wird das Skript-Tag ausgegeben), und jQuery wird auf jeder Seite geladen. Wenn Sie jQuery mit WordPress in die Warteschlange stellen, befindet es sich im “Kein Konflikt” -Modus, Sie müssen also jQuery anstelle von $ verwenden. Sie können jQuery abmelden, wenn Sie möchten, und registrieren Sie Ihre eigenen, indem Sie wp_deregister_script (‘jquery’) tun.