• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
CMS

Simplifier les shortcodes

Dans un précédent article, je vous avez présenté la création de shortcodes dans WordPress. L’article est toujours disponible ICI.
Aujourd’hui je souhaite vous présenter comment créer plusieurs shortcodes pour une même fonction.

Préambule

Pourquoi vouloir déclarer plusieurs shortcodes pour la même fonctionnalité ?
Et bien, il s’agit avant tout de faciliter la vie de l’utilisateur qui mettra à jour le site.
Bien entendu les shortcodes répondent déjà en partie à cette problématique. Mais n’oublions pas que même si les shortcodes sont pour nous très simple à appréhender, ce n’est pas forcément le cas de l’utilisateur qui devra s’en servir.
L’une des façon pour faciliter la construction des shortcodes est de réduire le nombre de paramètres que l’utilisateur devra mettre en place. Ce qui a également pour effet, de réduire la taille du shortcode à écrire. Plus court, plus simple.

Exemple

Partons d’un exemple concret. Il est assez régulier de permettre à l’utilisateur d’ajouter une vidéo provenant de youtube / dailymotion / vimeo dans son article.

Dans un premier temps, ce qui semblerai naturel de faire est de créer un shortcode « video » par exemple et de demander à l’utilisateur d’ajouter en paramètres le service demandé ainsi que l’id de la vidéo.

Ce qui nous emmènera donc à un code similaire à celui-ci :

function video_embed( $atts, $content = null) {
    extract( shortcode_atts(  array(
        'id' => '',
        'width' => '480',
        'height' => '270',
        'site' => 'youtube'
    ), $atts ) );
    switch( $site ) {
        case 'youtube':
            $src = '//www.youtube.com/embed/'. $id;
            break;
	   case 'dailymotion':
            $src = '//www.dailymotion.com/embed/video/'. $id;
            break;
        case 'vimeo':
            $src = '//player.vimeo.com/video/'. $id;
            break;
    }
    if ( $id != '' ){
        return '<iframe src="'. $src .'" width="'. $width .'" height="'. $height .'"></iframe>';
	}
    return;
}
add_shortcode( 'video', 'video_embed' );

Ce qui va nous permettre de d’appeler par exemple


pour youtube ou bien


pour dailymotion.

Pour simplifier le shortcode, nous allons utiliser la paramètre $tag. Ce qui nous permet récupérer, comme son nom l’indique, le nom du tag.
Par exemple dans un shortcode tel que :


$tag retrournera « video ».

function video_embed( $atts, $content = null, $tag ) {
    extract( shortcode_atts(  array(
        'id' => '',
        'width' => '480',
        'height' => '270'
    ), $atts ) );
    switch( $tag ) {
        case 'youtube':
            $src = '//www.youtube.com/embed/'. $id;
            break;
	   case 'dailymotion':
            $src = '//www.dailymotion.com/embed/video/'. $id;
            break;
        case 'vimeo':
            $src = '//player.vimeo.com/video/'. $id;
            break;
    }
    if ( $id != '' ){
        return '<iframe src="'. $src .'" width="'. $width. '" height="'. $height .'"></iframe>';
	}
    return;
}
add_shortcode( 'youtube', 'video_embed' );
add_shortcode( 'dailymotion', 'video_embed' );
add_shortcode( 'vimeo', 'video_embed' );

Grâce à cette petite modification l’utilisateur pourra utiliser :

[youtube id="9h1swNWgP8Q"]
[dailymotion id="x19q3h4"] 

à la place des précédents :


Conclusion

Simplifier les shortcodes pour des besoin de ce type est vraiment simple et ne demande pas plus de temps / code. Alors pourquoi s’en priver ? Cela facilitera sûrement la vie de l’utilisateur finale et il le vaut bien 😉

22/04/2014 22 MIN READ BY: Matthieu POULLIN 0 COMMENT
SHARE
LIRE LA SUITE

Matthieu POULLIN

Cordova / Phonegap: icônes et splashscreen sous Xcode 5

Symfony Live 2014 : Jour 1

VOUS POURRIEZ AIMER

CMS e-Commerce Magento : Ajouter un champ dans l’onglet « Produits associés » dans l’édition d’un produit groupé du back-office

CMS Drupal 7 – Ajouter un Splash Screen à votre site en moins de 30 minutes !

CMS WordPress – Un formulaire de login custom en Ajax

CMS Drupal 8 : formulaire d’upload et custom API

CMS WordPress : créer un thème enfant

CMS Les meilleurs modules sous Drupal 7

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect