Si vous développez un site WordPress pour un client, il est probable que vous ayez des shortcodes à utiliser par 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 fournit une solution en ajoutant une interface utilisateur pour les codes courts. 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 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, ces codes courts 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:
[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]
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 qui débutent dans le développement WordPress. Les utilisateurs de niveau débutant qui aiment peaufiner 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 Shortcake (interface utilisateur de shortcode) brancher.
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 didacticiel, nous utiliserons un simple code court qui permet aux utilisateurs d’insérer un bouton dans leurs publications ou pages WordPress. Voici l’exemple de code pour 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 ses pages :
[cta-button title="Download Now" 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 éditant un article. Cliquez simplement sur le bouton Ajouter un média au-dessus d’un éditeur de publication. Cela fera apparaître le téléchargeur de médias 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 d’ampoule et votre étiquette de 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. Maintenant, rendons 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. C’est presque le même shortcode, sauf qu’il excepte maintenant l’entrée 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 nous proposons aux utilisateurs de choisir parmi les boutons bleu, orange ou vert.
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 nouveau shortcode sous « Insérer des éléments de publication ».
En cliquant sur votre shortcode nouvellement créé, l’interface utilisateur du shortcode s’affichera, où vous pourrez simplement saisir les valeurs.
Vous pouvez télécharger le code utilisé dans ce tutoriel sous forme de plugin.
wpb-shortcake-tutoriel
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 à l’aide d’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 pouvez également jeter un œil à ces 7 conseils essentiels pour utiliser les shortcodes dans WordPress.