Comment ajouter une interface utilisateur de codes courts dans WordPress avec Shortcake
Si vous développez un site WordPress pour un client, il est probable que vous disposerez de codes courts que vos clients pourront utiliser. Le problème est que de nombreux débutants ne savent pas comment ajouter des shortcodes et si des paramètres complexes sont impliqués, c’est encore plus difficile. Shortcake fournit une solution en ajoutant une interface utilisateur pour les shortcodes. Dans cet article, nous allons vous montrer comment ajouter une interface utilisateur pour les shortcodes dans WordPress avec Shortcake.
Qu’est-ce que le Shortcake ?
WordPress offre un moyen plus simple d'ajouter du code exécutable dans les publications et les pages en utilisant des codes courts. De nombreux thèmes et plugins WordPress permettent aux utilisateurs d'ajouter des fonctionnalités supplémentaires à l'aide de shortcodes. Cependant, ces shortcodes peuvent parfois devenir compliqués lorsqu'un utilisateur doit saisir des paramètres de personnalisation.
Par exemple, dans un thème WordPress typique, s’il existe un shortcode pour saisir un bouton, l’utilisateur devra probablement ajouter au moins deux à cinq paramètres. Comme ça:
Shortcake est un plugin WordPress et une future fonctionnalité WordPress proposée. Il vise à résoudre ce problème en fournissant une interface utilisateur pour saisir ces valeurs. Cela rendra les shortcodes beaucoup plus faciles à utiliser.
Commencer
Ce tutoriel est destiné aux utilisateurs novices dans le développement WordPress. Les utilisateurs débutants qui aiment peaufiner leurs thèmes WordPress trouveront également ce didacticiel utile.
Cela dit, commençons.
La première chose que vous devez faire est d’installer et d’activer le plugin Shortcake (Shortcode UI).
Vous aurez maintenant besoin d'un shortcode qui accepte quelques paramètres de saisie utilisateur. Si vous avez besoin d’un petit rappel, voici comment ajouter un shortcode dans WordPress.
Pour les besoins de ce didacticiel, nous utiliserons un simple shortcode qui permet aux utilisateurs d'insérer un bouton dans leurs articles ou pages WordPress. Voici l’exemple de code de notre shortcode, et vous pouvez l’utiliser en l’ajoutant au fichier de fonctions 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 publications et pages :
[cta-button title="Télécharger maintenant" url="http://example.com"]
Maintenant que nous avons un shortcode qui accepte les paramètres, créons une interface utilisateur pour celui-ci.
Enregistrement de votre interface utilisateur Shortcode avec Shortcake
L'API Shortcake vous permet d'enregistrer l'interface utilisateur de votre shortcode. Vous devrez décrire les attributs acceptés par votre shortcode, les types de champs de saisie et les types de publication qui afficheront l'interface utilisateur du shortcode.
Voici un exemple d’extrait de code 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 le coller dans le fichier de fonctions 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 une publication. Cliquez simplement sur le bouton Ajouter un média au-dessus d'un éditeur de publication. Cela fera apparaître le téléchargeur multimédia où vous remarquerez un nouvel élément « Insérer un élément de publication » dans la colonne de gauche. En cliquant dessus, vous verrez un bouton pour insérer votre code.
En cliquant sur la vignette contenant l'icône de l'ampoule et l'étiquette de votre shortcake, vous verrez l'interface utilisateur du shortcode.
Ajout de shortcode avec plusieurs entrées
Dans le premier exemple, nous avons utilisé un shortcode très basique. Rendons maintenant les choses un peu plus compliquées et beaucoup plus utiles. Ajoutons un shortcode qui permet aux utilisateurs de choisir une couleur de bouton.
Nous allons d’abord ajouter le shortcode. Il s'agit presque du même shortcode, sauf qu'il exclut désormais les entrées de l'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>';
}
Étant donné que 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, l’étape suivante 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 que 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 de publication ».
En cliquant sur votre shortcode nouvellement créé, vous ferez apparaître l'interface utilisateur du shortcode, où vous pourrez simplement saisir les valeurs.
Vous pouvez télécharger le code utilisé dans ce tutoriel sous forme de plugin.
tutoriel-wpb-shortcake
Nous avons inclus le CSS afin que vous puissiez 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 jeter un œil à ces 7 conseils essentiels pour utiliser les shortcodes dans WordPress.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.