Comment ajouter une interface utilisateur de shortcodes dans WordPress avec Shortcake

Si vous développez un site WordPress pour un client, il est probable que vous ayez des shortcodes à utiliser pour vos clients. Le problème est que de nombreux débutants ne savent pas comment ajouter des shortcodes et s'il y a des paramètres complexes impliqués, alors c'est encore plus difficile. Shortcake offre une solution en ajoutant une interface utilisateur pour les shortcodes. Dans cet article, nous vous montrerons comment ajouter une interface utilisateur pour les shortcodes dans WordPress avec Shortcake.

Qu'est-ce que Shortcake ?

WordPress offre un moyen plus simple d'ajouter du code exécutable dans les articles et les pages en utilisant des shortcodes. De nombreux thèmes et plugins WordPress permettent aux utilisateurs d'ajouter des fonctionnalités supplémentaires à l'aide de shortcodes. Cependant, parfois, ces shortcodes peuvent devenir compliqués lorsqu'un utilisateur doit entrer des paramètres pour la personnalisation.

Par exemple, dans un thème WordPress typique, s'il existe un shortcode pour insérer un bouton, l'utilisateur devra probablement ajouter au moins deux à cinq paramètres. Comme ceci :

[themebutton url="http://example.com" title="Télécharger maintenant" color="purple" target="newwindow"]

Shortcake est un plugin WordPress et une fonctionnalité future proposée pour WordPress. Il vise à résoudre ce problème en fournissant une interface utilisateur pour saisir ces valeurs. Cela rendra les shortcodes beaucoup plus faciles à utiliser.

Démarrage

Ce tutoriel s'adresse aux utilisateurs qui débutent dans le développement WordPress. Les utilisateurs débutants qui aiment modifier leurs thèmes WordPress trouveront également ce tutoriel utile.

Cela dit, commençons.

La première chose à faire est d'installer et d'activer le plugin Shortcake (Shortcode UI).

Vous aurez maintenant besoin d'un shortcode qui accepte quelques paramètres d'entrée utilisateur. Si vous avez besoin d'un petit rappel, voici comment ajouter un shortcode dans WordPress.

Pour les besoins de ce tutoriel, nous utiliserons un shortcode simple qui permet aux utilisateurs d'insérer un bouton dans leurs articles ou pages WordPress. Voici le code d'exemple pour notre shortcode, et vous pouvez l'utiliser en l'ajoutant au fichier functions de votre thème ou dans un plugin spécifique au site.

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Vous devrez également ajouter du CSS pour styliser votre bouton. Vous pouvez utiliser ce CSS dans la feuille de style de votre thème.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

Voici comment un utilisateur utilisera le shortcode dans ses articles et pages :

[cta-button title="Télécharger maintenant" url="http://example.com"]

Maintenant que nous avons un shortcode qui accepte des paramètres, créons une interface utilisateur pour celui-ci.

Enregistrement de l'interface utilisateur de votre shortcode avec Shortcake

L'API Shortcake vous permet d'enregistrer l'interface utilisateur de votre shortcode. Vous devrez décrire les attributs que votre shortcode accepte, les types de champs de saisie et les types de publication qui afficheront l'interface utilisateur du shortcode.

Voici un extrait de code d'exemple que nous utiliserons pour enregistrer l'interface utilisateur de notre shortcode. Nous avons essayé d'expliquer chaque étape avec des commentaires en ligne. Vous pouvez coller ceci dans le fichier functions.php de votre thème ou dans un plugin spécifique au site.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

C'est tout, vous pouvez maintenant voir l'interface utilisateur du shortcode en action en modifiant un article. Cliquez simplement sur le bouton Ajouter un média au-dessus de l'éditeur d'un article. Cela ouvrira le téléchargeur de médias où vous remarquerez un nouvel élément « Insérer un élément d'article » dans la colonne de gauche. Cliquer dessus vous montrera un bouton pour insérer votre code.

Cliquer sur la miniature contenant l'icône de l'ampoule et votre étiquette shortcake affichera l'interface utilisateur du shortcode.

Ajout d'un shortcode avec plusieurs entrées

Dans le premier exemple, nous avons utilisé un shortcode très basique. Rendons-le maintenant un peu plus compliqué et beaucoup plus utile. Ajoutons un shortcode qui permet aux utilisateurs de choisir la couleur d'un bouton.

Nous allons d'abord ajouter le shortcode. C'est presque le même shortcode, sauf qu'il accepte désormais les entrées utilisateur pour la couleur.

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Comme notre shortcode affichera des boutons de différentes couleurs, nous devrons également mettre à jour notre CSS. Vous pouvez utiliser ce CSS dans la feuille de style de votre thème.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

Voici à quoi ressembleront les boutons :

Maintenant que notre shortcode est prêt, la prochaine étape consiste à enregistrer l'interface utilisateur du shortcode. Nous utiliserons essentiellement le même code, sauf que cette fois, nous avons un autre paramètre pour la couleur et nous proposons aux utilisateurs de choisir parmi des boutons bleus, orange ou verts.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

C'est tout, vous pouvez maintenant modifier un article ou une page et cliquer sur le bouton Ajouter un média. Vous remarquerez votre shortcode nouvellement ajouté sous « Insérer des éléments d'article ».

Cliquer sur votre shortcode nouvellement créé ouvrira l'interface utilisateur du shortcode, où vous pourrez simplement entrer les valeurs.

Vous pouvez télécharger le code utilisé dans ce tutoriel sous forme de plugin.

wpb-shortcake-tutorial

Nous avons inclus le CSS, vous pouvez donc l'utiliser pour étudier ou l'utiliser pour ajouter vos propres boutons d'appel à l'action dans WordPress en utilisant une interface utilisateur plus simple. N'hésitez pas à modifier la source et à jouer avec.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une interface utilisateur pour les shortcodes dans WordPress avec Shortcake. Vous voudrez peut-être également consulter ces 7 conseils essentiels pour utiliser les shortcodes dans WordPress.

Si vous avez aimé cet article, alors abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.