Présents depuis la version 2.5 de WordPress, les shortcodes sont des raccourcis qui permettent d’afficher de nombreux éléments dans vos publications en ajoutant un code très court entre braquettes. Dans cet article, vous découvrirez une partie de la puissance des shortcodes!
Comment fonctionnent les shortcodes dans WordPress
Il existe déjà des centaines d’articles de qualité qui parlent des shortcodes. Si vous êtes novice en la matière, il vous sera utile de lire ceci :
Concernant cet article, les codes doivent être collés dans le fichier functions.php de votre thème WordPress. Ensuite, utilisez simplement le code comme il est présenté.
1 – Afficher les articles reliés
Afficher les articles parlant du même sujet est un bon moyen pour que les visiteurs restent plus longtemps sur votre site. Il existe bien évidemment des tas d’extensions qui permettent l’affichage de ces articles, mais pourquoi ne pas considérer l’utilisation d’un simple code ?
function related_posts_shortcode( $atts ) {
extract(shortcode_atts(array(
'limit' => '5',
), $atts));
global $wpdb, $post, $table_prefix;
if ($post->ID) {
$retval = '<ul>';
// Get tags
$tags = wp_get_post_tags($post->ID);
$tagsarray = array();
foreach ($tags as $tag) {
$tagsarray[] = $tag->term_id;
}
$tagslist = implode(',', $tagsarray);
// Do the query
$q = "SELECT p.*, count(tr.object_id) as count
FROM $wpdb->term_taxonomy AS tt, $wpdb->term_relationships AS tr, $wpdb->posts AS p WHERE tt.taxonomy ='post_tag' AND tt.term_taxonomy_id = tr.term_taxonomy_id AND tr.object_id = p.ID AND tt.term_id IN ($tagslist) AND p.ID != $post->ID
AND p.post_status = 'publish'
AND p.post_date_gmt < NOW()
GROUP BY tr.object_id
ORDER BY count DESC, p.post_date_gmt DESC
LIMIT $limit;";
$related = $wpdb->get_results($q);
if ( $related ) {
foreach($related as $r) {
$retval .= '<li><a title="'.wptexturize($r->post_title).'" href="'.get_permalink($r->ID).'">'.wptexturize($r->post_title).'</a></li>';
}
} else {
$retval .= '
<li>No related posts found</li>';
}
$retval .= '</ul>';
return $retval;
}
return;
}
add_shortcode('related_posts', 'related_posts_shortcode');
Utilisation :
[related_posts]
2 – Afficher les graphiques de Google Charts
L’utilisation de l’API de Google Charts est probablement le moyen le plus simple pour créer des graphiques dynamiques en ligne. Ici, vous trouverez un shortcode qui permet de rendre la procédure encore plus simple.
function chart_shortcode( $atts ) {
extract(shortcode_atts(array(
'data' => '',
'colors' => '',
'size' => '400x200',
'bg' => 'ffffff',
'title' => '',
'labels' => '',
'advanced' => '',
'type' => 'pie'
), $atts));
switch ($type) {
case 'line' :
$charttype = 'lc'; break;
case 'xyline' :
$charttype = 'lxy'; break;
case 'sparkline' :
$charttype = 'ls'; break;
case 'meter' :
$charttype = 'gom'; break;
case 'scatter' :
$charttype = 's'; break;
case 'venn' :
$charttype = 'v'; break;
case 'pie' :
$charttype = 'p3'; break;
case 'pie2d' :
$charttype = 'p'; break;
default :
$charttype = $type;
break;
}
if ($title) $string .= '&chtt='.$title.'';
if ($labels) $string .= '&chl='.$labels.'';
if ($colors) $string .= '&chco='.$colors.'';
$string .= '&chs='.$size.'';
$string .= '&chd=t:'.$data.'';
$string .= '&chf='.$bg.'';
return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');
Utilisation :
[chart data="41.52,37.79,20.67,0.03" bg="F7F9FA" labels="Reffering+sites|Search+Engines|Direct+traffic|Other" colors="058DC7,50B432,ED561B,EDEF00" size="488x200" title="Traffic Sources" type="pie"]
3 – Intégrer les publicités Adsense
Adsense est certainement un des moyens les plus populaires lorsque vous créez un blog WordPress. En utilisant des widgets, vous pouvez facilement ajouter des pubs Adsense dans une colonne de votre site. La meilleure façon pour recevoir des clics de la part de vos visiteurs est d’intégrer les publicités Adsense au sein de vos articles. La procédure est extrêmement simple en utilisant les shortcodes de WordPress.
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');
Utilisation :
[adsense]
4 – Afficher les infos des membres
Depuis quelques mois, de plus en plus de blogs ont créé des sections visibles uniquement pour les « membres », permettant l’accès à des documents ou des infos payantes. Savez-vous comment il est simple d’afficher du contenu réservé aux membres en utilisant un shortcode ?
function access_check_shortcode( $attr, $content = null ) {
extract( shortcode_atts( array( 'capability' => 'read' ), $attr ) );
if ( current_user_can( $capability ) & !is_null( $content ) & !is_feed() )
return $content;
return 'Sorry, only registered members can see this text.';
}
add_shortcode( 'access', 'access_check_shortcode' );
Utilisation:
[access capability="switch_themes"]
5 – Intégration d’un lecteur de flux RSS
WordPress a son propre lecteur RSS qui est utilisé pour afficher les flux de votre site sur votre tableau bord. Je vous indique seulement comment vous pouvez l’utiliser dans une colonne de votre blog (ou dans le footer, le header, etc.) mais avec un shortcode, vous pouvez même l’insérer dans vos articles.
//This file is needed to be able to use the wp_rss() function.
include_once(ABSPATH.WPINC.'/rss.php');
function readRss($atts) {
extract(shortcode_atts(array(
"feed" => 'http://',
"num" => '1',
), $atts));
return wp_rss($feed, $num);
}
add_shortcode('rss', 'readRss');
Utilisation :
[rss feed="http://feeds2.feedburner.com/wppourlesnuls" num="5"]
6 – Création automatique d’une adresse raccourcie pour Twitter
Si vous êtes actif sur Twitter, vous savez déjà combien les url sont importantes. Il est très ennuyant de devoir raccourcir une url par vous même lorsque vous voulez tweeter le lien d’un blog. Alors pourquoi ne pas utiliser un shortcode pour rendre la vie plus simple à vos lecteurs ?
function subzane_shorturl($atts) {
extract(shortcode_atts(array(
'url' => '',
'name' => '',
), $atts));
$request = 'http://u.nu/unu-api-simple?url=' . urlencode($url);
$short_url = file_get_contents($request);
if (substr($short_url, 0, 4) == 'http') {
$name = empty($name)?$short_url:$name;
return '<a href="'.$short_url.'">'.$name.'</a>';
} else {
$name = empty($name)?$url:$name;
return '<a href="'.$url.'">'.$name.'</a>';
}
}
add_shortcode('shorturl', 'subzane_shorturl');
Utilisation:
[shorturl name="shortcode" url="http://codex.wordpress.org/Shortcode_API"]
7 – Afficher la dernière image ajoutée à l’article
Au lieu de devoir gérer des url d’images, un simple shortcode peut retrouver et afficher automatiquement la dernière image jointe à l’article.
function sc_postimage($atts, $content = null) {
extract(shortcode_atts(array(
"size" => 'thumbnail',
"float" => 'none'
), $atts));
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() );
foreach( $images as $imageID => $imagePost )
$fullimage = wp_get_attachment_image($imageID, $size, false);
$imagedata = wp_get_attachment_image_src($imageID, $size, false);
$width = ($imagedata[1]+2);
$height = ($imagedata[2]+2);
return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';
}
add_shortcode("postimage", "sc_postimage");
Utilisation:
[postimage]
8 – Ajouter des commentaires d’administrateur aux articles
Si vous êtes le propriétaire d’un blog multi-auteurs, il vous sera utile de pouvoir laisser des messages aux autres auteurs concernant les articles. Par exemple, le propriétaire du blog peut vouloir laisser un commentaire indiquant à l’auteur qu’il reste des erreurs à corriger sur l’un de ses articles.
add_shortcode( 'note', 'sc_note' );
function sc_note( $atts, $content = null ) {
if ( current_user_can( 'publish_posts' ) )
return '<div class="note">'.$content.'</div>';
return '';
}
Utilisation:
[note]Voici une notre personnelle seulement visible par l'administrateur![/note]
9 – Empêcher le formatage automatique de WordPress
Si vous avez l’habitude d’afficher des bouts de code snippets sur votre blog, vous savez que le formatage automatique de WordPress peut être fatiguant. La solution est simple : Utilisez un shortcode pour empêcher la fonction d’auto-formatage sur certaines parties de texte.
function my_formatter($content) {
$new_content = '';
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'my_formatter', 99);
Utilisation:
[raw]Cette portion de texte de sera pas formatée automatiquement par WordPress.[/raw]
10 – Afficher les statistiques de votre blog
Aimeriez-vous afficher les statistiques de votre site en temps réel sur celui-ci ? Grâce à Wesley et à son extension « Blog Stats » proposant différents shortcodes, vous pourrez afficher vos informations analytiques telles que le nombre d’articles, le nombre de commentaires, la moyenne des commentaires par article, le PageRank sur Google, le classement sur Alexa, etc.
L’extension Blog Stats peut être téléchargée ici et installée sur votre blog de la même façon que vous installez n’importe quelle autre extension.
[pagerank] [feedburner_subscribers] [alexa_rank] [technorati_authority] [technorati_rank] [user_count] [post_count] [page_count] [comment_count] [trackback_count] [avg_comments_per_post] [category_count] [tag_count] [link_count] [google_backlinks] [yahoo_backlinks] [delicious_bookmarks] Sources : CatsWhoCode et ImproveTheWeb
Jeu de briques
Snake
Pacman
Bubble