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

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 .

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!

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

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/

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>

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

Vous pouvez ajouter du 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 jquery noconflict

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

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:

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.

2. 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);'/>

3. 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();
});

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

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

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.

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.

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.

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

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

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

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');