web-dev-qa-db-fra.com

Comment faire pour qu'un script jQuery s'exécute sur une page?

J'ai de la difficulté à comprendre comment obtenir un script jQuery pour qu'il s'exécute sur une page Wordpress de la manière "correcte".

J'ai suivi cet article et mis en œuvre ce que la première réponse dit de faire.

J'ai lu de nombreux tutoriels et articles sur la façon de faire fonctionner jQuery sur votre blog, mais je n'arrive pas à comprendre.

J'ai un certain nombre de questions que j'espère recevoir de la part de personnes qui en ont eu l'expérience.

Tout d'abord, la plupart des tutoriels et des choses que j'ai lues expliquent comment obtenir jQueryinclussur votre blog. Ma première question est la suivante: la plupart des thèmes que vous téléchargez ne devraient-ils pas inclure automatiquement jQuery dans votre en-tête de toute façon? Par exemple, mon site a ces lignes automatiquement incluses dans chaque page dès le départ:

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

Donc, jQuery est inclus, je n'ai pas besoin de m'inquiéter pour ça ...

OK, il est inclus, il me faut maintenant comprendre comment obtenir un exemple de page ou de publication pour exécuter un script jQuery.

Je suis les instructions sur la page que j'ai énumérée ci-dessus ...

Je vais d’abord dans le fond de mon site, puis dans mon dossier Thèmes d’enfant et crée un nouveau fichier appelé "jquery-script.js".

Dans ce document, j'écris le code suivant et enregistre le fichier:

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

D'accord ... J'ai mon fichier de script jQuery sur le back-end. Maintenant, je dois référencer ou mettre en file d'attente ce script. Selon l'article, il est préférable de mettre le script en file d'attente. Je suis donc les instructions et ajoute une nouvelle fonction PHP dans le fichier "functions.php" de mon thème enfant. Dans ce fichier, j'ajoute ce qui suit:

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

Donc, c'est fait. Je crois que cela devrait fonctionner. Donc, je vais créer une "page de test" sur mon site (non publié ou quoi que ce soit). Je crée les divs, les boutons et tout ce dont j'ai besoin pour que mon script fonctionne comme je le souhaite:

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

Je prévisualise la page, clique sur le bouton .... rien. Rien ne se passe.

D'accord ... j'ai peut-être besoin d'en faire un peu plus dans mon fichier functions.php. Donc, je retourne là-bas et lis à la page que je suis que vous devez peut-être ajouter une ligne pour que cela fonctionne. J'ajoute donc la ligne suivante après ma fonction:

add_action('wp_enqueue_scripts', 'add_jquery_script');

Je sauvegarde le fichier. Je suis surexcité. Cela devrait marcher. Je vais tester ma page ... plus rien du tout. Rien ne se passe quand je clique sur le bouton. Hmm ...

Alors maintenant, je vais faire quelque chose de totalement différent dans mon fichier functions.php. Quelque chose que j'ai déjà fait par le passé pour faire fonctionner certains scripts ... je supprime donc complètement la fonction et l'appel "add_action" et implémente ce qui suit dans mon fichier functions.php:

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

Je sauvegarde ensuite le fichier et vais le tester. Ma page fonctionne !!! Woohoo! Il fait ce que je veux qu'il fasse.

Cependant, je ne suis pas satisfait de cela. J'ai lu partout que vous devriez toujours mettre en file d'attente vos scripts en utilisant la méthode que j'ai essayé d'utiliser mais qui a échoué.

Donc, quelques questions finales auxquelles j'espère avoir une réponse:

  • Premièrement, pourquoi cela n’a-t-il pas fonctionné lorsque j’ai essayé de mettre mon script en file d’attente mais que j’ai travaillé avec ma deuxième méthode?

  • Deuxièmement, la chose est maintenant ... le script jQuery que j'ai écrit est inclus sur CHAQUE page de mon site ... chaque publication, page, etc. Est-ce un problème ?? Existe-t-il un moyen de l'inclure simplement dans la SEULE page? Je veux que le script soit exécuté de manière à ne pas affecter les autres pages?

  • Troisièmement, pourquoi ne puis-je pas inclure ce script dans l'onglet "texte" de l'éditeur TinyMCE que j'utilise pour rédiger une page/une publication? J'ai essayé d'utiliser les balises <script> et de placer mon petit script entre celles-ci, mais cela ne semble pas fonctionner.
  • Quatrièmement, si je ne parviens pas à faire exécuter mon script sur une seule page et que celui-ci doive être inclus dans chaque page, il est évident que je devrai cibler beaucoup mieux mes éléments HTML. Évidemment, je n'utiliserai pas de script qui cible tous les boutons en utilisant $("button"). Par conséquent, pourrais-je simplement donner à mon bouton sur cette page un ID unique, tel que <button id="some-unique-id">, puis le cibler via jQuery? De cette façon, le script ne fonctionnera que pour ce bouton.

Désolé pour le très long post et les questions de noob ... Je n'ai jamais tellement bousillé jQuery et j'essaie de comprendre ce que je dois faire pour travailler avec Wordpress afin d'inclure mes propres scripts personnalisés et les éléments que je souhaite exécuter. .

Si quelqu'un a des commentaires sur l'une de mes questions, il serait grandement apprécié. Merci beaucoup!

3
JakeP

Votre question est un peu large. Nous avons en fait une politique une question par poste. Je vais essayer de répondre si

Ma première question est la suivante: la plupart des thèmes que vous téléchargez ne devraient-ils pas inclure automatiquement jQuery dans votre en-tête de toute façon?

Eh bien, fondamentalement correct. De nombreuses fonctionnalités actuelles dans un thème ont besoin de jquery pour fonctionner correctement. Je n'ai pas rencontré de thème qui n'utilise pas jquery. Et juste une remarque ici, si votre thème n’a pas chargé jquery, chargez le jquery fourni par défaut avec wordpress, il est déjà intégré, il vous suffit donc de mettre en file d'attente la bibliothèque. Il est déconseillé de charger la bibliothèque jquery à partir de sources extérieures

(Juste un point de note, votre thème devrait avoir wp_head() dans l'en-tête et wp_footer() dans le pied de page pour que vos scripts et styles fonctionnent, car wp_enqueue_scripts utilise ces crochets pour y accrocher vos scripts et styles)

Vous pouvez simplement ajouter jquery à votre thème avec

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

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

Je prévisualise la page, clique sur le bouton .... rien. Rien ne se passe.

Premièrement, pourquoi cela n’a-t-il pas fonctionné lorsque j’ai essayé de mettre mon script en file d’attente mais que j’ai travaillé avec ma deuxième méthode?

Il y a une faille fondamentale dans la plupart des tutoriels en ligne. Les débutants ne le savent peut-être pas, mais le paramètre $scr (URL du script) dans wp_enqueue_script() , wp_register_script() , wp_enqueue_style() et wp_register_style() pour les thèmes enfants, les thèmes parents et les plugins est différent

  • les thèmes parents utilisent get_template_directory_uri()
  • thèmes enfants utilise get_stylesheet_directory_uri()
  • et les plugins utilisent plugins_url()

C'est pourquoi votre code ne fonctionne pas, vous utilisez le chemin d'accès parent dans votre thème enfant. Vous ne devriez jamais utiliser votre deuxième méthode. Votre première méthode est la bonne méthode de chargement des scripts et des styles

Deuxièmement, la chose est maintenant ... le script jQuery que j'ai écrit est inclus sur CHAQUE page de mon site ... chaque publication, page, etc. Est-ce un problème ?? Existe-t-il un moyen de l'inclure simplement dans la SEULE page? Je veux que le script soit exécuté de manière à ne pas affecter les autres pages?

Les styles et les scripts peuvent être chargés de manière conditionnelle à l’aide de balises conditionnelles . Vous pouvez y jeter un coup d'œil quand vous le souhaitez, mais si vous devez charger jquery uniquement sur la page d'accueil et non sur d'autres pages, vous ferez quelque chose comme ceci.

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

Troisièmement, pourquoi ne puis-je pas inclure ce script dans l'onglet "texte" de l'éditeur TinyMCE que j'utilise pour rédiger une page/une publication? J'ai essayé d'utiliser des balises et de placer mon petit script entre celles-ci, mais cela ne semble pas fonctionner.

Vous devez toujours charger les scripts et les styles à l'aide du crochet wp_enqueue_scripts action. Les styles et les scripts doivent être chargés de manière conditionnelle, si nécessaire.

Quatrièmement, si je ne parviens pas à faire exécuter mon script sur une seule page et que celui-ci doive être inclus dans chaque page, il est évident que je devrai cibler beaucoup mieux mes éléments HTML. Évidemment, je ne vais pas utiliser un script qui cible chaque bouton en utilisant $ ("bouton"), alors je donnerais simplement à mon bouton sur cette page un identifiant unique tel que, puis je le ciblerais via jQuery? De cette façon, le script ne fonctionnera que pour ce bouton.

Voir le point numéro deux pour l'explication

4
Pieter Goosen