5 Shortcodes Wordpress super pratiques

5 Shortcodes WordPress super pratiques

Posté le 10 avril 2009 par Stephane ˑ 0 Commentaire ˑ Mots-clefs :shortcode, Wordpress

1.Définition

Les shortcodes WordPress sont de simples jeux de fonctions pour créer des macro-commandes pouvant être insérées dans les articles. Il sont de cette forme :

[shortcode]

On distingue deux types de shortcodes :

Si l’on se place du point de vue d’un utilisateur, les shortcodes peuvent prendre plusieurs formes:

Balise seule, avec ou sans paramètre : [hello],
Balise englobante, avec ou sans paramètre: [afficher_message type="error"]Ceci est le message d’erreur[/afficher_message].

La construction de nouveaux shortcode s’effectue en deux étapes:

Ecriture de la fonction proprement dite,
Déclaration ou enregistrement de cette fonction.

a. Ecriture de la fonction

La première forme de shortcodes à une déclaration ressemblant à ceci :

function shortcode_func($atts){
 
    extract(shortcode_atts(array(
        'parameter 1' => 'valeur 1',
        'parameter 2' => 'valeur 2'
		 ... ...
    ), $atts));
 
    $output = ' ... ... ';
    return $output;
}

et la seconde comme ceci :

function shortcode_func($atts, $content = null){
 
    if ( is_null($content) )
    return false;
 
    extract(shortcode_atts(array(
        'parameter 1' => 'valeur 1',
        'parameter 2' => 'valeur 2',
        ...
    ), $atts));
 
	$output = ' ... ... '. do_shortcode($content).' ... ... ';
    return $output;
}

b. Déclaration des fonctions

La déclaration des fonctions précédentes se fait grâce à la commande

 add_shortcode(’shortcode_name’, ‘shortcode_func’);

2. Quelques shortcodes pratiques

a. Afficher des paramètres de votre blog

Pour obtenir par exemple l’url de votre blog, utliser le shortcode suivant

function bloginfo_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'cle' =>'',
    ), $atts));
    return get_bloginfo($cle);
}
add_shortcode('bloginfo', 'bloginfo_shortcode');

Par exemple [bloginfo cle="template_url"] affichera l’url de votre template.

b. Insérer des publicités adsens

function showads() {
    return '<div id="adsense"><script type="text/javascript"><!--
	google_ad_client = "pub-XXXXXXXXXXXXXX";
	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></div>';
}
 
add_shortcode('adsense', 'showads');

N »oubliez pas de remplacer le code AdSense de votre site de Google. Maintenant, vous pouvez tout simplement afficher une annonce en utilisant ce shortcode [adsense].

c. Afficher les articles relatifs à celui affiché

function related_posts_shortcode( $atts ) {
 
	extract(shortcode_atts(array(
	    'limite' => '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 $limite;";
 
		$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');

[related_posts limite="x"]

Ici le paramètre permet de définir le nombre maximum d’articles en lien avec celui affiché.

d.Afficher un graphique généré par google

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 .= '&amp;chtt='.$title.'';
	if ($labels) $string .= '&amp;chl='.$labels.'';
	if ($colors) $string .= '&amp;chco='.$colors.'';
	$string .= '&amp;chs='.$size.'';
	$string .= '&amp;chd=t:'.$data.'';
	$string .= '&amp;chf='.$bg.'';
	return '<img title="'.$title.'" src="http://chart.apis.google.com/chart?cht='.$charttype.''.$string.$advanced.'" alt="'.$title.'" />';
}
add_shortcode('chart', 'chart_shortcode');

Exemple : [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"]

Vous pouvez vous référer à la documentation Google Chart API

e.Afficher une carte google Maps

function googlemap_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'width' => '500px',
        'height' => '300px',
        'apikey' => 'REPLACEME',
        'marker' => '',
        'center' => '',
        'zoom' => '13'
    ), $atts));
 
    if ($center) $setCenter = 'map.setCenter(new GLatLng('.$center.'), '.$zoom.');';
    if ($marker) $setMarker = 'map.addOverlay(new GMarker(new GLatLng('.$marker.')));';
 
    $rand = rand(1,100) * rand(1,100);
 
    return '
    	<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key='.$apikey.'" type="text/javascript"><!--mce:0--></script>
 
	    <script type="text/javascript"><!--mce:1--></script>
    ';
 
}
add_shortcode('googlemap', 'googlemap_shortcode');

Exemple : [googlemap zoom="13" center="52.66389056542801, 0.1641082763671875" marker="52.66389056542801, 0.1641082763671875" width="488px"]

Référence :

Laisser une réponse

Billet Précédent

Billet Suivant

Tutoriels Complets

Les derniers billets

Bougez vous avec Fysiki !

Les billets les plus lus