WordPress Shortcodes – Le guide complet – Partie 2

Dans la partie précédente de notre guide complet sur les shortcodes wordpress, nous vous avons montré comment mettre en place des shortcodes dans vos thèmes WordPress. Du plus simple aux shortcodes avec paramètres et bouton associés à l’éditeur visuel. Aujourd’hui, nous allons un peu plus loin en vous présentant quelques cas concrets d’implémentation de shortcodes.

Quelques exemples de shortcodes wordpress utiles

Bouton sous forme de lien

Cet exemple simple mais qui peut se révéler utile, vous permettra d’afficher un lien comme un bouton :

function linkbutton_function( $atts, $content = null ) {
   return '<button type="button">'.do_shortcode($content).'</button>';
}
add_shortcode('linkbutton', 'linkbutton_function');

Utilisez ce shortcode de cette manière :

[linkbutton]Click Me![/linkbutton]

Et quelque chose comme ça devrait apparaître :

shortcodes10

Ce genre de code vous permettra par exemple d’intégrer les composants qui viennent avec beaucoup de frameworks HTML/CSS, comme Bootstrap ou Foundation.

Menu WordPress

Passons à un exemple plus compliqué qui ira chercher un menu WordPress :

function menu_function($atts, $content = null) {
   extract(
      shortcode_atts(
         array( 'name' => null, ),
         $atts
      )
   );
   return wp_nav_menu(
      array(
          'menu' => $name,
          'echo' => false
          )
   );
}
add_shortcode('menu', 'menu_function');

Lorsque vous appellerez ce shortcode, passez en paramètre le nom du menu que vous souhaitez afficher :

[menu name="main-menu"]

Et un menu comme celui-ci devrait apparaître dans votre contenu :

shortcode menu

Shortcodes Google Maps

Un shortcode Google maps peut s’avérer très utile, nous permettant d’ajouter une carte à notre contenu sans avoir à modifier son code source. Il vous évitera également d’avoir à installer un plugin lourd lorsque vos besoins ne sont pas très important.

function googlemap_function($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe src="'.$src.'&output=embed" height="240" width="320"></iframe>';
}
add_shortcode("googlemap", "googlemap_function");

Pour utiliser ce shortcode, donnez lui les paramètres de largeur et de hauteur, ainsi que le lien de la carte Google Maps :

[googlemap width="600" height="300" src="http://maps.google.com/maps?q=Heraklion,+Greece&hl=en&ll=35.327451,25.140495&spn=0.233326,0.445976& sll=37.0625,-95.677068&sspn=57.161276,114.169922& oq=Heraklion&hnear=Heraklion,+Greece&t=h&z=12"]

Voilà le résultat escompté :

shortcode google maps

Vous pouvez également modifier le code donné pour n’avoir à entrer que l’adresse ou la longitude et la latitude de votre emplacement. Il faudra alors penser à ajouter les fichiers nécessaires à l’utilisation de l’API de Google Maps.

Un bon exemple est la classe proposée par J.Schnittger :

class GoogleMap_Shortcode {

 static $api_key = false;

static function init() {
 add_shortcode('map', array(__CLASS__, 'render_shortcode'));
 add_action('wp_footer', array(__CLASS__, 'enqueue_map_javascript'));
 }

static function render_shortcode($atts) {
 extract( shortcode_atts( array(
 'api_key' => false,
 'id' => 'map-canvas-1',
 'class' => '',
 'zoom' => '18',
 'coords' => '53.339381, -6.260405',
 'type' => 'roadmap',
 'width' => '480px',
 'height' => '480px'
 ), $atts ) );

 if(!self::$api_key && $api_key) {
 self::$api_key = $api_key;
 }

 $return = "";

 $map_type_id = "google.maps.MapTypeId.ROADMAP";

 switch ($type) {
 case "roadmap":
 $map_type_id = "google.maps.MapTypeId.ROADMAP";
 break;
 case "satellite":
 $map_type_id = "google.maps.MapTypeId.SATELLITE";
 break;
 case "hybrid":
 $map_type_id = "google.maps.MapTypeId.HYBRID";
 break;
 case "terrain":
 $map_type_id = "google.maps.MapTypeId.TERRAIN";
 break;
 }

 if(self::$api_key) {
 $return = '</pre>
<div class="map-canvas '.$class.'" id="'.$id.'" style="width: '.$width.'; height: '.$height.';"></div>
<pre>
';

 $return .= '<script type="text/javascript">// <![CDATA[
';
 $return .= 'jQuery(document).on("ready", function(){ ';
 $return .= 'var options = { center: new google.maps.LatLng('.$coords.'),';
 $return .= 'zoom: ' . $zoom . ', mapTypeId: ' . $map_type_id . ' };';
 $return .= 'var map = new google.maps.Map(document.getElementById("'.$id.'"), options);';
 $return .= 'var marker = new google.maps.Marker({ position: new google.maps.LatLng('.$coords.'), map: map });';
 $return .= '});
// ]]></script>';

 } else {
 $return = "</pre>
<div>
Please specify your Google Maps API key</div>
<pre>
";
 }

 return $return;
 }
 static function enqueue_map_javascript() {
 if ( ! self::$api_key )
 return;

wp_enqueue_script( 'map-js',
 "https://maps.googleapis.com/maps/api/js?key=" . self::$api_key . "&sensor=true",
 "jquery"
 );
 }
}

GoogleMap_Shortcode::init();

Pour l’utiliser, n’oubliez pas d’y renseigner votre clé d’API :

[map api_key="INSERT YOUR API KEY"]
[map api_key="INSERT YOUR API KEY" id="map-2" coords="52.339381, -4.260405"]
[map api_key="INSERT YOUR API KEY" id="map-2" coords="52.339381, -4.260405" zoom="5" type="satellite"]

Vous pouvez maintenant intégrer simplement vos cartes !

Google Charts

Une autre service bien pratique, et toujours de Google, est Google Charts. Voilà un exemple de shortcode avec de nombreux attributs :

function chart_function( $atts ) {
extract(shortcode_atts(array(
'data' => '',
'chart_type' => 'pie',
'title' => 'Chart',
'labels' => '',
'size' => '640x480',
'background_color' => 'FFFFFF',
'colors' => '',
), $atts));

switch ($chart_type) {
case 'line' :
$chart_type = 'lc';
break;
case 'pie' :
$chart_type = 'p3';
break;
default :
break;
}

$attributes = '';
$attributes .= '&chd=t:'.$data.'';
$attributes .= '&chtt='.$title.'';
$attributes .= '&chl='.$labels.'';
$attributes .= '&chs='.$size.'';
$attributes .= '&chf='.$background_color.'';
$attributes .= '&chco='.$colors.'';

return '<img title="'.$title.'" alt="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$chart_type.''.$attributes.'" />';
}
add_shortcode('chart', 'chart_function');

Pour créer un diagramme « camembert » avec 4 types de données, utilisez par exemple les lignes suivantes :

[chart type="pie" title="Example Pie Chart" data="41.12,32.35,21.52,5.01" labels="First+Label|Second+Label|Third+Label|Fourth+Label" background_color="FFFFFF" colors="D73030,329E4A,415FB4,DFD32F" size="450x180"]

Le résultat devrait être le suivant :

shortcode google chart

Intégration de PDF

Nous pouvons utiliser le visionneur Google Docs PDF pour intégrer un document PDF dans notre site. Voilà le shortcode à créer :

function pdf_function($attr, $url) {
extract(shortcode_atts(array(
'width' => '640',
'height' => '480'
), $attr));
return '<iframe style="width: ' .$width. '; height: ' .$height. ';" src="http://docs.google.com/viewer?url=' . $url . '&embedded=true" height="240" width="320"></iframe>';
}
add_shortcode('pdf', 'pdf_function');

Pour l’utiliser, ajoutez le shortcode [pdf] dans votre contenu et passez lui l’URL du document comment contenu (souvenez-vous, il y a 2 manières de définir des arguments, la première est de les ajouter dans la balise elle-même, et l’autre entre les balises, en contenu) :

[pdf width="520px" height="700px"]http://static.fsf.org/common/what-is-fs-new.pdf[/pdf]

Lorsque vous visionnerez votre page, vous obtiendrez ce résultat :

Intégration de présentation Slideshare

De la même manière, il peut-être intéressant d’ajouter une présentation Slideshare à son contenu. Voilà le code à ajouter pour créer ce shortcode :

function slideshare_function($attr, $url) {
extract(shortcode_atts(array(
'width' => '640',
'height' => '480'
), $attr));
return '<iframe style="border: 1px solid #CCC; border-width: 1px 1px 0; margin-bottom: 5px;" src="' . $url . '" height="240" width="320" allowfullscreen="" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>';
}
add_shortcode('slideshare', 'slideshare_function');

Attention cependant, si vous utilisez le plugin Jetpack, n’utilisez pas ce code, le plugin en contient déjà un avec le même shortcode. Il en possède d’ailleurs plusieurs très pratiques, et vous pouvez en savoir plus sur la page de documentation de Jetpack.

A suivre

Voilà tout pour ce guide. En espérant qu’il vous aura été utile. N’hésitez pas à poser toutes vos questions en commentaire ou par mail.

M

Mat_

Au départ on sort avec un diplôme d’ingénieur de l’ESIL (devenu Polytech’Marseille) en Informatique, réseau et multimédia, spécialisé dans les Systèmes d’Informations et Services E-Business. En même temps on bosse, on développe, on apprend. Et maintenant on entreprend.Passionné de nouvelles technologies, et évangéliste de WordPress, j’aime découvrir, tester, rechercher.

Vous aimerez aussi...

2 réponses

  1. 18 octobre 2013

    […] Suite et fin de notre guide sur les shortcodes wordpress. Des exemples concrets et des idées pour améliorer l'expérience de vos utilisateurs. WP Shortcodes.  […]

  2. 21 octobre 2013

    […] Dans la partie précédente de notre guide complet sur les shortcodes wordpress, nous vous avons montré comment mettre en place des shortcodes dans vos thèmes WordPress.  […]

Suivez Kune.fr sur les réseaux sociaux !

Kune.fr est votre site de ressources web. Vous y trouverez de nombreux outils utiles pour le web.
Alors n'hésitez plus, aimez notre page !

  • Ressources Wordpress, tutoriels, plugins et thèmes
  • Ressources design, packs d'icônes, kits UI ...
Fermer cette popup
%d blogueurs aiment cette page :