Créer et utiliser les Shortcodes dans WordPress
Comment appliquer des styles aux éléments sans passer par le code ? Ce tutoriel s’adresse surtout aux webdesigner, intégrateur qui souhaite fournir à leur client des solutions toutes prêtes de mises en forme. Car si vous connaissez déjà un peu les CSS, cela n’a rien de révolutionnaire par rapport à l’attribution d’une classe ou d’une ID. En revanche cela vous permet, et a fortiori à vos clients, de gagner beaucoup de temps. Pour exemple, nous prendrons le cas d’une boîte d’information, d’un bouton d’action (téléchargement) et d’une disposition en colonne.
Les shortcodes, qu’est ce que c’est ?
Concrètement ce sont des raccourcis qui permettent d’appliquer un style à un contenu. Ils se présentent comme suit :
[nomdemonraccourci]contenu de mon bloc ou de mon élément[/nomdemonraccourci]
Ainsi le contenu de mon bloc héritera des styles que j’aurais appliqué à [nomdemonraccourci]. Pour qui connait les CSS, cela n’a rien de révolutionnaire, puisque l’équivalent est d’appliquer soit un style à un élément ou d’appeler une classe préalablement définie. Cependant pour vos clients cela peut être agréable de ne pas devoir se soucier du code source.
Quelques exemples qui peuvent être intéressants :
Créer un message d’information stylé
Dans un premier temps il faut déclarer notre raccourci dans le fichier functions.php. Vous le trouverez à la racine de votre thème.
function msginfo($atts, $content = null) { return ' <div class="msginfo">;'.$content.'</div> '; } add_shortcode('msginfo', 'msginfo');
Vous déclarez la votre fonction en lui indiquant de retourner le contenu dans un bloc ayant la classe « msginfo ».
Il vous reste à déclarer le style que vous souhaitez appliquer à votre bloc. Enregistrez les dans la feuille de style de votre thème :
.msginfo { background-color:#D1ECFF; border-color:#74C7FF; border-style:solid; border-width:1px 1px 1px 15px; color:#0E2A00; padding:15px 15px 15px 55px; }
Enfin pour utiliser votre raccourci, il vous suffit d’utiliser la syntaxe suivante :
[msginfo]Un message d'information que je souhaite mettre en valeur[/msginfo]
Résultat :
Créer un bouton de téléchargement
Un cas un petit peu plus complexe, nous allons faire passer à l’utilisateur un paramètre (une URL) dans le raccourci :
function btndl($atts, $content = null) { extract(shortcode_atts(array( "url" => ' ' ), $atts)); return '<a class="btndl" href="'.$url.'" target="_blank">'.$content.'</a>'; } add_shortcode('btndl', 'btndl');
On indique que nous attendons une paramètre URL dans le raccourci qui sera utilisé dans le rendu.
Les CSS :
a.btndl{ display: inline-block; color:#ffffff; font-weight:bold; font-size:1.2em; background : -webkit-gradient(linear, left top, left bottom, from(#88c841), to(#73b338)); background : -moz-linear-gradient(center top, #88c841, #73b338); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 5px 20px; text-align: center; text-shadow: 0px 1px 0px #6c0909; text-decoration:none; } a.btndl:hover { background : -webkit-gradient(linear, left top, left bottom, from(#73b338), to(#88c841)); background : -moz-linear-gradient(center top, #73b338, #88c841); color:#ffffff; text-decoration:underline; }
L’appel du raccourci :
[btndl url="http://fr.wordpress.org/"]Télécharger Wordpress[/btndl]
Le résultat :
Une présentation sur plusieurs colonnes
La fonction :
function one-half($atts, $content = null) { return ' <div class="one-half">'.$content.'</div> '; } function one-half_last($atts, $content = null) { return ' <div class="one-half last">'.$content.'</div> <br style="clear: both;" />'; } add_shortcode('one-half', 'one-half'); add_shortcode('one-half_last', 'one-half_last');
Les styles :
.one-half { width: 45%; margin-right: 30px; float: left; } .one-half.last { margin-right:0; }
L’appel du raccourci :
[one-half]Un contenu sur une demie colonne. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor leo ac arcu feugiat sed porttitor sapien tristique. Nunc auctor, purus id faucibus volutpat, enim sem ullamcorper sapien, ut tempor est leo posuere purus. Nunc facilisis dui id nibh bibendum commodo sed non risus. Sed quis consectetur massa.[/one-half] [one-half_last]Un autre contenu dans la colonne de droite. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor leo ac arcu feugiat sed porttitor sapien tristique. Nunc auctor, purus id faucibus volutpat, enim sem ullamcorper sapien, ut tempor est leo posuere purus. Nunc facilisis dui id nibh bibendum commodo sed non risus. Sed quis consectetur massa.[/one-half_last]
Le résultat :
En savoir plus
Cet article vous a plu ? Faîtes le savoir :
Pingback: Pixel & Cetera » Des mini-codes qui vous seront très utiles !
Pingback: Fonctionnement des shortcodes WordPress | wordbook