On sait qu'en HTML, il existe deux types de balises :
Ces mêmes possibilités sont offertes avec les shortcodes :
Un shortcode avec contenu peut être intéressant lorsqu'on doit effectuer une opération sur du texte plus ou moins long.
C'est le cas du shortcode [caption] présent dans le noyau WordPress, qui a pour but d'ajouter une légende stylisée sous une image.
Pour y parvenir, ce shortcode englobe l'image et sa légende dans une division. Il faut donc trouver moyen de passer au shortcode la balise complète de l'image pour qu'elle puisse l'insérer entre le <div> et le </div>.
L'utilisation d'un paramètre serait problématique puisque la balise <img> est complexe. Les développeurs WordPress ont donc choisi d'utiliser un shortcode avec contenu.
Par exemple, si vous entrez le texte suivant dans votre page WordPress :
[caption ... caption="Légende à afficher"]<img ... />[/caption]
Le shortcode générera le code HTML suivant :
<div class="...">
<img ... />
<p class="wp-caption-text">Légende à afficher</p>
</div>
On voit donc que le contenu du shortcode (ici : <img ... />) est repris tel quel dans le bloc de code HTML généré.
La fonction de rappel d'un shortcode avec contenu recevra un second paramètre qui représente le contenu du shortcode. On pourra utiliser ce paramètre dans notre code à l'endroit approprié.
/**
* Définit un shortcode qui affiche un bouton coloré paramétrable avec contenu.
* @author Christiane Lagacé <christiane.lagace@hotmail.com>
*
* Utilisation : [monprefixeboutoncolore] ou [monprefixeboutoncoloreaveccontenu url="https://christianelagace.com" couleur="vert"]<img src="..." alt="Logo de Christiane" />Site de Christiane[/monprefixeboutoncoloreaveccontenu]
*
* @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.
* string $content Contenu du shortcode
*
* @return String Code html généré par le shortcode
*/
function monprefixe_bouton_colore_avec_contenu( $atts, $content = null ) {
$args = shortcode_atts( array(
'url' => '',
'couleur' => 'gris',
), $atts, 'monprefixeboutoncoloreaveccontenu' );
$url = $args['url'];
$couleur = $args['couleur'];
if ( empty( $content ) ) {
$content = __('Cliquez ici', 'mon-domaine-de-localisation');
}
$code_html = "<a href='$url' class='lienbouton $couleur'>$content</a>";
return $code_html;
}
add_shortcode( 'monprefixeboutoncoloreaveccontenu', 'monprefixe_bouton_colore_avec_contenu' );
ou, si le shortcode est défini dans la classe d'une extension :
class Monprefixe_Mon_Extension {
...
public function __construct() {
add_shortcode( 'monprefixeboutoncoloreaveccontenu', array( $this, 'shortcode_bouton_colore_avec_contenu' ) );
...
}
public function shortcode_bouton_colore_avec_contenu( $atts, $content = null ) {
$args = shortcode_atts( array(
'url' => '',
'couleur' => 'gris',
), $atts, 'monprefixeboutoncoloreaveccontenu' );
$url = $args['url'];
$couleur = $args['couleur'];
if ( empty( $content ) ) {
$content = __('Cliquez ici', 'mon-domaine-de-localisation');
}
$code_html = "<a href='$url' class='lienbouton $couleur'>$content</a>";
return $code_html;
}
}
Cette fois, notre shortcode peut générer un bouton avec le texte de notre choix, que ce soit un seul mot ou une série de caractères plus ou moins longue.
On pourrait même ajouter une image sur le bouton si tel était notre désir, comme dans cet exemple :
[monprefixeboutoncoloreaveccontenu url="https://christianelagace.com" couleur="vert"]<img src="..." alt="Logo de Christiane" />Site de Christiane[/monprefixeboutoncoloreaveccontenu]
Cette image représente ce que vous verriez à l'écran :
« Shortcode API - Enclosing vs self-closing shortcodes ». Codex WordPress. http://codex.wordpress.org/Shortcode_API#Enclosing_vs_self-closing_shortcodes
▼Publicité
