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

121

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?

Bürger
quelle
3
Was hast du versucht, das dich denken lässt, dass alle Guides da draußen beschissen sind?
undefiniert
1
In welcher Anleitung sind Sie in welchem Schritt auf welches Problem gestoßen?
Pixelistik
Können Sie genau sein? Was hast du versucht und hat nicht funktioniert?
Ahmed Fouad
4
Ich stimme @Citizen zu, es ist zunächst ein Minenfeld, um zu verstehen, was mit WordPress zu tun ist, da die Anweisungen für Anfänger in einigen online verfügbaren Handbüchern nicht sehr gründlich sind.
Harry
Überprüfen Sie den folgenden Link: wpseoblogs.com/how-to-add-javascript-code-when-published-post
Patel

Antworten:

192

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 .

kdev
quelle
15
Ich musste add_action hinzufügen ('wp_enqueue_scripts', 'add_my_script'); um dies zum Laden zu bringen, aber es ist immer noch die klarste Antwort.
Ele Munjeli
In welcher Datei haben Sie es hinzugefügt? @ ElMunjeli
Francisco Corrales Morales
10
Vielen Dank, Ele Munjeli, für den Tipp zu add_action. AUCH: Wenn Sie mit einem untergeordneten Thema arbeiten, verwenden Sie stattdessen get_stylesheet_directory_uri.
Screenack
Danke, Mann. Sie retten meinen Tag, den Sie geschnippt haben, funktioniert perfekt für mich
Die EasyLearn Academy
Auch im Anschluss an diese, bin ich immer noch empfangen Uncaught TypeError: Cannot read property 'fn' of undefinedund Uncaught TypeError: undefined is not a functionFehler, auch wenn ein anderes Skript in der Datei Funktionen der Warteschlange wird, und das funktioniert gut
Lee
44

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!
Stan
quelle
8
Danke, das hat mir sehr geholfen!. Für alle, die mit einem untergeordneten Thema arbeiten, verwenden Sie get_stylesheet_directory_uri () anstelle von get_template_directory_uri ()
David Taiaroa
Danke für diese Schritt-für-Schritt-Erklärung, Stan! (und der Hinweis zur Verwendung mit untergeordneten Themen, @DavidTaiaroa)
Marky
Dies funktioniert hervorragend, aber ich brauche es nur, um auf einer bestimmten Seite zu feuern. Gibt es eine Möglichkeit, dies so zu ändern, dass es nur auf der Seite ausgelöst wird? Oder ist das eine ganz andere WP-Funktion, die für dieses Verhalten benötigt wird?
HPWD
Wenn ich das mache, kann ich jquery auf meine Seite bekommen, aber ich bekomme auch einen Fehler in der Konsole, der keine ernsthaften Probleme zu verursachen scheint: GET australiana.auspro.com.au/wp-content/themes/twentytwenty/assets/… net :: ERR_ABORTED 404 (nicht gefunden) Wie kann ich es loswerden?
Rez.Net
8

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

DibaCode
quelle
6

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/

Jitendra Damor
quelle
4

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>
josh.chavanne
quelle
Das ist alles rund um schlechte Praxis im Jahr 2019.
Phill Healey
Einverstanden, aber dies wurde vor 5 Jahren geschrieben. Enqueueing und was natürlich nicht die beste Vorgehensweise ist.
josh.chavanne
1
Nur erwähnenswert, da dieser Beitrag bei Google ziemlich prominent angezeigt wird. Ich würde es hassen, wenn jemand hierher kommt und schlechte Praktiken anwendet, weil er auf ein altes Q & A gestoßen ist.
Phill Healey
3

** # 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.

Rajan471
quelle
Methode 2 spielt mit dem Feuer.
John Hascall
3

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);
  });
});
rauben
quelle
3

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:

Ahmed Elcheikh
quelle
2

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.

  1. 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);'/>
  1. 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();
});
  1. 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>
  1. 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');
}
Nigel Redmon
quelle
Eine andere Alternative ist die Verwendung eines Javascript Manager-Plugins. Das mag für manche ein guter Weg sein, aber ich bevorzuge es, nicht von vielen Plugins und Updates abhängig zu sein.
Nigel Redmon
1

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.

user64745
quelle
1

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.

Kenneth Odle
quelle
1

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.

upendra tiwari
quelle
1

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' );
Aman Dhanda
quelle
1

"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>
Vlad
quelle
0

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.

Eli Cole
quelle
Nein, ich habe diesen Teil herausgefunden. Das Laden von jquery ist einfach. Was ich wissen muss, ist, zu welcher Datei ich meinen JQuery-Code hinzufügen soll und wie.
Bürger
Setzen Sie wp_enqueue_script ('Name des Skripts'); vor dem get_header () der Vorlage, unter der das Skript in die Warteschlange gestellt werden soll.
Eli Cole
0
function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
Deepak K. sah
quelle