Comment puis-je ajouter un script jQuery simple à WordPress?

Après beaucoup de recherches, je enfin 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 votre js personnalisé ( custom_js dans cet exemple ).
2. Mettez votre jQuery personnalisé dans un .fichier js dans 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. Aller au thème répertoire, ouvrez les fonctions .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érifier votre site pour vous assurer qu'il fonctionne!

Si vous utilisez wordpress thème enfant pour ajouter des scripts à votre thème, vous devez changer la fonction get_template_directory_uri pour 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/parent-thème

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

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 avez juste besoin de 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 ce droit avant la balise de corps de fermeture ou au moins juste avant votre pied de page. Vous pouvez également utiliser PHP includes, ou plusieurs autres méthodes pour tirer ceci fichier en.

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

Vous pouvez ajouter jQuery ou javascript dans la fonction du thème.fichier php. 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/

Vous pouvez ajouter Javascript ou jQuery personnalisé en utilisant ce plugin.
https://wordpress.org/plugins/custom-javascript-editor/

Lorsque vous utilisez jQuery, n'oubliez pas d'utiliser le mode jQuery noconflict

Il y a beaucoup de tutoriels et de réponses ici comment 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é sous cette forme de JQuery.

Voici Donc mon code et vous pouvez l'utiliser comme un 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);
  });
});

* * # Method 1: * * Essayez de placer votre code jquery dans un fichier JS séparé.

Enregistrez maintenant ce script dans functions.fichier 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 du script dans les fonctions a des avantages car il vient dans la section <head> lorsque la page se charge, il fait donc partie de l'en-tête.php toujours. Vous n'avez donc pas besoin de répéter votre code chaque fois que vous écrivez un nouveau contenu html.

#Méthode 2: placez le code de script dans le corps de la page sous la balise <script>. Alors vous n'avez pas l'enregistrer dans les fonctions.

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

Malgré le fait que WordPress existe depuis un moment, et que la méthode d'ajout de scripts aux thèmes et plugins est la même depuis des années,il y a encore une certaine confusion autour de la façon dont vous êtes censé ajouter des scripts. Donc, soyons clair.

Puisque jQuery est toujours le framework Javascript le plus couramment utilisé, regardons comment vous pouvez ajouter un script simple à votre thème ou plugin.

Mode de compatibilité de JQuery

Avant de commencer à attacher des scripts à WordPress, regardons 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.

Ce que cela signifie, c'est 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 oeil au code ci-dessous pour voir ce que je veux dire:

Vous pouvez utiliser la fonction prédéfinie 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 que vous pouvez facilement implémenter jQuery et CSS dans le plugin WordPress.

" nous avons Google " cit. Pour utiliser correctement le script à l'intérieur de wordpress, il suffit d'ajouter des bibliothèques hébergées. Comme Google

Après la bibliothèque sélectionnée 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>

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 devriez jamais simplement ajouter un lien vers un script externe comme celui-ci dans WordPress. Replacement, à travers les fonctions.le fichier php garantit que les scripts sont chargés dans le bon ordre.

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

, 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 mettre votre chemin de fichier js.

Avez-vous seulement besoin de charger jquery?

1) comme le disent les autres guides, enregistrez votre script dans vos fonctions.fichier 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 pied de page.php et wp_head () est appelé dans votre en-tête.php (c'est là qu'il affichera la balise de script), et jQuery se chargera sur chaque page. Lorsque vous mettez en file d'attente jQuery avec WordPress, il sera en mode "sans conflit", donc vous 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').