it-swarm.com.de

Wie kann ein jQuery-Skript auf einer Seite ausgeführt werden?

Es fällt mir schwer, herauszufinden, wie ich ein jQuery-Skript dazu bringen kann, auf einer meiner Wordpress-Seiten auf die "richtige" Weise ausgeführt zu werden.

Ich habe diesen Artikel verfolgt und umgesetzt, was in der ersten Antwort steht.

Es gibt so viele Tutorials und Artikel, in denen ich gelesen habe, wie man jQuery in Ihrem Blog zum Laufen bringt, aber ich kann es einfach nicht herausfinden.

Ich habe eine Reihe von Fragen, auf die ich hoffe, von anderen angesprochen zu werden, die Erfahrung damit haben.

Zuallererst sind die meisten Tutorials und Dinge, die ich gelesen habe, wie man jQueryenthaltenin Ihrem Blog erhält. Meine erste Frage ist, sollten die meisten Themen, die Sie dort herunterladen, jQuery nicht automatisch in Ihren Header aufnehmen? Zum Beispiel enthält meine Site diese Zeilen automatisch auf jeder Seite von Anfang an:

<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Also, jQuery ist enthalten, ich brauche mir darüber keine Sorgen zu machen ...

Okay, es ist enthalten, jetzt muss ich herausfinden, wie ich nur eine Beispielseite oder einen Beitrag zum Ausführen eines jQuery-Skripts bekomme.

Ich folge den Anweisungen auf der Seite, die ich oben aufgeführt habe ...

Ich gehe zuerst in das Back-End meiner Site, gehe in meinen Child Themes-Ordner und erstelle eine neue Datei mit dem Namen "jquery-script.js".

Darin schreibe ich den folgenden Code und speichere die Datei:

jQuery(document).ready(function($){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

Okay ... Ich habe meine jQuery-Skriptdatei im Backend. Jetzt muss ich dieses Skript referenzieren oder in die Warteschlange stellen. Dem Artikel zufolge ist es am besten, das Skript in eine Warteschlange zu stellen. Also folge ich den Anweisungen und füge eine neue PHP -Funktion in die "functions.php" -Datei meines untergeordneten Themas ein. In dieser Datei füge ich Folgendes hinzu:

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

Das ist also erledigt. Ich glaube das sollte funktionieren. Also erstelle ich eine "Testseite" auf meiner Site (nicht veröffentlicht oder so). Ich erstelle die divs, die Schaltfläche und alles, was ich brauche, damit mein Skript das tut, was ich will:

<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Ich schaue die Seite in der Vorschau an, klicke auf die Schaltfläche ... nichts. Nichts passiert.

Okay ... vielleicht muss ich ein bisschen mehr in meiner functions.php-Datei machen. Also gehe ich wieder hinein und lese auf der Seite, der ich folge, dass du vielleicht eine Zeile hinzufügen musst, damit es funktioniert. Also füge ich nach meiner Funktion folgende Zeile ein:

add_action('wp_enqueue_scripts', 'add_jquery_script');

Ich speichere die Datei. Ich bin aufgeregt. Das sollte funktionieren. Ich gehe und teste meine Seite ... gar nichts mehr. Wenn ich auf die Schaltfläche klicke, passiert nichts. Hmm ...

Also gehe ich jetzt und mache etwas völlig anderes in meiner functions.php-Datei. Etwas, das ich in der Vergangenheit getan habe, um bestimmte Skripte zum Laufen zu bringen ... also entferne ich die Funktion und den "add_action" -Aufruf vollständig und implementiere Folgendes in meine functions.php-Datei:

function add_jquery_script() {
    echo '<script type="text/javascript" src="http://<mysite>.com/wp-content/themes/responsive-childtheme-master/jquery-script.js"></script>' . "\n";
}
add_action('wp_head', 'add_jquery_script');

Ich speichere dann die Datei und gehe testen. Meine Seite FUNKTIONIERT !!! Woohoo! Es macht das, was ich will.

Damit bin ich jedoch nicht zufrieden. Ich habe überall gelesen, dass Sie Ihre Skripte immer mit der Methode in die Warteschlange stellen sollten, die ich versucht habe, aber die fehlgeschlagen ist.

Also ein paar abschließende Fragen, die ich hoffe, beantwortet zu werden:

  • Erstens, warum hat es nicht funktioniert, als ich versucht habe, mein Skript in die Warteschlange zu stellen, aber meine zweite Methode ausgeführt habe?

  • Zweitens ist die Sache jetzt ... das von mir geschriebene jQuery-Skript wird auf JEDER einzelnen Seite meiner Website eingefügt ... auf jedem Beitrag, jeder Seite usw. Ist das ein Problem? Gibt es eine Möglichkeit, es einfach in die EINE Seite aufzunehmen, auf der das Skript ausgeführt werden soll, damit es keine Auswirkungen auf andere Seiten hat?

  • Drittens, warum kann ich dieses Skript nicht in den "Text" -Reiter meines TinyMCE-Editors aufnehmen, den ich beim Schreiben einer Seite/eines Posts verwende? Ich habe versucht, <script>-Tags zu verwenden und mein winziges Skript dazwischen zu setzen, aber das scheint nicht zu funktionieren.
  • Viertens: Wenn ich mein Skript nicht nur für eine Seite ausführen kann und es in jeder einzelnen Seite enthalten sein muss, muss ich meine HTML-Elemente natürlich viel besser gezielt einsetzen. Offensichtlich verwende ich kein Skript, das mit $("button") auf jede Schaltfläche abzielt. Würde ich dann meiner Schaltfläche auf dieser bestimmten Seite eine eindeutige ID wie <button id="some-unique-id"> geben und sie dann über meine jQuery abzielen? Auf diese Weise funktioniert das Skript nur für diese Schaltfläche.

Ich entschuldige mich für die extrem langen Fragen zu Posts und Noobs ... Ich habe mich noch nie so sehr mit jQuery beschäftigt und versuche, mich ein wenig mit der Arbeit mit Wordpress zu beschäftigen, um meine eigenen benutzerdefinierten Skripte und Dinge einzubeziehen, die ich ausführen möchte .

Wenn jemand ein Feedback zu einer meiner Fragen hat, wäre er sehr dankbar. Vielen Dank!

3
JakeP

Ihre Frage ist etwas weit gefasst. Wir haben tatsächlich eine Frage pro Post-Richtlinie. Ich werde allerdings versuchen zu antworten

Meine erste Frage ist, sollten die meisten Themen, die Sie dort herunterladen, jQuery nicht automatisch in Ihren Header aufnehmen?

Im Grunde genommen richtig. So viele Funktionen in einem Theme benötigen heutzutage eine Abfrage, um richtig zu funktionieren. Ich bin nicht auf ein Thema gestoßen, das keine Suchanfragen verwendet. Und nur eine Anmerkung hier: Wenn in Ihrem Theme keine JQuery geladen ist, laden Sie die JQuery, die standardmäßig in WordPress enthalten ist. Sie ist bereits integriert, sodass Sie nur die Bibliothek in die Warteschlange stellen müssen. Es ist nicht ratsam, die jquery-Bibliothek von externen Quellen zu laden

(Nur ein Hinweis, Ihr Design sollte wp_head() in der Kopfzeile und wp_footer() in der Fußzeile haben, damit Ihre Skripte und Stile funktionieren, da wp_enqueue_scripts diese Hooks verwendet, um Ihre Skripte und Stile zu)

Sie können einfach jquery zu Ihrem Thema mit hinzufügen

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

Ich schaue die Seite in der Vorschau an, klicke auf die Schaltfläche ... nichts. Nichts passiert.

Erstens, warum hat es nicht funktioniert, als ich versucht habe, mein Skript in die Warteschlange zu stellen, aber meine zweite Methode ausgeführt habe?

In den meisten Online-Tutorials gibt es einen grundlegenden Fehler. Anfänger wissen dies möglicherweise nicht, aber der Parameter $scr (URL zum Skript) in wp_enqueue_script() , wp_register_script() , wp_enqueue_style() und wp_register_style() für das Kind Themen, übergeordnete Themen und Plugins sind unterschiedlich

  • übergeordnete Themen verwenden get_template_directory_uri()
  • untergeordnete Themen verwenden get_stylesheet_directory_uri()
  • und Plugins verwenden plugins_url()

Aus diesem Grund funktioniert Ihr Code nicht. Sie verwenden den übergeordneten Pfad in Ihrem untergeordneten Design. Sie sollten niemals Ihre zweite Methode anwenden. Ihre erste Methode ist die richtige Methode zum Laden von Skripten und Stilen

Zweitens ist die Sache jetzt ... das von mir geschriebene jQuery-Skript wird auf JEDER einzelnen Seite meiner Website eingefügt ... auf jedem Beitrag, jeder Seite usw. Ist das ein Problem? Gibt es eine Möglichkeit, es einfach in die EINE Seite aufzunehmen, auf der das Skript ausgeführt werden soll, damit es keine Auswirkungen auf andere Seiten hat?

Stile und Skripte können mit conditional tags bedingt geladen werden. Sie können sich diese in Ihrer eigenen Zeit ansehen, aber wenn Sie jquery nur auf der Homepage und nicht auf anderen Seiten laden müssen, werden Sie so etwas tun

function my_scripts_method() {
   if(is_home()){
        wp_enqueue_script( 'jquery' );
    }
}    
add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

Drittens, warum kann ich dieses Skript nicht in den "Text" -Reiter meines TinyMCE-Editors aufnehmen, den ich beim Schreiben einer Seite/eines Posts verwende? Ich habe versucht, Tags zu verwenden und mein kleines Skript dazwischen zu setzen, aber das scheint nicht zu funktionieren.

Sie sollten Skripte und Stile immer mit dem Aktions-Hook wp_enqueue_scripts laden, und Stile und Skripte sollten nach Bedarf bedingt geladen werden.

Viertens: Wenn ich mein Skript nicht nur für eine Seite ausführen kann und es in jeder einzelnen Seite enthalten sein muss, muss ich meine HTML-Elemente natürlich viel besser gezielt einsetzen. Offensichtlich verwende ich kein Skript, das mit $ ("button") auf jede Schaltfläche zielt. Würde ich dann meiner Schaltfläche auf dieser bestimmten Seite eine eindeutige ID geben, z. B. und sie dann über meine jQuery ausrichten? Auf diese Weise funktioniert das Skript nur für diese Schaltfläche.

Siehe Punkt Nummer zwei zur Erklärung

4
Pieter Goosen