Comment ajouter un simple script jQuery à WordPress?


122

J'ai lu le Codex et quelques articles de blog sur l'utilisation de jQuery dans WordPress, et c'est très frustrant. J'ai aussi loin que de charger jQuery dans un functions.phpfichier, mais tous les guides sont merdiques car ils supposent que vous avez déjà une tonne d'expérience WordPress. Par exemple, ils disent que maintenant que je charge jQuery via le functions.phpfichier, tout ce que j'ai à faire est de charger mon jQuery.

Comment faire exactement cela? À quels fichiers, en particulier, dois-je ajouter du code? Comment l'ajouter exactement pour une seule page WordPress?


3
Qu'avez-vous essayé qui vous fait penser que tous les guides sont merdiques?
undefined

1
Dans quel guide à quelle étape avez-vous rencontré quel problème?
pixelistik

Pouvez-vous être précis? Qu'est-ce que vous avez essayé et n'a pas fonctionné?
Ahmed Fouad

4
Je suis d'accord avec @ Citoyen c'est un champ de mines au début pour comprendre quoi faire avec wordpress car les instructions ne sont pas très complètes pour les débutants dans certains guides trouvés en ligne.
Harry

Réponses:


193

Je sais ce que vous voulez dire à propos des tutoriels. Voici comment je fais:

Vous devez d'abord rédiger votre script. Dans votre dossier de thème, créez un dossier appelé quelque chose comme «js». Créez un fichier dans ce dossier pour votre javascript. Par exemple, votre-script.js. Ajoutez votre script jQuery à ce fichier (vous n'avez pas besoin de <script>balises dans un fichier .js).

Voici un exemple de l'apparence de votre script jQuery (dans wp-content / themes / your-theme / js / your-scrript.js):

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

Notez que j'utilise jQuery et non $ au début de la fonction.

Ok, maintenant ouvrez le fichier functions.php de votre thème. Vous voudrez utiliser la wp_enqueue_script()fonction pour pouvoir ajouter votre script tout en indiquant à WordPress qu'il repose sur jQuery. Voici comment procéder:

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

En supposant que votre thème a wp_head et wp_footer aux bons endroits, cela devrait fonctionner. Faites-moi savoir si vous avez besoin de plus d'aide.

Les questions WordPress peuvent être posées sur WordPress Answers .


15
J'ai dû ajouter add_action ('wp_enqueue_scripts', 'add_my_script'); pour que cela se charge, mais c'est toujours la réponse la plus claire.
Ele Munjeli

dans quel fichier l'avez-vous ajouté? @EleMunjeli
Francisco Corrales Morales

10
Merci, Ele Munjeli, pour le conseil à add_action. AUSSI: si vous travaillez avec un thème enfant, utilisez plutôt get_stylesheet_directory_uri.
Screenack

Merci mec. vous enregistrez mon jour , vous Snipped fonctionne parfaitement pour moi
The EasyLearn Academy

Même après cela, je reçois encore Uncaught TypeError: Cannot read property 'fn' of undefinedet Uncaught TypeError: undefined is not a functionerreurs, même si un autre script est mis en attente dans le fichier de fonctions, et qui fonctionne très bien
Lee

44

Après de nombreuses recherches, j'ai finalement trouvé quelque chose qui fonctionne avec le dernier WordPress. Voici les étapes à suivre:

  1. Trouvez le répertoire de votre thème, créez un dossier dans le répertoire pour vos js personnalisés ( custom_js dans cet exemple ).
  2. Placez votre jQuery personnalisé dans un fichier .js dans ce répertoire ( jquery_test.js dans cet exemple ).
  3. Assurez-vous que votre jQuery .js personnalisé ressemble à ceci:

    (function($) {
    $(document).ready(function() {
    $('.your-class').addClass('do-my-bidding');
    })
    })(jQuery);
  4. Allez dans le répertoire du thème, ouvrez functions.php

  5. Ajoutez du code près du haut qui ressemble à ceci:

    //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. Vérifiez votre site pour vous assurer qu'il fonctionne!

8
Merci, cela m'a beaucoup aidé !. Pour toute personne travaillant avec un thème enfant, utilisez get_stylesheet_directory_uri () à la place de get_template_directory_uri ()
David Taiaroa

Merci pour cette explication étape par étape, Stan! (et la note sur l'utilisation de ceci avec des thèmes enfants, @DavidTaiaroa)
marky

Cela fonctionne à merveille mais je n'en ai besoin que pour tirer sur une page spécifique. Existe-t-il un moyen de modifier cela pour qu'il ne se déclenche que sur la page? Ou est-ce une fonction WP entièrement différente nécessaire pour ce comportement?
HPWD

Quand faire cela, je peux obtenir jquery dans ma page mais j'obtiens également une erreur dans la console qui ne semble pas causer de problèmes sérieux: GET australiana.auspro.com.au/wp-content/themes/twentytwenty/assets/… net :: ERR_ABORTED 404 (Not Found) Comment puis-je m'en débarrasser?
Rez.Net

8

Si vous utilisez le thème enfant wordpress pour ajouter des scripts à votre thème, vous devez changer la fonction get_template_directory_uri en get_stylesheet_directory_uri, par exemple:

Thème parent:

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

Thème enfant:

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: / votre-site / wp-content / themes / thème-parent

get_stylesheet_directory_uri: / votre-site / wp-content / themes / thème-enfant


6

Vous pouvez ajouter jQuery ou javascript dans le fichier function.php du thème. Le code est comme ci-dessous:

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

Pour plus de détails, visitez ce tutoriel: http://www.codecanal.com/add-simple-jquery-script-wordpress/


4

En plus de mettre le script dans les fonctions, vous pouvez "simplement" inclure un lien (une balise link rel) dans l'en-tête, le pied de page, dans n'importe quel modèle, où que ce soit. Vous devez simplement vous assurer que le chemin est correct. Je suggère d'utiliser quelque chose comme ça (en supposant que vous êtes dans le répertoire de votre thème).

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

Une bonne pratique consiste à l'inclure juste avant la balise de fermeture du corps ou au moins juste avant votre pied de page. Vous pouvez également utiliser php includes, ou plusieurs autres méthodes pour extraire ce fichier.

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

C'est tout autour de la mauvaise pratique en 2019.
Phill Healey

D'accord, mais cela a été écrit il y a 5 ans. La mise en file d'attente et ce qui ne l'est pas, bien sûr, est la meilleure pratique.
josh.chavanne

1
Il vaut la peine de le souligner, car cet article apparaît bien en évidence sur Google. Je détesterais que quelqu'un vienne ici et commence à utiliser de mauvaises pratiques parce qu'il est tombé sur un vieux questions et réponses.
Phill Healey

3

** # Méthode 1: ** Essayez de mettre votre code jquery dans un fichier js séparé.

Enregistrez maintenant ce script dans le fichier 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' );

Maintenant vous avez terminé.

L'enregistrement de script dans les fonctions présente des avantages car il vient dans la <head>section lorsque la page se charge, il fait donc toujours partie de header.php. Vous n'avez donc pas à répéter votre code à chaque fois que vous écrivez un nouveau contenu html.

#Method 2: placez le code du script dans le corps de la page sous <script>tag. Ensuite, vous n'avez pas à l'enregistrer dans les fonctions.


La méthode 2 joue avec le feu.
John Hascall


3

Il existe de nombreux tutoriels et réponses ici pour savoir comment ajouter votre script à inclure dans la page. Mais ce que je n'ai pas trouvé, c'est comment structurer ce code pour qu'il fonctionne correctement. Cela est dû au fait que $ n'est pas utilisé dans cette forme de JQuery.

Voici donc mon code et vous pouvez l'utiliser comme modèle.

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

Réponse d'ici: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Malgré le fait que WordPress existe depuis un certain temps et que la méthode d'ajout de scripts aux thèmes et aux plugins est la même depuis des années, il existe encore une certaine confusion quant à la manière exacte dont vous êtes censé ajouter des scripts. Alors clarifions les choses.

Étant donné que jQuery est toujours le framework Javascript le plus couramment utilisé, voyons comment vous pouvez ajouter un script simple à votre thème ou plugin.

Mode de compatibilité de jQuery

Avant de commencer à attacher des scripts à WordPress, examinons le mode de compatibilité de jQuery. WordPress est livré pré-emballé avec une copie de jQuery, que vous devez utiliser avec votre code. Lorsque jQuery de WordPress est chargé, il utilise le mode de compatibilité, qui est un mécanisme pour éviter les conflits avec d'autres bibliothèques de langues.

Cela revient à dire que vous ne pouvez pas utiliser le signe dollar directement comme vous le feriez dans d'autres projets. Lorsque vous écrivez jQuery pour WordPress, vous devez utiliser jQuery à la place. Jetez un œil au code ci-dessous pour voir ce que je veux dire:


2

Les solutions que j'ai vues sont du point de vue de l'ajout de fonctionnalités javascript à un thème. Cependant, le PO a demandé, spécifiquement, "Comment puis-je l'ajouter exactement pour un seul page WordPress?" Cela semble être la façon dont j'utilise javascript dans mon blog Wordpress, où les articles individuels peuvent avoir différents "widgets" alimentés par JavaScript. Par exemple, une publication peut permettre à l'utilisateur de modifier les variables (curseurs, cases à cocher, champs de saisie de texte) et de tracer ou de répertorier les résultats.

À partir de la perspective JavaScript:

  1. Écrivez vos fonctions JavaScript dans un fichier «.js» séparé

Ne pensez même pas à inclure du JavaScript significatif dans le code html de votre message: créez un ou plusieurs fichiers JavaScript avec votre code.

  1. Interfacez votre JavaScript avec le code HTML de votre article

Si votre widget JavaScript interagit avec des contrôles et des champs html, vous devrez comprendre comment interroger et définir ces éléments à partir de JavaScript, et également comment laisser les éléments de l'interface utilisateur appeler vos fonctions JavaScript. Voici quelques exemples; d'abord, à partir de JavaScript:

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

Et depuis html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. Utilisez jQuery pour appeler la fonction d'initialisation de votre widget JavaScript

Ajoutez ceci à votre fichier .js, en utilisant le nom de votre fonction qui configure et dessine votre widget JavaScript lorsque la page est prête pour cela:

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. Dans le code html de votre article, chargez les scripts nécessaires à votre article

Dans l'éditeur de code Wordpress, je spécifie généralement les scripts à la fin de l'article. Par exemple, j'ai un dossier de scripts dans mon répertoire principal. À l'intérieur, j'ai un répertoire d'utilitaires avec JavaScript commun que certains de mes messages peuvent partager - dans ce cas, une partie de ma propre fonction utilitaire mathématique et la bibliothèque de traçage flotr2. Je trouve plus pratique de regrouper le JavaScript spécifique à la publication dans un autre répertoire, avec des sous-répertoires basés sur la date au lieu d'utiliser le gestionnaire de médias, par exemple.

<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. Mettre jQuery en file d'attente

Wordpress enregistre jQuery, mais il n'est disponible que si vous dites à Wordpress que vous en avez besoin, en le mettant en file d'attente. Sinon, la commande jQuery échouera. De nombreuses sources vous indiquent comment ajouter cette commande à votre functions.php, mais supposent que vous connaissez d'autres détails importants.

Tout d'abord, c'est une mauvaise idée de modifier un thème - toute mise à jour future du thème effacera vos modifications. Créez un thème enfant. Voici comment:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

Le fichier functions.php de l'enfant ne remplace pas le fichier du thème parent du même nom, il y ajoute. Le didacticiel sur les thèmes enfants suggère comment mettre en file d'attente le fichier style.css parent et enfant. Nous pouvons simplement ajouter une autre ligne à cette fonction pour également mettre en file d'attente jQuery. Voici mon fichier functions.php complet pour le thème enfant:

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

Une autre alternative consiste à utiliser un plugin de gestion javascript. Cela peut être un bon moyen pour certains, mais je préfère ne pas dépendre de nombreux plugins et mises à jour.
Nigel Redmon

1

Vous pouvez utiliser la fonction prédéfinie de WordPress pour ajouter un fichier de script au plugin WordPress.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Regardez l' article qui vous aide à comprendre avec quelle facilité vous pouvez implémenter jQuery et CSS dans le plugin WordPress.


1

En plus de mettre le script dans les fonctions, vous pouvez "simplement" inclure un lien (une balise link rel) dans l'en-tête, le pied de page, dans n'importe quel modèle, où que ce soit.

Non. Vous ne devez jamais simplement ajouter un lien vers un script externe comme celui-ci dans WordPress. Les mettre en file d'attente via le fichier functions.php garantit que les scripts sont chargés dans le bon ordre.

Si vous ne les mettez pas en file d'attente, votre script risque de ne pas fonctionner, bien qu'il soit correctement écrit.


1

vous pouvez écrire votre script dans un autre fichier et mettre votre fichier en file d'attente comme ceci en supposant que votre nom de script soit image-ticker.js.

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

à la place de /js/image-ticker.jsvous devez mettre votre chemin de fichier js.


1

Dans WordPress, la bonne façon d'inclure les scripts dans votre site Web consiste à utiliser les fonctions suivantes.

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

Ces fonctions sont appelées à l'intérieur du hook wp_enqueue_script.

Pour plus de détails et d'exemples, vous pouvez vérifier Ajouter des fichiers JS dans Wordpress en utilisant wp_register_script & wp_enqueue_script

Exemple:

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

"Nous avons Google" cit. Pour utiliser correctement le script dans wordpress, ajoutez simplement des bibliothèques hébergées. Comme Google

Après avoir sélectionné la bibliothèque dont vous avez besoin, liez-la avant votre script personnalisé: exmpl

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

et après votre propre script

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

0

Avez-vous seulement besoin de charger jquery?

1) Comme le disent les autres guides, enregistrez votre script dans votre fichier functions.php comme ceci:

// 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) Notez que nous n'avons pas besoin d'enregistrer jQuery car il est déjà dans le noyau. Assurez-vous que wp_footer () est appelé dans votre footer.php et que wp_head () est appelé dans votre header.php (c'est là qu'il affichera la balise de script), et jQuery se chargera sur chaque page. Lorsque vous mettez jQuery en file d'attente avec WordPress, il sera en mode "sans conflit", vous devez donc utiliser jQuery au lieu de $. Vous pouvez désenregistrer jQuery si vous le souhaitez et réenregistrer le vôtre en faisant wp_deregister_script ('jquery').


Non, j'ai compris cette partie. Le chargement de jquery est facile. Ce que j'ai besoin de savoir, c'est dans quel fichier ajouter mon code jquery et comment.
Citoyen le

Mettez wp_enqueue_script ('nom du script'); avant le get_header () du modèle sous lequel vous voulez que ce script soit mis en file d'attente.
Eli Cole

0
function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.