Un Shortcode WordPress est une fonctionnalité complexe qui va pouvoir être appelée directement depuis l'éditeur de contenu Wordpress sous la forme [nom-de_mon_shortcode].
Très pratique pour ajouter des fonctionnalités particulières et complexes à l'intérieur du contenu d'une page.
Un Shortcode connu des utilisateurs de WordPress est celui qui affiche une galerie de photos
Comment créer un ShortCode WordPress
Le code de votre Shortcode se place dans le fichier functions.php de votre thème ou dans le fichier de votre plugin.
Un shortcode simple et sans paramètres
Ci dessous un exemple simple (et inutile ..) sans paramètres, pour comprendre le principe:
function pour_exemple_func( $atts ) { return 'euh ... c'est juste pour l'exemple'; } add_shortcode( 'pour_exemple', 'pour_exemple_func' );
Si on rajoute le bout de code [pour_exemple] dans l'éditeur WordPress, on verra apparaître à son enplacement dans la page : 'euh … c'est juste pour l'exemple'
Un shortcode avec paramètres
Créons un shortcode à 4 paramètres, un titre, un texte, une lien src vers une image et un lien vers une page internet.
Ce code permet par exemple de mettre en page un bloc de contenu de format constant .
La fonction shortcode_atts, liste les paramètres du shortcode avec leurs valeurs par défaut (qui peuvent être vides)
function mon_bloc_func( $atts ) { $atts = shortcode_atts( array( 'titre' => 'Titre par défaut', 'texte' => '', 'img' => 'http://memo-web.fr/img/images-defaut.jpg', 'lien' => 'http://memo-web.fr' ), $atts, 'mon_bloc' ); return "<div class='mon_bloc_style> <a href="{$atts['lien']}"><img src="{$atts['img']}" alt="{$atts['titre']}" /> </a> <div><h3><a href="{$atts['lien']}">{$atts['titre']}</a></h3> {$atts['texte']}</div> </div>"; } add_shortcode( 'mon_bloc', 'mon_bloc_func' );
Appel du shortcode dans l'éditeur WordPress :
[mon_bloc titre="Le titre de mon bloc" texte="Le texte à afficher bla bla bla" ]
Si un paramètre n'est pas spécifié explicitement dans le shortcode (ici img et lien ), on prendra en compte sa valeur par défaut.
Laisser un commentaire
Participez-vous à la discussion?N'hésitez pas à contribuer!