Premiers pas avec WordPress Shortcodes et exemples d'extraits

Les shortcodes WordPress ont été introduits dans la version 2.5 et vous aident à créer des codes macro à utiliser dans votre contenu. Si vous y réfléchissez, c'est un excellent moyen de créer quelque chose comme un spot publicitaire dynamique ou un bouton d'appel à l'action dans vos publications.

Si nous utilisons l'exemple d'appel à l'action, vous pouvez ajouter quelque chose comme ceci à votre article de blog pour afficher le bouton, puis modifier la sortie dans votre fichier templates functions.php, auquel nous reviendrons dans une minute.

 [button]

Pour personnaliser le bouton, nous pourrions simplement ajouter quelque chose comme :

 [button type="twitter"]

Ou pour le rendre encore meilleur, nous pourrions utiliser un shortcode englobant :

 [button type="twitter"]Follow me on Twitter![/button]

Avec un peu d'imagination, vous vous rendez vite compte du potentiel des shortcodes et de ce qu'on peut en faire. Dans cet article, je vais vous montrer comment créer et utiliser ces trois différents types de shortcodes, puis je vous montrerai quelques shortcodes prêts à l'emploi à utiliser sur votre propre site WordPress.

Créer un shortcode à fermeture automatique

Le shortcode le plus simple est celui à fermeture automatique. Nous allons créer un simple lien vers notre compte Twitter, puis l'ajouter à un article de blog.

Tout le code va dans functions.php , qui se trouve dans /wp-content/themes/your-theme/ . Si vous n'en avez pas, créez-le et insérez-y le code.

 <?php function button_shortcode() { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follow me on Twitter!</a>"'; } add_shortcode('button', 'button_shortcode'); ?>

Usage:

 [button]

En utilisant simplement la fonction add_shortcode() , nous pouvons lier n'importe quelle fonction PHP à notre shortcode. Dans cet exemple simple, tout ce que nous faisons est de renvoyer un lien vers notre compte Twitter, mais allons un peu plus loin et ajoutons quelques paramètres.

Créer un shortcode à fermeture automatique avec des paramètres

Shortcode prend en charge les paramètres, ce qui nous permet de personnaliser la sortie. Dans cet exemple, nous avons deux boutons différents, nous devons donc définir quel bouton nous voulons afficher.

 <?php function button_shortcode($type) { extract(shortcode_atts(array( 'type' => 'type' ), $type)); // check what type user entered switch ($type) { case 'twitter': return '<a href="http://twitter.com/filipstefansson" class="twitter-button">Follw me on Twitter!</a>'; break; case 'rss': return '<a href="http://example.com/rss" class="rss-button">Subscribe to the feed!</a>' break; } } add_shortcode('button', 'button_shortcode'); ?>

Vous pouvez maintenant choisir le bouton à afficher en définissant type dans votre shortcode.

 [button type="twitter"] [button type="rss"]

C'est bien. Et si nous voulions changer le texte ? Nous pourrions continuer à ajouter des types de codes courts comme [button type="twitter-2"] et ainsi de suite, mais ce n'est pas très dynamique, n'est-ce pas ? Voyons comment faire cela de la bonne manière.

Création d'un shortcode englobant

Le shortcode englobant vous permet d'intégrer du contenu dans votre shortcode, tout comme le BBCode si vous l'avez déjà utilisé.

 <?php function button_shortcode( $attr, $content = null ) { return '<a href="http://twitter.com/filipstefansson" class="twitter-button">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Pour utiliser ce shortcode, vous intégrez le texte que vous souhaitez utiliser comme ceci :

 [button]Follow me on Twitter![/button]

Pour rendre ce bouton encore meilleur, nous pourrions ajouter des paramètres comme nous l'avons fait dans l'exemple précédent. Ajoutons cette fois deux paramètres, un pour le nom d'utilisateur Twitter et un pour le style de bouton. Ensuite, nous pouvons avoir différents types de boutons et choisir à quel compte Twitter nous voulons lier le bouton.

 <?php function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'account' => 'account', 'style' => 'style' ), $atts ) ); return '<a href="http://twitter.com/' . esc_attr($account) . '" class="twitter-button ' . esc_attr($style) . '">' . $content . '</a>'; } add_shortcode('button', 'button_shortcode'); ?>

Usage:

 [button account="filipstefansson" style="simple"]Follow me on Twitter![/button] // Result: <a href="http://twitter.com/filipstefansson" class="twitter-button simple">Follow me on Twitter!</a>

Nous avons maintenant un bouton personnalisable que nous pouvons lier à n'importe quel compte Twitter. Comme je suis sûr que vous le comprenez, vous pouvez créer des shortcodes beaucoup plus avancés que cela, mais c'est un bon début.

Shortcodes dans les widgets et les fichiers de modèle

Maintenant que vous avez vu la puissance des shortcodes, vous vous demandez probablement pourquoi vous ne pouvez pas les utiliser dans vos widgets et vos fichiers de modèles. Eh bien, il s'avère que vous le pouvez.

Pour activer les shortcodes dans vos widgets, il suffit de mettre le code suivant dans functions.php :

 add_filter('widget_text', 'do_shortcode')

Et pour utiliser un shortcode dans vos fichiers modèles, vous pouvez y accéder en utilisant :

 do_shortcode("[button]");

Shortodes prêts à l'emploi

Voici quelques codes abrégés sympas que vous pouvez implémenter immédiatement.

Code dans les publications

Si vous gérez un blog axé sur la programmation, vous souhaiterez probablement afficher du code dans vos articles.

 function code_shortcode( $attr, $content = null ) { $content = clean_pre($content); // Clean pre-tags return '<pre"><code>' . str_replace('<', '<', $content) . // Escape < chars '</code></pre>'; } add_shortcode('code', 'code_shortcode');

Usage:

 [code]<?php echo 'Hello World!'; ?>

Intégrez Adsense n'importe où sur vos messages

Avec ce shortcode, vous pouvez ajouter une annonce Google n'importe où sur vos publications simplement en utilisant [adsense] .

 function showads() { return '<script type="text/javascript"><!-- google_ad_client = "pub-3637220125174754"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> '; } add_shortcode('adsense', 'showads');

Intégrer une vidéo YouTube

Ce shortcode vous permettra d'intégrer des vidéos YouTube dans vos articles de blog.

 function youtube($atts) { extract(shortcode_atts(array( "value" => 'http://', "width" => '475', "height" => '350', "name"=> 'movie', "allowFullScreen" => 'true', "allowScriptAccess"=>'always', "controls"=> '1', ), $atts)); return '<object style="height: '.$height.'px; width: '.$width.'px"><param name="'.$name.'" value="'.$value.'"><param name="allowFullScreen" value="'.$allowFullScreen.'"><param name="allowScriptAccess" value="'.$allowScriptAccess.'"><embed src="'.$value.'" type="application/x-shockwave-flash" allowfullscreen="'.$allowFullScreen.'" allowScriptAccess="'.$allowScriptAccess.'" width="'.$width.'" height="'.$height.'"></object>'; } add_shortcode("youtube", "youtube");

Usage:

 // Optional attributes: width, height, name, allowFullScreen, allowScriptAccess, controls [youtube value="http://www.youtube.com/watch?v=1aBSPn2P9bg"]

Shortcode de don Paypal

Il s'agit d'un shortcode qui vous aide à créer des liens de don vers votre compte Paypal.

 function donate_shortcode( $atts, $content = null) { global $post;extract(shortcode_atts(array( 'account' => 'your-paypal-email-address', 'for' => $post->post_title, 'onHover' => '', ), $atts)); if(empty($content)) { $content='Make A Donation'; } return '<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&business='.$account.'&item_name=Donation for '.$for.'" title="'.$onHover.'">'.$content.'</a>'; } add_shortcode('donate', 'donate_shortcode');

Usage:

 [donate] [donate]Donate Now[/donate] [donate account="[email protected]" onHover="Thanks" for="Title"] [donate account="[email protected]" onHover="Thanks" for="Title"]Donate Now[/donate]

Note privée aux auteurs

Ce dernier est astucieux. Avec ce shortcode, vous pouvez créer des notes dans vos messages que seuls les auteurs peuvent voir.

 function sc_note( $atts, $content = null ) { if ( current_user_can( 'publish_posts' ) ) return '<div class="note">'.$content.'</div>'; return ''; } add_shortcode( 'note', 'sc_note' );

Conclusion

Après avoir lu cet article, j'espère que vous aimez les shortcodes WordPress autant que moi, et j'espère que vous commencerez à les implémenter dans votre propre blog.