Comment installer jQuery sur WordPress ?


jQuery est la framework javascript du moment. Elle offre de nombreuses possibilités dont les fameux widgets (gadgets) de jQuery UI. Mais avant de profiter de jQuery UI, il faut d’abord l’installer sur son blog ou son site.
Voici 4 méthodes différentes pour installer jQuery et jQuery UI :
Logo jQuery

4 méthodes pour installer de jQuery et jQuery UI.

Le plus simple pour installer jQuery et jQuery UI est d’utiliser un lien Google.
Ces liens sont disponibles à cette adresse  : https://developers.google.com/speed/libraries/devguide

<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, voyons maintenant 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 l’éditeur de texte WordPress.

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 visualisation d’article, il faut réactualiser la page, pour voir si cela fonctionne.

  • Troisième méthode : utiliser le mode HTML (texte) des articles.

Si vous devez utiliser jQuery et jQuery UI ponctuellement, vous pouvez installer les liens dans un seul article. Pour cela, rien de plus simple. Il suffit de les coller dans votre article en mode HTML (Texte) et c’est tout.
En visualisation d’article, il faut réactualiser la page, pour voir si cela fonctionne.

  • Quatrième méthode : utiliser des fonctions WordPress. 

Sous WordPress, allez dans votre éditeur de fichiers apparence > Editeur et choisissez le fichier functions.php

Par sécurité, faites une copie du fichier functions.php sur votre ordinateur

Coller ensuite les code ci-dessous dans le fichier functions.php. Cette méthode est sans garantie.

wp_deregister_script('jquery');
wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1/
jquery.min.js', false, '');
wp_enqueue_script('jquery');

wp_deregister_script('jquery-ui');
wp_register_script('jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/
jquery-ui.min.js', false, '');
wp_enqueue_script('jquery-ui');

 

Vérifier que jQuery UI fonctionne

Pour vérifier que jQuery UI fonctionne, vous pouvez utiliser le petit script ci-dessous et le coller dans un article en mode HTML (texte ). Remplacer le lien vers l’image (http://chemin/image.jpg) par celui d’une  image. Si l’image se déplace se déplace avec la souris comme celle de cet article, c’est  gagné. Sinon, essayé une autre des quatre méthodes. Mais honnêtement, c’est post layout qui est le mieux.

<img id="effet" src="http://chemin/image.jpg" />
<script type="text/javascript">
$("#effet").draggable();
</script>

En prévisualisation, sous WordPress, il faut réactualiser la page pour voir les effet de jQuery UI.

Voilà, ce petit tuto est terminé. qu’en pensez-vous ? 🙂

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

loupe
Comment connaître le thème d’un blog WordPress ?

Souvent en se promenant sur la toile, on tombe au détour d'un blog sur le thème WordPress que l'on recherche,...

décoder liens
7 sites et 2 extensions pour décoder et vérifier des liens courts.

250 milles comptes Twitter hackés récemment. Il s'agissait de liens courts dans des messages personnels. Les liens courts peuvent être...

Fermer