Importer jQuery dans WordPress (ou dans votre site fait à la main)

Importer jQuery dans WordPress (ou dans votre site fait à la main)

Vous avez déjà entendu parler de jQuery. Cette librairie JavaScript vous permet d’animer vos pages en quelques lignes de codes (et même si vous n’y connaissez rien du tout).

Seulement voilà, elle ne vient pas avec tous les CMS ni avec tous les thèmes WordPress. Si vous avez créé votre site à la main, alors vous avez encore plus besoin de savoir comment l’importer!

Pas de panique, ce n’est vraiment pas compliqué!

Pour les exemples suivants, je vais supposer que vous avez placé la librairie jQuery dans un dossier « js » placé à la racine du site. Le fichier de jQuery s’appelle dans mon exemple « jquery.js ».

Pour ceux qui ont créé leur site en HTML-CSS (sans CMS)

Rajoutez simplement cette ligne HTML dans entre les balises et .

<script src="chemin-vers-la-librairie-jquery" type="text/javascript"></script>

Pour ceux qui travaillent avec un CMS: importer jquery dans WordPress

Vous pourriez croire qu’il vous suffit d’éditer le fichier header.php et d’y coller le code HTML ci-dessus. Et bien non.

WordPress est un peu plus subtil. Il met à notre disposition une fonction qui va générer le code ci-dessus.

Utiliser une fonction pour générer un code ? A quoi bon ?

Pourquoi ne pas directement écrire le code HTML ?

Tout simplement pour respecter un système de hiérarchie entre le thème, les plugins et le code natif de WordPress. Vous éviterez ainsi les conflits.

Attention: certains thèmes travaillent déjà avec jQuery. Pour le savoir, cherchez dans votre code source la présence d’une balise « script » pointant vers un fichier jQuery.

Vous ne l’avez pas trouvé ?

Alors, rajoutez ce code dans le fichier functions.php de votre thème:

function my_custom_jquery() {
	wp_enqueue_script(
		'jQuery',
		get_template_directory_uri() . '/js/jquery.js'
	);
}
add_action('wp_enqueue_scripts', 'my_custom_jquery');

Conclusion

Vous remarquerez que la procédure pour utiliser jquery dans WordPress est un peu plus complexe. Et c’est bien logique, il s’agit d’un outil puissant, la manipulation de son code est donc plus complexe, notamment parce qu’elle requiert de s’intéresser à PHP.

Partagez vos réactions dans les commentaires!

astuces, débutant, développeur, JavaScript, jsquery wordpress, librairie jquery

A propos de MarieEve Louvel

Depuis 3 ans, je partage mes connaissances sur ce blog, pour les entrepreneurs désireux de créer leur site vitrine et/ou leur blog professionnel avec WordPress. Mon expérience professionnelle va de l'accompagnement à la formation, en passant par de la création de site ou de logiciel. Retrouvez mes cours en ligne sur mon site FeelWeb Formation [http://feelwebformation.com]

12 commentaires

  1. Bonjour Marie-Eve,

    Là tu commences la semaine en beauté, du coup moi aussi.
    Je serais plus attentif à l’avenir,
    merci pour la vulgarisation de cette librairie Java Script.

    Répondre
    • Merci Olivier. Et j’ai utilisé la « méthode des 7 » pour avoir une petite ribambelle d’articles reliés. Je les posterais au gré de mon envie (ce n’est pas une suite). Bientôt tu sauras tout pour manipuler cette librairie en deux coups de cuillères à pot.

      Répondre
  2. Arf, pour être complet sur jQuery et WP :
    On vire la version de base dans WP, on utilise celle dans GG, et on réengistre le tout

    soit quelque chose de ce goût là :

    function my_scripts_method() {
    wp_deregister_script( ‘jquery’ );
    wp_register_script( ‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’);
    wp_enqueue_script( ‘jquery’ );
    }

    repiqué sur le codex > http://codex.wordpress.org/Function_Reference/wp_enqueue_script

    add_action(‘wp_enqueue_scripts’, ‘my_scripts_method’);

    Répondre
  3. Bonjour et merci pour ce super site.
    Je créer le site de ma copine avec du wordpress et je désire afficher une image ou quand on clic dessus un texte apparaît en dessous de celle ci.
    J’ai tester plusieurs plug ni mais c’est trop limité.
    Un ami m’a conseiller jquery, j’ai insérer le code pour l’installation de jquery dans le fichier fonctions.php mais je ne sais pas comment ça fonctionne.
    Quelqu’un pourrait il me donner un petit coup de main ?

    Merci d’avance

    Steeve

    Répondre
    • Bonjour,

      En effet, jquery est le langage dont vous avez besoin. Mais vous expliquer comment faire dans les commentaires…ça n’est pas très approprié. Le code JS doit être créé à partir de votre code HTML. Je vous conseille de suivre un tuto fait de A à Z pour votre problème, ou de demander sur un forum (alsacréations par exemple).

      Bon courage!

      Répondre
  4. Bonjour,

    J’ai bien lu votre article mais j’ai quand même besoin d’un coup de main, si possible bien sur.
    Je souhaite intégré un jquery, celui là => http://tympanus.net/codrops/2012/12/31/how-to-create-a-simple-multi-item-slider/ (bien sur je l’ai modifié par rapport à mes besoins) mais maintenant je souhaiterais l’intégré dans wordpress.
    Le souci c’est que je ne sais pas où mettre tout le code html!!!!

    Je souhaite qu’il apparaisse sur une page en particulier.
    Dois je l’intégrer en allant sur la page en question puis copier et coller dans le champ où il nous est permis de codé?

    Merci en tout cas pour toutes tes astuces.

    Répondre
    • Bonjour Vanessa,

      Pour utiliser un plugin, vous avez besoin de 3 fichers:

      (1) Un fichier JavaScript contenant la librairie jQuery
      (2) Un fichier JavaScript contenant le plugin
      (3) Un fichier JavaScript contenant l’appel au plugin

      Je l’explique plus en détails ici : http://lesdoigtsdanslenet.com/trouver-et-utiliser-un-plugin-jquery-sur-votre-site-web/

      L’article « Importer jQuery dans WordPress (ou dans votre site fait à la main) » vous explique comment insérer la librairie du plugin (2ème fichier). Vous pouvez faire de même avec le 3ème fichier. quand au 1er fichier, il est déjà inclu dans wordpress.

      Ensuite, coder votre appel dans le 3ème fichier.

      Savez-vous déjà faire tout ça en dehors de WordPress (sur un fichier HTML/CSS comme dans l’article que vous m’avez mis en lien) ? Il serait sûrement préférable de commencer par là 😉 car WordPress rajoute une couche de complexité.

      Répondre
      • Merci beaucoup de votre réponse.
        Oui je sais faire tout ça très bien sur un site que je monte de a à z mais avec wordpress c’est plus compliqué 😀
        Merci beaucoup de votre aide, je travaille sur ça ce matin!!

        Bonne journée

      • Encore une question.
        Où dois je insérer mon code html dans wordpress?
        Dans le champ texte dans la page où je veux que le jquery fonctionne??

        Merci d’avance.
        Bonne journée.
        Cordialement Vanessa.

      • Le code HTML se place dans l’éditeur, sous l’onglet « texte » (anciennement « html », c’était quand même plus explicite quand il portait ce nom là^^)

        Retenez bien que les librairies JS s’importent via le fichier functions.php et NON en les plaçant directement dans header.php (comme avec un site codé à la main).

        Pour le reste, pas de changement propre à WP. Du coup, il ne devrait plus rester de difficulté :)

  5. Merci Marie-Eve j’ai trouver la solution :)
    vous avez un bon site :)

    Répondre
  6. salut Marie-Eve,

    je suivre ce tutoriel
    et j’ajouté le code suivent a fonction.php
    ___________________________________________________

    function cct_of_register_js() {
    	if (!is_admin()) {
    		
    		wp_register_script('menu_jquery', get_template_directory_uri() . '/js/menu_jquery.js', 'jquery', '2.1', TRUE);
    		wp_enqueue_script('jquery');
        wp_enqueue_script('menu_jquery');  		
    
    	}
    }
    add_action('init', 'cct_of_register_js');
    
    

    ___________________________________________
    et la resultat
    – le menu est fonction bien sur la page d’accueil
    – mais les autre page le css n’pplique ps sur le menu
    s il vous plait aider moi :)

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This Blog will give regular Commentators DoFollow Status. Implemented from IT Blögg

EmailEmail
PrintPrint