Créer un shortcode WordPress avec des paramètres

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.

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

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.

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.

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“.

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.