Comment installer jQuery sur WordPress ?

Vérifier que jQuery est corectement installé sur ton thème, c’est facile !

jQuery est un framework javascript qui assure le bon fonctionnement de ton thème et de l’éditeur de texte pour les articles. En règle générale, il est installé sur ton thème. Pour le vérifier et voir la version procède comme suit :

Depuis Google chrome, Clic droit sur un article, puis clique sur inspecter. L’inspecteur de chrome s’ouvre (non sans blague).

clic droit inspecter

Ensuite, il faut aller dans wp-includes/js/jquery/ dans l’onglet sources :

jquery wp

 

Ceci te permet de connaître la version de jQuery sur ton thème.

Mais peut-être veux-tu ″installer″ jQuery-UI et ses fameux widgets (gadgets). Dans ce cas, il faudra que les versions de jQuery et celles de jQuery-UI, soient les mêmes, ce qui n’est pas gagné. Le plus simple est alors de ″réinstaller″ les deux fichiers de jQuery et jQuery-UI.

Voici comment faire.

Logo jQuery

Récupérer les cdn sur Google (ou  jQuery)

ces liens ″d’installation″ sont disponibles à cette adresse  : https://developers.google.com/speed/libraries

Par exemple :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>

De façon générale, ces liens doivent être placés dans votre document HTML après les fichiers jQuery du thème pour les écraser. Voyons comment faire sous WordPress.

  • Première méthode : utiliser le plugins post layout

post layout est un plugins très intéressant, parce qu’il permet d’insérer des bouts de code au début, au milieu, ou à la fin des articles et des pages WordPress. Contre toute attente, je vous conseille de placer lien google ci-dessus, en bas de page, cela accélérera le chargement et surtout l’affichage de vos pages.

  • Deuxième méthode : utiliser le mode texte des articles.

Si vous devez utiliser jQuery et jQuery UI ponctuellement, vous pouvez installer les liens dans l’article. Pour cela, collez les scripts de cdn directement dans l’article en mode Texte et c’est tout.
En visualisant  2 fois l’article, on vérifie si cela fonctionne.

  • Troisième méthode : utiliser l’éditeur de texte WordPress (non recommandé).

Sur votre panneau d’administration wordPress sélectionnez l’onglet apparence > éditeur et choisissez l’un des fichiers suivant entête (header.php), article seul (single.php) ou pied de page (footer.php).
Placez ces deux scripts dans l’un de ces fichiers et vérifiez si cela fonctionne. Encore une fois, c’est dans le footer que la vitesse d’affichage est optimale.
En visualisant 2 fois l’article, on vérifie si cela fonctionne.

Vérifier que jQuery UI fonctionne

Pour vérifier que jQuery UI fonctionne, je vous invite à consulter l’article sur Comment faire du drag and drop avec jQuery

Voilà, ce mini article est fini. On se quitte déjà. Bouuuuuhhhh.

A bientôt

6 Comments

Add a Comment

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
iphone
7 Emulateurs de téléphones mobiles en ligne

Pourquoi visualiser sont blog sur un émulateur ? Aux vues de la croissance du trafic des mobiles sur internet, il...

banniere flash
5 générateurs flash pour créer des bannières en ligne.

Voici un petit article vous présentant 5 sites pour créer des bannières Flash facilement. Pour des animations flash plus importante, je...

Selfie
Les meilleurs applications mobiles pour réussir vos Selfies

Les Selfies, ces autoportraits pris avec un téléphone mobile, sont un vrai phénomène de société. Tout le monde s'y met, même...

Fermer