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 :
suligner texte stabilo css
Comment surligner un texte comme avec un stabilo ?

Dans ce petit tuto nous allons utiliser les balises <span> et </span> et les CSS en ligne, pour surligner un...

wp-rocket
Wp-Rocket : l’extension WordPress de mise en cache nouvelle génération

La mise en cache est une des clés du succès d'un blog Wordpress. Sans le cache, Wordpress serait extrêmement lent...

google page rank
2 extensions google chrome indispensables pour les webmasters

Voici deux extensions Google chrome indispensables. - La première permet de connaître une foule d'informations  SEO sur un site en...

Fermer