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 :
enjoy-css
Les 7 meilleurs générateurs css3 en ligne

Depuis CSS3, les feuilles de style ont révolutionné la création des sites web : des coins arrondis, des gradients, des transitions,...

dragon naturallyspeaking
Test d’un logiciel de reconnaissance vocale : Dragon NaturallySpeaking.

Peut-être vous intéressez-vous comme moi à la reconnaissance vocale pour simplifier vos tâches de bureautique et vous affranchir du clavier...

En relation avec : les trois meilleurs Plugins WordPress.

Pour débuter cette année, nous allos nous intéresser aux plugins WordPress proposant des articles en rapport avec l'article lu. Pourquoi utiliser...

Fermer