WordPress a introduit l’API shortcode il y a six ans avec la sortie de WordPress 2.5. Les shortcodes sont maintenant utilisés par un grand nombre de plugins WordPress pour permettre aux utilisateurs d’ajouter du contenu à leurs articles et pages.
L’API shortcode vous permet de créer vos propres shortcodes en ajoutant des fonctions au modèle functions.php de votre thème (situé à l’adresse www.yourwebsite.com/wp-content/themes/yourtheme/).
Outre la possibilité de créer vos propres shortcodes, WordPress inclut également cinq shortcodes par défaut dans son noyau :
- audio – Vous permet d’intégrer des fichiers audio.
- caption – Vous permet de placer des légendes autour du contenu. Il est généralement utilisé avec des images.
- embed – Vous permet d’intégrer un large éventail de contenus tels que des vidéos, des fichiers audio et des tweets.
- gallery – Vous permet d’insérer des galeries d’images.
- video – Permet d’intégrer des fichiers vidéo.
Bien que les shortcodes par défaut de WordPress soient couramment utilisés, très peu d’utilisateurs de WordPress profitent de l’API des shortcodes et conçoivent des shortcodes uniques pour leur site web. Dans ce tutoriel, je voudrais vous montrer comment il est facile d’améliorer votre site Web avec des shortcodes personnalisés.
Avant de commencer, assurez-vous de faire une sauvegarde de functions.php et de tout autre fichier que vous modifiez avant d’effectuer des changements sur votre site Web.
Création d’un shortcode – Un exemple de base
Pour vous donner une bonne compréhension du fonctionnement de l’API Shortcode de WordPress, commençons par une fonction de shortcode de base.
N’oubliez pas que les shortcodes doivent être créés pour le contenu et les fonctionnalités que vous utilisez fréquemment. Le but de l’utilisation des shortcodes est de faire gagner du temps à quelqu’un. Si vous n’utilisez quelque chose qu’une seule fois, il n’y a pas beaucoup d’intérêt à créer un shortcode pour cette fonction.
J’écris environ une douzaine d’articles par semaine. J’encourage souvent ceux qui ont apprécié mes articles à s’abonner à mon blog (ou au blog pour lequel j’écris). Je l’écris actuellement à chaque fois, mais je pourrais gagner beaucoup de temps en créant un code court pour ce texte.
Pour ce faire, je pourrais ajouter une fonction comme celle-ci au modèle functions.php de mon thème :
// Fonction permettant d'ajouter le texte d'abonnement aux articles et aux pages
function subscribe_link_shortcode() {
return 'Si vous avez apprécié cet article, je vous encourage à <a href="http://feeds.feedburner.com/ElegantThemes" ; title="Subscribe to Our Blog">vous abonner au blog d'Elegant Themes via RSS</a>' ;
}
add_shortcode('subscribe', 'subscribe_link_shortcode') ;
Ceux d’entre vous qui n’ont aucune expérience du codage peuvent trouver le code ci-dessus un peu intimidant, mais il est facile à comprendre une fois qu’il est décomposé ligne par ligne.
La première chose à faire est d’ajouter un commentaire au-dessus de notre fonction. Cela nous aidera à voir rapidement à quoi sert notre fonction lorsque nous consulterons le code ultérieurement.
// Fonction permettant d'ajouter un texte d'abonnement aux articles et aux pages
Nous définissons ensuite notre fonction. J’aime utiliser des noms explicites, j’ai donc appelé ma fonction « subscribe_link_shortcode ».
function subscribe_link_shortcode() {
Ensuite, nous définissons notre message. L’instruction de retour affichera notre message lorsqu’elle sera appelée. Elle stocke également les messages (par opposition à echo, qui les imprimera mais ne les stockera pas).
return 'Si vous avez apprécié cet article, je vous encourage à <a href="http://feeds.feedburner.com/ElegantThemes" ; title="Subscribe to Our Blog">vous abonner au blog d'Elegant Themes via RSS</a>' ;
La fonction est ensuite fermée.
}
Nous définissons ensuite le shortcode lui-même à l’aide de la fonction add_shortcode. La première variable spécifiée définit le shortcode à utiliser et la deuxième variable appelle notre fonction (c’est-à-dire celle que nous avons définie ci-dessus).
add_shortcode('subscribe', 'subscribe_link_shortcode') ;
Après avoir enregistré le modèle functions.php, nous pouvons maintenant appeler notre message quand nous le voulons en utilisant le shortcode subscribe.
[subscribe]
L’utilisation du shortcode subscribe dans un article ou une page produira le message suivant :
Si vous avez apprécié cet article, je vous encourage à vous abonner au blog d’Elegant Themes via RSS
.
J’ai utilisé un message simple dans mon exemple, mais vous pouvez le modifier pour afficher bien d’autres choses. Par exemple, vous pouvez créer un code court pour afficher des publicités adsense ou un formulaire d’abonnement à votre newsletter, puis les insérer où vous voulez dans vos articles.
Créer un shortcode avec des attributs
Les attributs peuvent étendre la fonctionnalité des shortcodes en vous permettant de transmettre des données à travers vos shortcodes.
Dans l’exemple ci-dessous, je vais vous montrer comment les attributs peuvent être utilisés pour étendre la fonction que nous avons créée précédemment. Comme vous pouvez le constater, une grande partie du code reste inchangée.
// Fonction d'abonnement étendue avec une variable de type d'abonnement
function subscribe_multilink_shortcode( $atts ) {
extract( shortcode_atts( array(
'subtype' => 'RSS',
'subtypeurl' => 'http://feeds.feedburner.com/ElegantThemes',
), $atts, 'multilink' ) ) ;
return sprtinf( 'Assurez-vous de vous abonner aux futures mises à jour d'Elegant Themes par %2$s.',
esc_url( $subtypeurl ),
esc_html( $subtype )
) ;
}
add_shortcode( 'subscribe', 'subscribe_multilink_shortcode' ) ;
$atts est le nom de notre tableau d’attributs. Nous utilisons ensuite la fonction extract pour importer les variables de notre tableau (via la fonction WordPress shortcode_atts ).
Deux attributs sont alors définis : subtype et et subtypeurl. Ils représentent le type d’abonnement et l’URL de l’abonnement. Ces attributs sont ensuite appelés dans notre message.
Notre type d’abonnement par défaut est RSS et notre URL d’abonnement par défaut est http://feeds.feedburner.com/ElegantThemes. Ces informations seront affichées si aucun attribut n’est défini.
Par conséquent, lorsque vous ajoutez le texte suivant à un message :
[subscribe]
Nous obtiendrons le résultat suivant :
Assurez-vous de vous abonner aux futures mises à jour d’Elegant Themes par RSS
.
Si nous définissons des attributs, le résultat est différent. Le code suivant :
[subscribe] [subscribe subtype="Twitter" ; subtypeurl="http://www.twitter.com/elegantthemes/" ;] [subscribe subtype="Facebook" ; subtypeurl="http://www.facebook.com/elegantthemes/" ;] [subscribe subtype="Google" ; subtypeurl="http://plus.google.com/+elegantthemes/" ;]
Serait le résultat :
Assurez-vous de vous abonner aux futures mises à jour d’Elegant Themes par RSS.
Assurez-vous de vous abonner aux futures mises à jour d’Elegant Themes par Twitter.
Assurez-vous de vous abonner aux futures mises à jour d’Elegant Themes par Facebook.
Assurez-vous de vous abonner aux futures mises à jour d’Elegant Themes par Google
.
Bien qu’il s’agisse d’un exemple de base du fonctionnement des attributs, il est facile de voir comment les développeurs de plugins peuvent utiliser l’API shortcode pour rendre les fonctions complexes plus conviviales pour les utilisateurs.
Vue d’ensemble
Si vous suivez les étapes indiquées dans ce tutoriel, vous devriez maintenant avoir une compréhension de base de la façon dont vous pouvez créer vos propres shortcodes personnalisés pour votre site Web. Les shortcodes sont un excellent moyen de simplifier les tâches complexes. Je vous encourage donc à garder l’API shortcode de WordPress à l’esprit à l’avenir.
Ne vous inquiétez pas si ce tutoriel était un peu difficile pour vous. Tous les designs d’Elegant Themes sont livrés avec des shortcodes qui facilitent la publication de beaux contenus. Les shortcodes peuvent être utilisés pour créer des diaporamas, des colonnes et des tableaux. Ils vous permettent même de protéger votre contenu par un mot de passe.
J’espère que vous avez apprécié ce tutoriel sur la création d’un shortcode unique pour votre site Web WordPress. Si c’est le cas, je vous encourage à vous abonner à Elegant Themes car nous avons du super contenu en préparation 🙂
Aussi, une fois de plus, je vous rappelle de sauvegarder tous les fichiers avant de les modifier.
