Le deuxième Shortcode que nous voulons aborder dans cette série en sept parties est le Shortcode [ caption ]. Vous pouvez l’utiliser pour insérer une grande quantité de texte sous forme de légende pour une image. Pourquoi voudriez-vous faire cela? Pour que le texte de légende enveloppe l’image plutôt que de l’afficher en dessous de cette dernière.

Il n’est pas nécessaire de modifier le fichier media.php pour indiquer à WordPress comment utiliser le Shortcode. Si vous souhaitez le modifier, vous trouverez le fichier dans le répertoire wp-includes. Aux environs de la ligne # 1430, vous devriez voir le code par défaut pour l’entrée Shortcode.

Si vous ne l’avez pas encore fait, vous pouvez lire la partie 1 (Introduction aux Shortcodes) et la partie 2 (Shortcode Audio).

Définition des variables

Lorsque vous créez votre Shortcode, il y a plusieurs variables à considérer. Les trois premières sont facultatives; la quatrième est requise :

• ID (id) – Cette variable vous permet d’ajouter un identifiant HTML unique pour identifier le Shortcode dans votre page. Aucun ID n’est défini par défaut.
• Class – Comme la balise d’identification, cette variable vous permet de définir une classe personnalisée pour votre code. Encore une fois, aucune valeur par défaut n’est attribuée.
• Align – Cette variable fait exactement ce qu’elle dit : elle détermine l’alignement du texte que vous utilisez pour votre légende. Vos quatre choix sont alignnone, aligncenter, alignright et alignleft. La valeur par défaut est alignnone (aucun alignement).
• Width – Cette variable est obligatoire. Vous devez déterminer la largeur de la zone de légende en entrant une valeur (en pixels) d’un ou plus. Si vous ne définissez pas cette variable, votre texte passera à travers l’image.

Une fois vos variables définies, vous pouvez uploader votre image dans votre bibliothèque multimédia WordPress ou localiser son URL, si vous prévoyez d’utiliser une image hébergée à distance.

Utilisation du code

L’utilisation du raccourci [ caption ] est assez simple. Ouvrez votre page ou votre post pour l’éditer, puis cliquez sur l’onglet ‘Texte’ à droite de l’éditeur. Cela vous sortira de l’environnement WYSIWYG et dans un éditeur de texte brut où vous devriez voir tout le code source de votre document. Entrez le code suivant là où vous voulez que l’image et la légende s’affichent :


[ caption ] <img> Légende [ /caption ]


Deux choses à noter ici. La première est la balise Image. Lorsque vous utilisez cette balise, vous devez inclure la source de l’image avec elle. Si vous ne savez pas comment formater les balises source d’image correctement, pas de problème; Utilisez le WYSIWYG pour introduire votre image à partir de la bibliothèque multimédia, puis retournez vers l’éditeur de texte et ajoutez simplement le code nécessaire.

Deuxièmement, notez que nous fermons le Shortcode [ caption ] en utilisant ‘/caption’. Si vous ne fermez pas la balise, elle ne s’affichera pas correctement. Votre code final devrait ressembler à ceci :


[ caption ] <img src="http://localhost/wp-content/uploads/my_awesome_image.jpg" alt="génial" title="Regardez ceci" Width="350" height="250" class="size-medium my_image"/> Regardez ceci [ /caption ]


Maintenant, tout ce que vous avez à faire est d’entrer le texte de votre légende en éditant le champ approprié dans la médiathèque. C’est tout!