skip to Main Content

Comment ajouter une interface de shortcode sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Si vous développez un site WordPress pour un client, alors il est fort probable que vous ayez des shortcodes pour ce dernier. Le problème est que plusieurs débutants ne savent pas comment ajouter un shortcode et s’il y a des paramètres  ajoutés, cela devient encore plus compliqué. Shortcake fournit aux utilisateurs une solution simple pour  ajouter des shortcodes sur WordPress.

Dans ce tutoriel, je vous montrerai comment ajouter une interface de shortcodes sur WordPress pour simplifier l’ajout sur les articles et pages.

C’est quoi Shortcake ?

WordPress propose une fonctionnalité qui permet d’ajouter un code exécutable dans les article et pages via des shortcodes. Plusieurs thèmes et plugins WordPress permettent aux utilisateurs d’ajouter des fonctionnalités sur leurs blogs à l’aide de shortcodes. Cependant, ces shortcodes peuvent devenir très difficilement maniables, ce qui complique la personnalisation.

Par exemple, avec un thème de base WordPress, s’il y a un shortcode pour insérer un bouton, alors l’utilisateur devra probablement remplir près de cinq paramètres pour le shortcode comme suit :

[bouton url= »http://exemple.com » title= »En savoir plus » couleur= »purple » target= »newwindow »]

C’est la que Shortcake intervient, en ce sens où il vous permet de mieux gérer vos shortcodes.

shortcake-bakery-plugin

Premiers Pas

Ce tutoriel concerne les utilisateurs qui débutent en développement WordPress. Les utilisateurs qui aiment personnaliser leurs thèmes trouveront également ce tutoriel intéressant.

Ce que vous devez faire en premier, c’est d’installer et d’activer l’extension Shortcace (Shortcode UI).

Vous devez maintenant avoir un shortcode qui accepte quelques paramètres. Pour ce tutoriel,  nous allons créer un simple shortcode qui permet aux utilisateurs d’ajouter des boutons dans leurs articles et pages WordPress. C’est un exemple simple pour notre shortcode, et vous pourrez ajouter ce code dans votre plugin ou dans le fichier functions.php de votre child theme.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

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 aurez probablement aussi besoin d’un code CSS pour le bouton.

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

C’est ainsi que pour afficher le bouton en question, l’utilisateur devra taper le shortcode suivant :

[cta-button title= »Download Now » url= »http://example.com »]

Maintenant vous avez une shortcode qui accepte les paramètres, nous allons maintenant créer une interface pour ce dernier.

Comment enregistrer une interface pour une shortcode avec ShortCacke

l’API de Shortcake vous permet d’enregistrer les shortcodes dans l’interface utilsiateur. Vous avez besoin de décrire quels attributs le shortcode accepte, le type des champs et quel format de publication affichera l’UI (interface utilisateur).

Voici un exemple d’une portion de code que vous pouvez utiliser pour enregistrer un shortcode dans l’interface utilisateur de Shortcake.

shortcode_ui_register_for_shortcode(

/** Votre shortcode */
'cta-button',

/** Le label de votre shortcode et son icone */
array(

/** Le label est requis. */
'label' => 'Add Button',

/** Icone. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

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

/**
* Toutes les champs qui accepteront des valeurs des utilisateurs auront leur propre tableau définit comme suit.
* Ce shortcode accepte deux parametre l'URL et le titre
* Nous allons définir l'UI pour le titre. 
*/

array(

/** Ce label s'affichera sur l'interface utilisateur */
'label'        => 'Title',

/** c'est l'attribut utilisé pour le shortcode */
'attr'         => 'title',

/** Définir le type du champ, sont pris en charge : text, checkbox, textarea, radio, select, email, url, number, et date. */
'type'         => 'text',

/** Ajouter une description
'description'  => 'Description',
),

/** Nous allons maintenant definir une UI pour le champ du lien */

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

/** Le format de publication sur lequel afficher l'UI */
'post_type'     => array( 'post', 'page' ), 
)
);

C’est tout ce que vous avez à faire pour afficher le shortcode sur l’UI. Vous pouvez maintenant commencer la modification d’un article pour pouvoir utiliser le shortcode. Il vous suffit tout simplement de cliquer sur le bouton d’ajout de média. Vous verrez une nouvelle section intitulée « Insert Post Element« . En cliquant dessus, vous serez en mesure de voir les différents shortcodes que vous avez créés.

insertpostelement

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

En cliquant sur l’icône, vous verrez l’UI  qui permet de personnaliser le shortcode.

shortcodeui

Comment ajouter un shortcode avec plusieurs champs

Dans le premier exemple, nous avons utilisé un shortcode assez basique. Maintenant, nous allons rendre les choses unpeu plus compliqué et plus utile. Nous allons ajouter un shortcode qui permet aux utilisateurs de choisir la couleur du bouton.

Nous allons premièrement ajouter le shortcode. C’est sensiblement le même code que celui qui précède, la seule exception réside dans le fait que nous allons ajouter un champ 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>';
}

Etant donné que notre shortcode affiche des boutons des couleurs différentes, nous allons avoir besoin de mettre notre code CSS à jour également.

.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 pourra ressembler ce bouton.

colorful-buttons-shortcode

Maintenant que notre shortcode est prêt, la prochaine étape est de l’enregistrer sur Shortcake. Nous alllons utiliser le même code, la différence ici est que nous allons fournir un paramètre supplémentaire pour afficher un champ de couleur.

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 ! Maintenant lorsque vous modifiez ou rédigez un article, vous serez en mesure de voir le nouveau shortcode, toujours dans la même section sur la fenêtre des médias.

postelements

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

En cliquant sur le nouveau shortcode, l’interface de personnalisation du shortcode s’affichera et vous pourrez spécifier les valeurs.

colorui

C’est tout pour ce tutoriel. J’espère qu’il vous aidera a créer une meilleure interface pour vos shortcodes sur WordPress. Heureuse année à vous !

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
14 Partages
Partagez14
Tweetez
Enregistrer