[Blogging] Utiliser JQuery avec WordPress

Dans cet article nous verrons comment utiliser du code JQuery et des iframes avec WordPress. Ce qui est une solution pour l’insertion de codes Amazon ou de JavaScript.

WordPress contient et utilise la dernière version de JQuery. Le problème est que si vous insérez du code JavaScript ou un iframe, l’éditeur de WordPress le formatera ou le supprimera (même avec l’onglet HTML). Ce qui peut rendre l’exécution du code JavaScript incompatible avec certains navigateurs. C’est dommage parce que l’éditeur par défaut est sympa. Dans ce billet, nous verrons une solution simple qui ne remet pas en cause l’utilisation de votre éditeur préféré et qui insère n’importe quel code HTML (y compris du JavaScript) tel quel, sans formatage, et où vous le souhaitez dans votre article.

L’extension qui va bien

Tout commence par le téléchargement de l’extension Easy Embed qui peut être utilisée pour insérer n’importe quel code HTML que l’éditeur de WordPress écraserait ou modifierait à l’enregistrement.

Une fois que l’extension est installée et activée, il suffit de procéder comme suit :

  1. Créer vos éléments sur lesquels agir (bouton, DIV, images, …).
  2. Ajouter un champ personnalisé dans l’article WordPress (dans lequel vous mettrez votre code JavaScript).
  3. Initialiser correctement jQuery.
  4. Faire appel à l’extension Easy Embed pour insérer le code JavaScript dans le billet.

Un exemple pas à pas

Il est tout à fait possible d’insérer des éléments de formulaire avec l’éditeur par défaut de WordPress. Pour l’exemple de cet article, j’ai cliqué sur l’onglet HTML (en haut à droite de l’éditeur) et ajouté le code HTML suivant :
<input id="cmdGenerate" type="button" value="Afficher message" />

Je voudrais maintenant utiliser jQuery pour afficher un message « clic sur bouton », lorsque que l’on clique sur le bouton cmdGenerate.

On commence par créer un champ personnalisé. Dans les dernières versions de WordPress, les champs personnalisés ne sont pas affichés par défaut. Pour y remédier, lorsque vous modifiez un article, regardez en haut à droite de l’écran et cliquez sur « Options de l’écran » :

Options_ecran_wordpress

Accès aux options d'affichage de WordPress

Puis sélectionnez les options d’affichage. Le fait de de cliquer sur la case « Champs personnalisés » ajoutera un nouveau module sous l’article.

Ajout_champs_personnalises_post_wordpress

Option d'affichage des champs personnalisés d'un article WordPress

Sous l’éditeur, accédez au module « Champs personnalisés » et cliquez sur « Saisissez-en un nouveau » qui fera apparaître une zone de texte pour la clef et un autre pour le contenu du code HTML (qui sera inséré dans l’article WordPress).

saisie_nouveau_champ_personnalise_wordpress

Ajout d'un nouveau champ personnalisé de WorPress

Dans mon exemple, la clef est JSAlertBtn tandis que le contenu associé à ma clef est le code HTML (du JavaScript, en fait) listé plus bas.

Ajout_champ_personnalise_wordpress

Saisie du code HTML ou JavaScript dans le champ personnalisé

Pour mon exemple, j’ai inséré le code code suivant :

<script type="text/javascript">
var $j = jQuery.noConflict();
$j("#cmdGenerate").click(function() {alert("clic sur bouton"); });
</script>

Puis, dans le contenu de mon article et sous le bouton, j’ai inséré le meta-code : [ easyembed field= »JSAlertBtn » ] (sans les espaces entre les crochets) qui indique à WordPress d’insérer le contenu du champ personnalisé à l’emplacement du meta-code. Ce meta-code fait référence à la clef JSAlertBtn définie plus haut.

Initialiser correctement jQuery

Il n’a sans doute pas échappé aux puristes la ligne de code suivante :

var $j = jQuery.noConflict();

En effet, jQuery ou d’autres bibliothèques JavaScript sont utilisées par WordPress et par ses extensions. Le problème, c’est que le pointeur par défaut ($) pourrait être utilisé par d’autres bibliothèques. Donc on on initialise une variable à l’aide de la fonction noConflict() afin de réduire ces éventuels problèmes de cohabitation entre les différents composants votre blog qui utiliseraient différentes bibliothèques JavaScript.

Ajouter une extension JQuery

il suffit de la télécharger dans le répertoire de votre choix et d’y faire référence dans le code HTML embarqué. Par exemple, sur un de mes articles, j’utilise l’extension JCrypt pour afficher le résultat d’une fonction hash sur le contenu d’un champ texte. Il est préférable de télécharger l’extension dans le répertoire wp-content, car c’est le seul emplacement qui n’est pas écrasé lors des mises à jour de WordPress. Puis on peut y faire référence en ajoutant – toujours dans le champ personnalisé – la référence à ce fichier source :

<script type="text/javascript" src="/wp-content/jquery.crypt.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();

$j("#cmdGenerate").click(function() {
alert($j("#txtPhrase").val());
var md5 = $j("#txtPhrase").crypt({method:"md5"});
alert("test MD5 = " + md5);
});
</script>

Sources et téléchargement

7 réflexions au sujet de « [Blogging] Utiliser JQuery avec WordPress »

  1. Tsub'

    Franchement, un énooooooorme merci ! Ca faisait une semaine que je bloquais sur l’implémentation de scripts en js sur un futur site et je pensais abandonner à force de bloquer… et là ce tuto très clair et très simple vient juste de tout faire fonctionner 😀

    Cette page mériterait plus de vues, ça aiderait bon nombre de personnes je pense !

    Encore merci ! 🙂

    Répondre
  2. Charles Demers

    1. J’ai activé le plugin Easy Embed.
    2. J’ai créé mon champ personnalisé: JSAlertBtn.
    3. J’ai ajouté ce bout de code dans ma page WordPress:

    [easyembed field="JSAlertBtn"]

    4. Et je n’obtiens aucun résultat. Je n’ai que le bouton, et aucun événement se passe lorsque j’appuie.

    Qu’ai je fais d’incorrect?

    Répondre
    1. Benjamin BALET Auteur de l’article

      Il peut y avoir plein de raisons (installation incorrecte, Erreur dans le code Javascript). Voici quelques pistes :

      • Commencez par regarder dans le code de la page HTML (lorsque vous visualisez votre article contient une référence à la bibliothèque JQuery), par exemple :script type='text/javascript' src='http://site/wp-includes/js/jquery/jquery.js?ver=1.7.1'
      • Il se peut qu’il y ait une erreur Javascript. Dans ce cas, le navigateur affiche une erreur ou une icône. Le piège avec certains navigateurs tels que Google Chrome/Chromium est qu’il faut installer une extension pour avoir le détail de l’erreur Javascript et/ou qu’elle s’affiche plus clairement. Installez JsError ou JavaScript Errors Notifier. Ou essayez avec un autre navigateur.
      • à l’aide du code de la page HTML, vérifiez une à une toutes les références Javascript afin de constater s’il y a des fichiers manquants sur le serveur.
      Répondre
  3. Blanche

    Je n’ai pas encore terminé car mon CSS bg n’est pas pris en compte mais je dois te remercier pour le bon coup de main que tu m’as donné avec ton tuoriel.

    Efficace !

    Et au passage, je me rends compte que le dossier du site img sur lequel je travaille n’est pas dans wp-content. Pourquoi… 🙂

    Grazie mille

    Répondre

Laisser un commentaire

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