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

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.phpDatei 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.phpDatei 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?

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:

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

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:

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 mich wissen, wenn Sie weitere Hilfe benötigen.

WordPress-Fragen können unter WordPress Answers gestellt 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 Themas und erstellen Sie einen Ordner im Verzeichnis für Ihre benutzerdefinierten js ( in diesem Beispiel custom_js ).
2. Fügen Sie Ihre benutzerdefinierte jQuery in eine .js-Datei in diesem Verzeichnis ein ( in diesem Beispiel jquery_test.js ).

3. Stellen Sie sicher, dass Ihre benutzerdefinierte jQuery .js folgendermaßen aussieht:

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. Gehen Sie in das Verzeichnis des Themas und öffnen Sie die Datei functions.php

5. Fügen Sie oben einen 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 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:

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 / parent-theme

get_stylesheet_directory_uri: / your-site / wp-content / theme / child-theme

Sie können jQuery oder Javascript in die function.php-Datei des Themas einfügen. Der Code lautet 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
);
}

Weitere Informationen finden Sie in diesem Tutorial: http://www.codecanal.com/add-simple-jquery-script-wordpress/

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).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

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.

<script type="javascript"><?php include('your-file.js');?></script>

** # Methode 1: ** Versuchen Sie, Ihren jquery-Code in einer separaten js-Datei abzulegen.

Registrieren Sie nun dieses Skript 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 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.

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

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.

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);
  });
});

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

Trotz der Tatsache, dass es WordPress schon eine Weile gibt und die Methode zum Hinzufügen von Skripten zu Themen und Plugins seit Jahren dieselbe ist, gibt es immer noch einige Unklarheiten darüber, wie genau Sie Skripte hinzufügen sollen. Also lasst es uns klären.

Da jQuery immer noch das am häufigsten verwendete Javascript-Framework ist, schauen wir uns an, wie Sie Ihrem Thema oder Plugin ein einfaches Skript hinzufügen können.

Kompatibilitätsmodus von jQuery

Bevor wir mit dem Anhängen von Skripten an WordPress beginnen, schauen wir uns den Kompatibilitätsmodus von jQuery an. WordPress wird mit einer Kopie von jQuery geliefert, die Sie mit Ihrem Code verwenden sollten. Wenn WordPress 'jQuery geladen wird, wird der Kompatibilitätsmodus verwendet, mit dem Konflikte mit anderen Sprachbibliotheken vermieden werden.

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

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:

1. Schreiben Sie Ihre JavaScript-Funktionen in eine separate ".js" -Datei

Denken Sie nicht einmal daran, signifikantes JavaScript in das HTML Ihres Posts aufzunehmen - erstellen Sie eine oder mehrere JavaScript-Dateien mit Ihrem Code.

2. Verbinden Sie Ihr JavaScript mit dem HTML-Code Ihres Beitrags

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:

var val = document.getElementById(“AM_Freq_A_3”).value;

Und von HTML:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. Verwenden Sie jQuery, um die Initialisierungsfunktion Ihres JavaScript-Widgets aufzurufen

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:

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. Laden Sie im HTML-Code Ihres Beitrags die für Ihren Beitrag erforderlichen Skripte

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.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. Enqueue jQuery

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:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

Sie können die vordefinierte WordPress-Funktion verwenden, um eine Skriptdatei zum WordPress-Plugin 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.

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.

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.

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.

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

an der Stelle von /js/image-ticker.jssollten Sie Ihren js-Dateipfad setzen.

In WordPress können Sie die Skripte mithilfe der folgenden Funktionen korrekt in Ihre Website aufnehmen.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

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:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

"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

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

und nach deinem eigenen Skript

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

Müssen Sie nur jquery laden?

1) Registrieren Sie Ihr Skript wie in den anderen Handbüchern wie folgt in Ihrer Datei functions.php:

// 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 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.

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');