Il est possible de rendre nos shortcodes plus flexibles en leur ajoutant des paramètres. Par exemple, le shortcode suivant :
[monprefixeboutoncolore url="https://christianelagace.com" couleur="bleu"]
permettra de générer un lien ayant l'apparence d'un bouton bleu menant vers l'URL mentionné.
La fonction de rappel d'un shortcode paramétrable recevra toujours un seul paramètre et ce, peu importe le nombre de valeurs passées dans le shortcode. Ce paramètre est en fait un tableau associatif contenant toutes les valeurs passées dans le shortcode.
/**
* Définit un shortcode qui affiche un bouton coloré paramétrable.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : [monprefixeboutoncolore] ou [monprefixeboutoncolore url="https://christianelagace.com" couleur="bleu"]
*
* @param array $atts Tableau des attributs du shortcode :
* url : url auquel le bouton mène.
* couleur : couleur de fond du bouton. Doit correspondre à une classe CSS existante.
*
* @return String Code html généré par le shortcode
*/
function monprefixe_bouton_colore( $atts ) {
...
}
add_shortcode( 'monprefixeboutoncolore', 'monprefixe_bouton_colore' );
ou, si le shortcode est défini dans la classe d'une extension :
class Monprefixe_Mon_Extension {
...
public function __construct() {
add_shortcode( 'monprefixeboutoncolore', array( $this, 'shortcode_bouton_colore' ) );
...
}
public function shortcode_bouton_colore( $atts ) {
...
}
}
Si on utilise le shortcode comme suit : [monprefixeboutoncolore url="https://christianelagace.com" couleur="bleu"], le paramètre $atts sera un tableau associatif contenant les éléments suivants :
'url' => 'https://christianelagace.com'
'couleur' => 'bleu'
Il faut fournir une valeur par défaut à chacun des paramètres du shortcode.
Pour y parvenir, on utilisera la fonction WordPress shortcode_atts(). Cette fonction reçoit deux paramètres obligatoires et un optionnel :
array(
'url' => '',
'couleur' => 'gris',
)
Notez la présence de la virgule après le dernier élément. Cette virgule est optionnelle. PHP la permet pour simplifier le travail des programmeur lorsqu'on place une paire de valeurs par ligne (avez-vous déjà oublié d'effacer la virgule après le dernier élément lors d'un copier-coller ???).
La fonction shortcode_atts() s'occupera de remplacer, pour chaque paramètre, la valeur par défaut par la valeur reçue, s'il y a lieu. On obtiendra un nouveau tableau associatif donnant la valeur à utiliser pour chaque paramètre.
L'appel à la fonction shortcode_atts() ressemblera à ceci.
$args = shortcode_atts( array(
'url' => '',
'couleur' => 'gris',
), $atts, 'monprefixeboutoncolore' );
Dans l'extrait de code précédent, nous obtenons un tableau associatif nommé $args.
Pour faciliter notre travail avec les valeurs de ce tableau, il est intéressant - mais non obligatoire - d'initialiser une variable pour chacun des éléments.
Nous avons désormais deux variables : $url et $couleur qui ont été initialisées à partir des paramètres dans le shortcode. Dans le cas où aucune valeur n'est passée pour un des paramètres, sa valeur par défaut sera utilisée.
Voilà, nous pouvons maintenant utiliser nos variables dans le code afin de générer le HTML.
/**
* Définit un shortcode qui affiche un bouton coloré paramétrable.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : [monprefixeboutoncolore] ou [monprefixeboutoncolore url="https://christianelagace.com" couleur="bleu"]
*
* @param array $atts Tableau des attributs du shortcode :
* url : url auquel le bouton mène.
* couleur : couleur de fond du bouton. Doit correspondre à une classe CSS existante.
*
* @return String Code html généré par le shortcode
*/
function monprefixe_bouton_colore( $atts ) {
$args = shortcode_atts( array(
'url' => '',
'couleur' => 'gris',
), $atts, 'monprefixeboutoncolore' );
$url = $args['url'];
$couleur = $args['couleur'];
$libelle = __( "Cliquez ici", "mon-domaine-de-localisation" );
$code_html = "<a href='$url' class='lienbouton $couleur'>$libelle</a>";
return $code_html;
}
add_shortcode( 'monprefixeboutoncolore', 'monprefixe_bouton_colore' );
ou, si le shortcode est défini dans la classe d'une extension :
class Monprefixe_Mon_Extension {
...
public function __construct() {
add_shortcode( 'monprefixeboutoncolore', array( $this, 'shortcode_bouton_colore' ) );
...
}
function shortcode_bouton_colore( $atts )
$args = shortcode_atts( array(
'url' => '',
'couleur' => 'gris',
), $atts, 'monprefixeboutoncolore' );
$url = $args['url'];
$couleur = $args['couleur'];
$libelle = __( "Cliquez ici", "mon-domaine-de-localisation" );
$code_html = "<a href='$url' class='lienbouton $couleur'>$libelle</a>";
return $code_html;
}
}
Pour que ce shortcode fonctionne, vous devrez lui associer une feuille de style.
/**
* Charge les scripts et feuilles de style propres au thème.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');
*/
function monprefixe_charger_css_js_web() {
wp_enqueue_style( 'monprefixeboutoncolore', get_stylesheet_directory_uri() . '/css/monprefixe-bouton-colore.css' );
}
add_action('wp_enqueue_scripts', 'monprefixe_charger_css_js_web');
ou, si le shortcode est défini dans une extension :
wp_enqueue_style( 'monprefixemonextension', plugins_url( 'css/mon-extension.css', __FILE__ ) );
Et voici le contenu de monprefixe-bouton-colore.css (ou mon-extension.css) qui permettra de styliser les liens transformés en boutons :
/*
Theme Name: montheme
Description: styles pour le shortcode monprefixeboutoncolore
*/
a.lienbouton {
color: #444;
border: 1px solid #BBBBBB;
border-radius: 8px;
padding: 5px 10px;
text-decoration: none;
}
a.lienbouton.gris {
background-color: #E3E3E3;
}
a.lienbouton.bleu {
background-color: #4679BD;
color: white;
}
a.lienbouton.vert {
background-color: #9EDA46;
}
Ainsi, si vous entrez le texte suivant dans une page ou un article WordPress :
[monprefixeboutoncolore]
[monprefixeboutoncolore url="https://christianelagace.com" couleur="bleu"]
[monprefixeboutoncolore url="https://christianelagace.com" couleur="vert"]
[monprefixeboutoncolore url="https://christianelagace.com" couleur="jenesaispas"]
Vous obtiendrez le résultat suivant (en réalité, les boutons seront cliquables mais il s'agit ici d'une image) :
On voit que le premier bouton, qui n'a pas reçu de paramètre, utilise les valeurs par défaut.
Remarquez que puisque la dernière couleur n'est pas définie dans le CSS, aucune couleur de fond n'est utilisée, ce qui donne un bouton blanc.
▼Publicité
