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 :
avatar
12 sites pour créer un avatar en ligne.

Pour ce démarquer des autres, un avatar original peut faire toute la différence. Dans cet article vous trouverez 12 sites...

générateur de gif animés
7 sites pour créer des GIF animés en ligne.

Les GIF animés j'adore. Ça donne de la vie aux pages web. Parfois c'est amusant. Voici 7 générateurs en ligne...

infographie internet 2014
Les statistiques d’internet pour 2014 [Infographie]

Une infographie présentant quelques chiffres d'internet pour 2014. Les chiffres 2014 dinternet  TEMPS PASSÉ SUR INTERNET PAR JOUR Chaque minute...

Fermer