Les ShortCodes WordPress sont souvent par les plugins ou les thèmes afin d’apporter des fonctionnalités, sans avoir à besoin de modifier vos fichiers template. Il vous faut simplement saisir le shortcode directement dans votre billet. Certains plugins ou thèmes utilisent ces shortcodes pour afficher un calendrier, faire des annonces alors que d’autres ajouteront un formulaire de contacte.
En gros, les WP Shortcodes, c’est de la balle mais ca ne vous dispense pas de la lecture de notre Guide Complet pour le Référencement WordPress.
Vous êtes un développeur plugin ou template WordPress et souhaitez utiliser les shortcodes mais vous ne savez pas par où commencer ? Ce guide est fait pour vous. N’oubliez pas que des plugins Premium existent aussi pour faire ce genre de chose. Ça se passe sur notre 100% affiliation WordPress, WP-Freemium.com, pour y découvrir une sélection de Thèmes WordPress pro et plugins WordPress pro
1 – Généralité
Nous commencerons ce guide par des utilisations simple des WP Shortcode avant de voir des exemples plus complexe. Après avoir vu les exemples classiques, nous verrons des exemples réels, suivi d’idées d’utilisation et de références pour les Shortcodes.
2 – Shortcodes, les bases
La première des choses à faire, des que l’on parle développement WordPress, et d’utiliser le Codex WordPress. C’est une excellente référence et point de départ.
Les Shortcodes, comme tout dans WordPress, peuvent être crées dans votre fichier functions.php, ou directement à partir des fichiers de vos plugins.
Commençons par créer un shortcode simple, jouant sur les styles.
1 2 3 4 |
function extra_style_shortcode( $atts, $content = null ) { return '<span style="color: blue; text-decoration: underline;">' . $content . '</span>'; } add_shortcode('extra-style', 'extra_style_shortcode'); |
Cet exemple est… un exemple qui ne fait pas grand chose, mais a le mérite d’illustrer l’utilisation des shortcodes. Pour activer ce Style il vous suffit de saisir dans votre éditeur :
[extra-style]Hello World![/extra-style]
Que se passe t-il donc ? C’est simple, nous disons à WordPress que tout le texte compris dans les balises [extra-style] et [/extra-style] doit être chargé dans la variable $content, puis d’afficher la variable $content à l’intérieur d’un tag span tag.
1 2 3 4 5 6 7 |
function extra_style_shortcode( $atts, $content = null ) { extract(shortcode_atts(array( "color" => 'blue', ), $atts)); return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>'; } add_shortcode('extra-style', 'extra_style_shortcode'); |
Pour utiliser ce shortcode :
[extra-style color=red]Hello World![/extra-style]
ou :
[extra-style color=orange]Hello World![/extra-style]
CE morceau de code permet d’extraire l’information de couleur saisie par l’utilisateur :
extract(shortcode_atts(array( "color" => 'blue', ), $atts));
Au cas ou la couleur saisie ne serait pas reconnu, la couleurs bleu est définie par défaut.
Cette exemple, outre le fait d’être indispensable, vous permet d’appréhender le passage d’argument.
Encore des exemples, toujours plus complexe ?
1 2 3 4 5 6 7 8 9 |
function extra_style_shortcode( $atts, $content = null ) { extract(shortcode_atts(array( "color" => 'blue', "size" => '14px', "padding" => '0px', ), $atts)); return '<span style="color: ' . $color . '; padding: ' . $padding . '; font-size: ' . $size . '; text-decoration: underline;">' . $content . '</span>'; } add_shortcode('extra-style', 'extra_style_shortcode'); |
Utiliser ce shortcode wordpress vous permettra d’afficher votre texte sous forme de bloc.
[extra-style color=purple size=18px padding=5px]Hello World![/extra-style]
Assez d’exemples inutiles, passons aux choses sérieuses !
3 – Making an Information Box
Cet exemple de shortcode vous permettra de mettre du texte dans une jolie boite, en haut de votre billet, dans le but d’attirer l’attention de vos lecteurs.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
function box_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'color' => 'yellow', 'size' => 'medium', ), $atts ) ); return ' <style type="text/css"> .shortcode_box { padding: 2px 4px; border: 1px solid #ccc; } .yellow { background: #ffd149; color: #666; } .blue { background: #a0c5ef; color: #333; } .gray { background: #f0f0f0; color: #333; } </style> <divcolor: #339933;">. $size . ' ' . $color . '">' . $content . '</div>'; } add_shortcode('box', 'box_shortcode'); |
Maitenant, en utilisant le shortcode Box, vous pourrez mettre votre texte en exergue.
[box color=yellow]This is a message box with important information you should read.[/box]
En changeant la variable color, nous obtiendrons différentes couleurs.
Si vous avez des compétences CSS, vous pourrez aussi jouer sur la taille de cette boite de donnée.
4 – Créer un bouton de téléchargement
Le processus pour créer un bouton de téléchargement est assez similaire à ce que nous avons du faire pour créer une boite de texte. Nous allons simplement inclure le contenu dans une balise div avec quelques touchent de mise en page CSS3.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
function button_shortcode( $atts, $content = null ) { extract( shortcode_atts( array( 'color' => 'blue', 'size' => 'medium', ), $atts ) ); return ' <style type="text/css"> .shortcode_button { padding: 2px 8px; border: 1px solid #ccc; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .black { background: #ffd149; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F)); background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363); color: #f0f0f0; border-top-color: #1c1c1c; border-left-color: #1c1c1c; border-right-color: #525252; border-bottom-color: #525252; } .blue { background: #a0c5ef; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75)); background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7); color: #f0f0f0; border-top-color: #023778; border-left-color: #023778; border-right-color: #26609e; border-bottom-color: #26609e; } .large { width: 200px; } .medium { width: 120px; } .small { width: 80px; } </style> <divcolor: #339933;">. $size . ' ' . $color . '">' . $content . '</div>'; } add_shortcode('button', 'button_shortcode'); |
Nous pouvons afficher ce bouton de téléchargement en utilisant ce shortcode :
[button color=black size=medium]<a href="#">Download</a>[/button]
5 – Buttons and Boxes Together
Les shorcodes, c’est cool. Et c’est tellement bien que l’on peut les imbriquer, pour en additionner les effets.
Par exemple, ce shortcode :
[box color=blue]Amet odio amet, pellentesque elementum adipiscing sagittis enim, eu, proin placerat sed pid cum? Dictumst turpis integer. Adipiscing, porttitor scelerisque! Lorem turpis porttitor. Integer in, odio mattis ac! Nascetur augue odio in risus, arcu nunc, phasellus ultrices lectus velit, et tincidunt tristique. Integer vel pulvinar purus magnis. [button color=black size=small]<a href="#">Download[/button][/box]
Pour que cela fonctionne, il faut faire quelquechose. Par défaut, WordPress n’autorise pas l’imbrication de plusieurs shortcode. Pour activer cette fonctionnalité, ajoutez cette ligne dans votre fichier functions.php :
add_filter('the_content', 'do_shortcode');
6 – Afficher les billets associés
Un shortcode vraiment bien utile, afficher des billets associés, en comparant les tags.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
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'); |
Pour afficher cette galerie de billets associés :
[related_posts]
7 – Lettrine avec les Shortcodes
L’utilisation de lettrine permet d’apporter une touche pro.
1 2 3 4 5 6 |
function dropcap($atts, $content = null) { return ' <div>'.$content.'</div> ;'; } add_shortcode('dropcap', 'dropcap'); |
le fichier CSS:
1 2 3 4 5 6 7 |
.dropcap { display:block; float:left; font-size:50px; line-height:40px; margin:0 5px 0 0; } |
Pour l’utilisation
[dropcap]M[/dropcap]auris ut lectus erat. In ...
8 – Afficher une Page Personnalisé
Disons que nous avons crée une page personnalisé appelée News et que vous souhaitiez afficher tous les billets de ce type dans une page de type Articles.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function news_shortcode() { //The Query query_posts('post_type=news'); //The Loop if ( have_posts() ) : while ( have_posts() ) : the_post(); echo '<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>'; echo the_excerpt(); endwhile; else: endif; //Reset Query wp_reset_query(); } add_shortcode('news', 'news_shortcode'); |
Pour afficher cette liste, utilisez ce shortcode :
[news]
9 – Afficher les Billets d’une Catégorie dans une Page
Très similaire à l’exemple de shortcode ci-dessus, il nous est possible d’afficher les billets d’une catégorie donnée, à partir d’une page wordpress.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function category_shortcode( $atts ) { extract(shortcode_atts(array( 'limit' => '5', 'category' => '', ), $atts)); //The Query query_posts('category=' . $id . 'posts_per_page=' . $limit); //The Loop if ( have_posts() ) : while ( have_posts() ) : the_post(); echo '<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>'; echo the_excerpt(); endwhile; else: endif; //Reset Query wp_reset_query(); } add_shortcode('category', 'category_shortcode'); |
Pour obtenir cette liste:
[category id=# limit=5]
Pensez bien à adapter la valeur de id en fonction de la catégorie que vous souhaitez afficher.
10 – Aller plus loin avec les ShortCodes WordPress
Les exemple que nous vous avons montré pour illustrer l’utilisation des shortcodes dans wordpress sont des exemples receuilli au travers du web. Voici d’autres shortcodes intéressants à connaitre, pour entrevoir toutes les possibilité des ces derniers.
Joen Asmussen de NoScope.com a créer un shortcode pour afficher la liseuse PDF de Google dans WordPress.
Jean Baptiste, de WP-Recipes a créer un shortcode pour afficher un bouton “ReTweet” ou “TweetMeme” dans vos billets.
Justin Tadlock à créée un plugin qui vous permettra de convertir les tags de vos templates WordPress en shortcode.
11 – Des Idées de ShortCode WordPress
- Utiliser les ShortCodes pour afficher un formulaire de contacte.
- Utiliser les ShortCodes pour afficher un carte Google.
- Utiliser les ShortCodes pour afficher la bio auteur.
- Utiliser les ShortCodes pour afficher tous les éléments “sociaux”.
- Utiliser les ShortCodes pour afficher une galerie d’images.
- Utiliser les ShortCodes pour afficher un slider en jQuery.
Adaptation du billet Working with WordPress ShortCodes.
Bonjour,
J’ai testé “9 – Afficher les Billets d’une Catégorie dans une Page” et ça fonctionne très bien, merci beaucoup.
Je souhaiterai néanmoins enrichir cette fonction, en ajoutant par exemple un lien (ou bouton) “en savoir plus”
Est-ce qu’il existe une liste de ces fonctions enrichies pour les shortcodes ?
Pierre
bonjour,
si on utilise la lettrine dropcap, quand on a des extraits sur la page d’accueil ou catégorie, celle disparait comme la garder? Merci
bonjour,
j’ai suivi exactement le tuto pour le bouton telechargement et sa mrche pas
aider moi svp…merci
Bonjour, je suis sur mon premier projet de site wordpress et étant plutôt dans les choux avec le php, j’étais assez content que votre code “9 – Afficher les Billets d’une Catégorie dans une Page” semble correspondre exactement à ce que je recherche.
Je voudrais faire apparaître la dernière news d’une catégorie spécifique (je n’en utilise que 2, news et tournoi) dans une div et en suivant votre code cela semble possible d’y parvenir sauf que cela fait apparaître en tête de ma page toutes les catégories du site.
J’ai essayé avec [category id=actu limit=1] ou [category id=1 limit=1(2/3/4…)], je n’obtiens pas de différence, pourriez-vous m’aider SVP ?