Dans ce nouveau tutoriel, découvrez comment créer un shortcode WordPress avec des paramètres afin de personnaliser un peu plus votre thème WP.
Introduction
Parmi ce qui peut être développé sous WordPress, il y a les shortcodes. Un shortcode WordPress constitue une manière simple et puissante, de créer des modules qui viendront se greffer sur votre contenu. En effet, grâce à ce système, vous pouvoir ajouter une multitude d’options dans vos posts et vos pages.
Développer un shortcode WordPress
Pour développer un shortcode, il faut avant tout cibler son besoin. Pourquoi faire ça ? Mettre en avant quel genre de contenu ? Ensuite, il faut aussi se servir de la documentation officielle grâce au Codex WordPress.
Pour ce tutoriel, je vais partir sur un shortcode qui va afficher une « notice box » comme l’exemple ci-dessous.
Pour ce faire, nous allons devoir développer plusieurs options. Tout d’abord, il va falloir créer une box dans laquelle nous allons paramétrer les éléments suivants :
- Un icône prédéfini selon le type de notice box
- Un titre à définir à chaque box
Maintenant que nous avons tous les éléments, nous pouvons commencer à développer notre fonction.
1 – Créer la fonction
Voici le code à copier et les explications.
if ( !function_exists( 'nom_de_la_fonction' ) ) { add_shortcode( 'nom_shortcode', 'nom_de_la_fonction' ); function nom_de_la_fonction($atts, $content = null){ /* votre code ici... */ } }
Tout d’abord, nous allons créer une condition afin de sécuriser la fonction en cas de doublon de nomination.
Ensuite, nous ajoutons la fonction WordPress add_shortcode
en la nommant, puis en la ciblant sur la fonction que nous avons créée précédemment.
Le premier paramètre de la fonction add_shortcode déterminera le nom du shortcode à appeler dans votre contenu, dans le cas présent : nom_shortcode.
Enfin, nous terminons par l’ajout de la fonction, avec deux paramètres : $atts
et $content = null
.
2 – Définir les paramètres
Pour mettre en place nos paramètres, nous avons besoin du code suivant.
$a = shortcode_atts( array( 'type' => 'Insérer le type d\'alert', 'title' => 'Insérer votre titre', ), $atts );
Dans cette variable, que nous appellerons $a
pour « attributes », nous allons définir l’ensemble des paramètres du shortcode WordPress. Grâce à la propriété shortcode_atts
, nous allons ouvrir un array
où les paramètres seront inclus.
Dans l’exemple ci-dessus, nous plaçons 2 éléments type
et title
. Les valeurs, qui leurs sont attribuées, sont celles qui s’afficheront par défaut, lorsque les attributs seront appelés sans valeur.
Maintenant, passons à l’étape suivante : la création d’un switch.
3 – Créer un switch des paramètres
Un switch est une propriété PHP qui va permettre de définir une ou plusieurs variables en fonction d’un paramètre défini. Un switch nous évite de créer un foreach avec des conditions à l’intérieur.
Premièrement, nous allons définir le switch pour un seul paramètre car, seul le type
de notice box sera dynamique. Voici le code du switch pour cette valeur.
switch ($a['type']){ case 'info': $icon = '<i class="far fa-info-circle"></i>'; break; case 'warning': $icon = '<i class="far fa-exclamation-circle"></i>'; break; case 'success': $icon = '<i class="far fa-check-circle"></i>'; break; case 'danger': $icon = '<i class="far fa-times-circle"></i>'; break; }
Premièrement, nous récupérons la valeur de type $a['type']
que nous écrirons dans notre shortcode dans l’éditeur.
Ensuite, nous allons créer un case
pour chaque valeur que nous souhaitons avoir. Pour ce tutoriel, nous en définirons 4 :
- info
- warning
- success
- danger
A la suite de cela, nous plaçons un break
pour terminer le case
.
Parallèlement, nous plaçons une variable $icon
qui va, comme son nom l’indique, afficher un icône. Dans le cas présent, ce sont des icônes de chez Font Awesome qui sont utilisés.
4 – Créer le retour
Enfin, il est temps de passer à la création du retour. Pour plus de facilité, nous allons développer une variable, dans laquelle nous lui assignerons une concaténation.
En PHP, vous pouvez ajouter plusieurs valeurs à une variable.
Pour ce faire, vous devez écrire .=, à la place de =, à partir du second appel pour ajouter les valeurs. Exemple du code ci-dessous.
Voici le code pour cette variable qui portera le nom $alert
.
$notice = '<div class="notice-box notice-box-' . $a['type'] . '">'; $notice .= $icon; $notice .= '<div class="content">'; $notice .= '<span>' . $a['title'] . '</span>'; $notice .= '<p>' . $content . '</p>'; $notice .= '</div>'; $notice .= '</div>'; return $notice;
Premièrement, nous créons une div avec une class
notice-box. Ensuite, nous lui ajoutons une seconde class
relative aux case développer précédemment, grâce à la valeur $a['type']
.
Après, nous plaçons notre variable d’icône $icon
. Enfin, nous ajoutons tout le contenu nécessaire. A savoir, le titre $a['title']
et son contenu $content
.
Pour terminer, nous finissons par créer le retour de cette variable avec return $notice;
.
5 – Afficher le shortcode
Le shortcode est désormais terminé. Il ne reste plus qu’à l’afficher dans votre post ou page.
[notice type="info" title="Votre titre"]Votre contenu[/notice]
Le shortcode est terminé, il s’affiche avec les données que vous vouliez. Pour la suite, il va falloir styliser un peu tout ça.
Styliser le shortcode WordPress
Maintenant, passons à la stylisation de cette notice box. Nous allons utiliser du CSS avec comme langage, le SASS.
Pour la compilation, je vous recommande d’utiliser Gulp avec les lignes de commande.
Sinon, ce petit logiciel très pratique, portant le nom de Koala.
1 – Définir la classe et son contenu
Pour cette étape, voici le code SASS pour créer une notice box avec une présentation sympa. Libre à vous d’intégrer votre propre style.
.notice-box { position: relative; padding: 15px; margin-bottom: 30px; border-left: 5px solid transparent; i { position: absolute; top: 50%; left: 30px; transform: translateX(-50%) translateY(-50%); font-size: 3em; } .content { margin-left: 50px; span { font-size: 1.5em; font-weight: bold; } p { margin-bottom: 0 !important; } } }
Maintenant, passons à la création du tableau des paramètres du shortcode et des valeurs associées.
2 – Créer un tableau de paramètres et de valeurs
Créons le tableau avec les 4 paramètres et valeurs. Cette liste est à placer juste après l’option border-left: 5px solid transparent;
de la class .alert-box
.
$list: ( info: $info, warning: $warning, success: $success, danger: $danger );
Les variables définies à l’intérieur correspondent à des codes couleurs. Si vous ne les avez pas créé, voici des codes couleurs standard pour ce genre de notice. N’oubliez pas de les AVANT la liste sinon, vous aurez une erreur lors de la compilation.
$info: rgb(5, 180, 216); $succes: rgb(53, 205, 58); $warning: rgb(255, 165, 52); $danger: rgb(243, 84, 93);
Après cela, passons maintenant à la réalisation d’un each.
3 – Créer un each de ces valeurs
Le each en SASS repose sur le même principe de fonctionnement que le foreach en PHP. Placer ce code à la suite de la liste.
@each $key, $val in $list { &.notice-box-#{$key} { color: $val; border-left-color: $val; background: rgba($val, .15); } }
Ici, nous avons une variable $key
qui correspond à « info » et une variable $val
qui est attaché à « $info
« .
Il vous faudra formater la variable $key afin de l’appeler correctement.
Pour cela, il faudra écrire #{$key}.
Félicitations, vous venez de terminer le tutoriel avec succès !
Conclusion
Vous êtes maintenant capable de créer un shortcode avec des paramètres prédéfinis et à personnaliser.
Bien évidemment, vous pouvez créer des shortcodes pour beaucoup de contenu spécifique. Dans ce tutoriel, nous avons aborder les notices boxes mais vous pouvez faire ça pour des aperçus d’articles (en remontant l’ID de l’article par exemple).
Si ce tutoriel vous a plu, je vous encourage à le partager sur vos réseaux préférés. Si vous rencontrez des bugs, vous pouvez laisser un message afin que je puisse vous aider.
Laisser un commentaire