Comment puis-je ajouter un script jQuery simple à 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 jusqu'à charger jQuery dans le fichier functions.php, 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 à travers le fichier functions.php, Tout ce que j'ai à faire est de charger mon jQuery.

Comment dois-je faire exactement cela? À quels fichiers, plus précisément, dois-je ajouter du code? Comment exactement puis-je l'Ajouter pour un une seule page WordPress?

105
demandé sur brasofilo 2012-06-22 19:58:32

14 réponses

Je sais ce que vous voulez dire sur les tutoriels. Voici comment je le fais:

Vous devez d'abord écrire votre script. Dans votre dossier de thème, créez un dossier appelé quelque chose comme 'js'. Créer 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 la façon dont votre script jQuery (dans wp-content / themes / your-theme / js / your-script.js) pourrait regarder:

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

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

Ok, ouvrez maintenant les fonctions de votre thème.fichier php. Vous voudrez utiliser la fonction wp_enqueue_script() afin que vous puissiez ajouter votre script tout en disant à 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 a wp_head et wp_footer aux bons endroits, cela devrait fonctionner. Laissez-moi savoir si vous avez besoin de plus d'aide.

Les questions WordPress peuvent être posées sur réponses WordPress .

161
répondu kdev 2017-04-13 12:37:31

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!
41
répondu Stan 2014-02-27 01:37:10

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

5
répondu DibaCode 2015-02-24 09:57:48

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>
4
répondu josh.chavanne 2014-02-27 01:45:52

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/

4
répondu Jitendra Damor 2017-09-18 12:31:59

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

3
répondu sameeuor 2015-05-12 10:46:16

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);
  });
});
3
répondu Rob 2017-01-19 20:23:32

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

2
répondu Rajan471 2014-07-29 19:35:04

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:

2
répondu Ahmed Elcheikh 2018-04-17 13:44:36

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.

1
répondu user64745 2014-05-02 07:54:05

" 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>
1
répondu Vlad 2016-01-15 11:48:46

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.

1
répondu Kenneth Odle 2016-02-13 18:38:34

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

1
répondu upendra tiwari 2016-03-30 07:23:23

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

0
répondu Eli Cole 2012-06-22 17:01:17