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

Ces articles pourraient vous intéresser :
6 Comments

Add a Comment

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

Lire plus :
clippy_links
Ajouter Clippy l’assistant de Microsoft Office à un site.

Vous vous souvenez de Clippy, Merlin, Rover et Links ? Non ? Il s'agit des petits personnages de l’assistant de...

html-en-pdf
8 sites pour convertir des pages HTML en PDF.

Convertir en ligne un site web en HTML en un fichier PDF à partir d'une adresse url, c'est possible et...

lien vers ancre dans page
Comment créer des liens vers des ancres dans une page web ?

Vous avez peut-être un jour eu envie de faire un lien vers un point précis de votre article ? Où...

Fermer