web-dev-qa-db-fra.com

Comment ajouter un simple script jQuery à WordPress?

J'ai lu le Codex et quelques articles de blog sur l'utilisation de jQuery dans WordPress, et c'est très frustrant. Je suis aussi loin que de charger jQuery dans le fichier functions.php, mais tous les guides sont nuls parce qu'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 fichier functions.php, il ne me reste plus qu'à charger mon jQuery.

Comment je fais exactement ça? À quels fichiers dois-je ajouter du code? Comment puis-je l'ajouter exactement pour une seule page WordPress?

jquerywordpress
108
Citizen

Je sais ce que vous entendez par les tutoriels. Voici comment je le fais:

Vous devez d’abord écrire votre script. Dans votre dossier de thèmes, créez un dossier appelé "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 balises <script> dans un fichier .js).

Voici un exemple de votre script jQuery (dans wp-content/themes/votre-thème/js/votre-scrript.js):

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

Notez que jQuery est utilisé et non pas $ au début de la fonction.

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

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 ait wp_head et wp_footer aux bons endroits, cela devrait fonctionner. Faites-moi savoir si vous avez besoin de plus d'aide.

Des questions sur WordPress peuvent être posées à WordPress Answers .

165
kdev

Après de longues recherches, j'ai _ {enfin} trouvé quelque chose qui fonctionne avec le dernier WordPress. Voici les étapes à suivre:

  1. Recherchez le répertoire de votre thème, créez-en un dans le répertoire de votre js personnalisé (custom_js dans cet exemple).
  2. Placez votre jQuery personnalisé dans un fichier .js de ce répertoire (jquery_test.js dans cet exemple} _).

  3. Assurez-vous que votre jQuery personnalisé .js 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 sommet 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. Consultez votre site pour vous assurer qu'il fonctionne!
41
Stan

Si vous utilisez wordpress child theme pour ajouter des scripts à votre thème, vous devez remplacer la fonction get_template_directory_uri par 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 de l'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/parent-theme

get_stylesheet_directory_uri:/votre-site/wp-content/themes/child-theme

6
DibaCode

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

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

En plus de mettre le script dans des fonctions, vous pouvez "simplement" inclure un lien (une balise rel rel) dans l'en-tête, le pied de page, dans n'importe quel modèle, où que ce soit. Vous devez juste vous assurer que le chemin est correct. Je suggère d'utiliser quelque chose comme ceci (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 à inclure cela 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>
4
josh.chavanne

Vous pouvez ajouter un code javascript ou jquery personnalisé à l’aide de ce plugin.
https://wordpress.org/plugins/custom-javascript-editor/

Lorsque vous utilisez jQuery, n'oubliez pas d’utiliser le mode jonqueur non conflictuel

3
sameeuor

Il y a beaucoup de tutoriels et de réponses ici pour ajouter votre script à inclure dans la page. Mais ce que je n'ai pas pu trouver, 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.

Donc, voici 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
Rob

** # Méthode 1: ** Essayez de placer 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 fini.

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

#Method 2: place le code de script dans le corps de la page sous la balise <script>. Ensuite, vous ne devez pas l'enregistrer dans les fonctions.

2
Rajan471

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

Bien que WordPress existe depuis un certain temps et que la méthode d’ajout de scripts aux thèmes et aux plug-ins soit la même depuis des années, il existe toujours une certaine confusion quant à la manière dont vous êtes censé ajouter des scripts. Alors mettons les choses au clair.

JQuery étant toujours le framework Javascript le plus utilisé, voyons comment ajouter un script simple à votre thème ou à votre plugin.

mode de compatibilité de jQuery

Avant de commencer à attacher des scripts à WordPress, voyons le mode de compatibilité de jQuery. WordPress est livré avec une copie de jQuery, que vous devez utiliser avec votre code. Lorsque jQuery est chargé dans WordPress, il utilise le mode de compatibilité, mécanisme permettant d’éviter les conflits avec les autres bibliothèques de langues.

Cela revient à dire que vous ne pouvez pas utiliser le signe dollar directement comme dans d’autres projets. Lorsque vous écrivez jQuery pour WordPress, vous devez plutôt utiliser jQuery. Regardez le code ci-dessous pour voir ce que je veux dire:

2
Ahmed Elcheikh

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

Non, vous ne devriez 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, même s'il est écrit correctement.

1
Kenneth Odle

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 le post qui vous aide à comprendre à quel point vous pouvez facilement implémenter jQuery et CSS dans le plugin WordPress.

1
user64745

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

Après avoir sélectionné la bibliothèque dont vous avez besoin, associez-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>
1
Vlad

vous pouvez écrire votre script dans un autre fichier. Et mettre en file d'attente votre fichier comme ceci supposons 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.js, vous devez indiquer le chemin de votre fichier js.

1
upendra tiwari

Dans WordPress, la manière correcte d’inclure les scripts sur 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 avec 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
Aman Dhanda

Avez-vous seulement besoin de charger jquery?

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

// 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 ici qu’il va afficher la balise script) et que jQuery se chargera sur chaque page. Lorsque vous mettez en file d'attente jQuery avec WordPress, il sera en mode "aucun conflit", vous devez donc utiliser jQuery au lieu de $. Vous pouvez annuler l'enregistrement de jQuery si vous le souhaitez et ré-enregistrer le vôtre en effectuant wp_deregister_script ('jquery').

0
Eli Cole