it-swarm.com.de

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

Ich habe den Codex und ein paar Blogbeiträge über die Verwendung von jQuery in WordPress gelesen, und es ist sehr frustrierend. Ich habe soeben jQuery in functions.php-Datei geladen, aber alle Guides da draußen sind beschissen, weil sie davon ausgehen, dass Sie bereits eine Menge WordPress-Erfahrung haben. Zum Beispiel sagen sie, dass ich jetzt jQuery durch die functions.php-Datei lade. Jetzt muss ich nur noch meine jQuery laden.

Wie mache ich das genau? Zu welchen Dateien füge ich speziell Code hinzu? Wie genau füge ich es für eine einzelne WordPress-Seite hinzu?

108
Citizen

Ich weiß, was du mit den Tutorials meinst. So mache ich es:

Zuerst müssen Sie Ihr Skript schreiben. Erstellen Sie in Ihrem Designordner einen Ordner mit dem Namen 'js'. Erstellen Sie in diesem Ordner eine Datei für Ihr Javascript. Z.B. your-script.js. Fügen Sie der Datei Ihr jQuery-Skript hinzu (Sie benötigen keine <script>-Tags in einer JS-Datei).

Hier ein Beispiel, wie Ihr jQuery-Skript (in wp-content/themes/your-theme/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 Funktion verwende.

Ok, jetzt öffnen Sie die Datei functions.php Ihres Themas. Sie sollten die Funktion wp_enqueue_script() verwenden, damit Sie Ihr Skript hinzufügen können, während Sie gleichzeitig WordPress mitteilen, 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 Theme hat wp_head und wp_footer an den richtigen Stellen, dies sollte funktionieren. Lassen Sie mich wissen, wenn Sie weitere Hilfe benötigen.

WordPress-Fragen können unter WordPress Answers gestellt werden.

165
kdev

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

  1. Suchen Sie das Verzeichnis Ihres Themes und erstellen Sie einen Ordner im Verzeichnis für Ihre benutzerdefinierten Js ( custom_js in diesem Beispiel ).
  2. Legen Sie Ihre benutzerdefinierte jQuery in einer JS-Datei in diesem Verzeichnis ab ( jquery_test.js in diesem Beispiel ).
  3. Stellen Sie sicher, dass Ihre benutzerdefinierten jQuery-Dateien wie folgt aussehen:

    (function($) {
    $(document).ready(function() {
    $('.your-class').addClass('do-my-bidding');
    })
    })(jQuery);
    
  4. Wechseln Sie in das Verzeichnis des Themes, öffnen Sie die Datei functions.php .

  5. Fügen Sie im oberen Bereich etwas Code hinzu, der so 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 sie funktioniert!
41
Stan

Wenn Sie wordpress child theme verwenden, um Skripts zu Ihrem Design hinzuzufügen, sollten Sie die Funktion 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');
}

Child-Thema:

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/themes/child-theme

6
DibaCode

Sie können jQuery oder Javascript in der function.php-Datei .._ des Themes hinzufü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/

4
Jitendra Damor

Neben dem Einfügen des Skripts durch Funktionen können Sie "nur" einen Link (ein Link-Rel-Tag) in die Kopfzeile, die Fußzeile, in eine beliebige Vorlage, wo auch immer, 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 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 direkt vor Ihrer Fußzeile einzufügen. Sie können auch PHP-Includes oder mehrere andere Methoden verwenden, um diese Datei einzulesen.

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

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

Wenn Sie jQuery verwenden, vergessen Sie nicht, den Modus jquery noconflict zu verwenden

3
sameeuor

Es gibt viele Tutorials und Antworten, wie Sie Ihr Skript in die Seite aufnehmen können. Was ich jedoch nicht finden konnte, ist die Strukturierung des Codes, damit er richtig funktioniert. Dies liegt daran, dass $ in dieser JQuery-Form nicht verwendet wird.

Hier ist mein Code und Sie können diesen 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);
  });
});
3
Rob

** # Methode 1: ** Versuchen Sie, Ihren Jquery-Code in einer separaten JS-Datei zu speichern.

Jetzt registrieren Sie das 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 eines Skripts in Funktionen hat seine Vorteile, da es beim Laden der Seite im Abschnitt <head> angezeigt wird. Sie müssen Ihren Code also nicht jedes Mal wiederholen, wenn Sie einen neuen HTML-Inhalt schreiben.

#Method 2: Den Skriptcode in den Seitentext unter <script>-Tag einfügen. Dann müssen Sie es nicht in Funktionen registrieren.

2
Rajan471

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

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

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

der Kompatibilitätsmodus von jQuery

Bevor wir mit dem Anhängen von Skripts an WordPress beginnen, werfen wir einen Blick auf den Kompatibilitätsmodus von jQuery. WordPress wird mit einer Kopie von jQuery geliefert, die Sie mit Ihrem Code verwenden sollten. Beim Laden von jQuery in WordPress wird der Kompatibilitätsmodus verwendet, um Konflikte mit anderen Sprachbibliotheken zu vermeiden.

Es geht darum, 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. Schauen Sie sich den Code unten an, um zu sehen, was ich meine:

2
Ahmed Elcheikh

Neben dem Einfügen des Skripts durch Funktionen können Sie "nur" einen Link (ein Link-Rel-Tag) in die Kopfzeile, die Fußzeile, in eine beliebige Vorlage, wo auch immer, einfügen.

Nein. Sie sollten niemals einen Link zu einem externen Skript wie diesem in WordPress hinzufügen. Durch das Einreihen der Dateien über die Datei functions.php wird sichergestellt, dass die Skripts in der richtigen Reihenfolge geladen werden.

Andernfalls kann das Skript nicht funktionieren, obwohl es korrekt geschrieben wurde.

1
Kenneth Odle

Sie können die vordefinierte Funktion von WordPress 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 die post an, die Ihnen hilft zu verstehen, wie einfach Sie jQuery und CSS in WordPress-Plugins implementieren können.

1
user64745

"Wir haben Google" cit . Für ein ordnungsgemäßes Verwenden von Skripts in WordPress fügen Sie einfach gehostete Bibliotheken hinzu. Wie Google

Nach der ausgewählten Bibliothek muss der Link vor dem benutzerdefinierten Skript erstellt werden: 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>
1
Vlad

sie können Ihr Skript in eine andere Datei schreiben. Geben Sie Ihre Datei wie folgt an Nehmen Sie an, 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 ); 

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

1
upendra tiwari

In WordPress können Sie die Skripts in Ihre Website einschließen, indem Sie die folgenden Funktionen verwenden.

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

Diese Funktionen werden im Hook wp_enqueue_script aufgerufen.

Weitere Informationen und Beispiele finden Sie unter Hinzufügen von JS-Dateien in Wordpress mithilfe von 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' );
1
Aman Dhanda

Müssen Sie nur Jquery laden?

1) Wie die anderen Handbücher sagen, registrieren Sie Ihr Skript 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 Skripttag ausgegeben), und jQuery wird auf jeder Seite geladen. Wenn Sie jQuery mit WordPress in die Warteschlange stellen, wird es sich im Modus "Kein Konflikt" befinden. Daher müssen Sie jQuery anstelle von $ verwenden. Sie können die Registrierung von jQuery aufheben, wenn Sie möchten, und Ihre eigene Registrierung erneut vornehmen, indem Sie wp_deregister_script ('jquery') ausführen.

0
Eli Cole