À propos L’auteur

Cet article invité a été écrit par Jean-Baptiste Jung, un blogueur belge de 28 ans, qui blogue sur le développement Web sur Cats Who Code, sur WordPress àJeanEn savoir plus Surjean-Baptiste

Les shortcodes WordPress peuvent faire cela et plus encore et rendront certainement votre vie de blogueur plus facile. Dans cet article, nous allons vous montrer comment créer et utiliser des shortcodes, ainsi que fournir des shortcodes WordPress prêts à l’emploi qui amélioreront votre expérience de blogging.

Vous pouvez également jeter un œil aux articles connexes suivants:

• Shortcodes WordPress: Un Guide Complet
• Insertion de Widgets Avec des Shortcodes
• 10 Hacks de boucle WordPress utiles

Que sont les Shortcodes?

L’utilisation de shortcodes est très facile. Pour en utiliser un, créez un nouveau post (ou modifiez un existant), basculez l’éditeur en mode HTML et tapez un shortcode entre parenthèses, tel que:

Il est également possible d’utiliser des attributs avec des shortcodes. Un shortcode avec des attributs ressemblerait à ceci:

Les shortcodes peuvent également intégrer du contenu, comme indiqué ici:

Smashing Magazine

Les shortcodes sont gérés par un ensemble de fonctions introduites dans WordPress 2.5 appelé API Shortcode. Lorsqu’une publication est enregistrée, son contenu est analysé et l’API shortcode transforme automatiquement les shortcodes pour exécuter la fonction qu’ils sont destinés à exécuter.

Création d’un Shortcode simple

La chose à retenir avec les shortcodes est qu’ils sont très faciles à créer. Si vous savez écrire une fonction PHP de base, vous savez déjà comment créer un shortcode WordPress. Pour notre premier, créons le célèbre message « Bonjour, Monde ».

1. Ouvrez les fonctions.fichier php dans votre thème. Si le fichier n’existe pas, créez-le.

2. Tout d’abord, nous devons créer une fonction pour renvoyer la chaîne « Hello World ». Collez ceci dans vos fonctions.fichier php:

   function hello() { return 'Hello, World!';}

3. Maintenant que nous avons une fonction, nous devons la transformer en shortcode. Grâce à la fonction add_shortcode(), cela est très facile à faire. Collez cette ligne après notre fonction hello(), puis enregistrez et fermez les fonctions.fichier php:

   add_shortcode('hw', 'hello');

   Le premier paramètre est le nom du shortcode, et le second est la fonction à appeler.

4. Maintenant que le shortcode est créé, nous pouvons l’utiliser dans les articles de blog et sur les pages. Pour l’utiliser, il suffit de passer l’éditeur en mode HTML et de taper ce qui suit :

   Vous avez terminé! Bien sûr, c’est un shortcode très basique, mais c’est un bon exemple de la facilité avec laquelle il est possible d’en créer un.

Création de Shortcodes avancés

Comme mentionné, les shortcodes peuvent être utilisés avec des attributs, qui sont très utiles, par exemple, pour passer des arguments aux fonctions. Dans cet exemple, nous allons vous montrer comment créer un shortcode pour afficher une URL, comme vous le feriez avec les BBCodes que l’on utilise sur des forums tels que vBulletin et PHPBB.

1. Ouvrez vos fonctions.fichier php. Collez-y la fonction suivante:

   function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}

2. Transformons la fonction en shortcode:

   add_shortcode("url", "myUrl");

3. Le shortcode est maintenant créé. Vous pouvez l’utiliser sur vos publications et pages:

   WordPress recipes

   Lorsque vous enregistrez une publication, le shortcode affichera un lien intitulé « Recettes WordPress » et pointant vers http://www.wprecipes.com.

Explication du code. Pour fonctionner correctement, notre fonction shortcode doit gérer deux paramètres : $atts et $content$atts est le ou les attributs de shortcode. Dans cet exemple, l’attribut s’appelle href et contient un lien vers une URL. $content est le contenu du shortcode, intégré entre le domaine et le sous-répertoire (c’est-à-dire entre « www.example.com  » et « / sous-répertoire »). Comme vous pouvez le voir sur le code, nous avons donné des valeurs par défaut à contentcontent et $atts.

Maintenant que nous savons comment créer et utiliser des shortcodes, regardons quelques shortcodes prêts à l’emploi!

Créez un Shortcode « Envoyer à Twitter »

Le problème. Il semble que beaucoup d’entre vous aient apprécié mon hack « Envoyer à Twitter ». J’ai aussi beaucoup apprécié ce hack, mais il a un inconvénient: si vous collez le code sur votre single.fichier php, le lien « Envoyer à Twitter » sera visible sur chaque publication, ce que vous ne voudrez peut-être pas. Il serait préférable de contrôler ce hack et de pouvoir spécifier quand l’ajouter à un post. La solution est simple : un shortcode !

La solution. Ce shortcode est simple à créer. Fondamentalement, nous obtenons simplement le code du hack « Envoyer à Twitter » et le transformons en une fonction PHP. Collez le code suivant dans les fonctions.fichier php dans votre thème:

function twitt() { return '<div><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}add_shortcode('twitter', 'twitt');

Pour utiliser ce shortcode, il suffit de passer l’éditeur en mode HTML, puis de taper:

et un lien « Envoyer à Twitter » apparaîtra à l’endroit où vous avez placé le shortcode.

• Comment: Créer un bouton « envoyer ceci à twitter »
• Outils Twitter

Créer un Shortcode « S’abonner à RSS »

Le problème. Vous savez déjà qu’un très bon moyen de gagner des abonnés RSS est d’afficher une jolie boîte qui dit quelque chose comme « Abonnez-vous au flux RSS. »Mais encore une fois, nous ne voulons pas vraiment coder en dur quelque chose dans notre thème et perdre le contrôle de la façon dont il apparaît. Dans ce hack, nous allons créer un shortcode « Subscribe to RSS ». Affichez-le à certains endroits et pas à d’autres, dans des publications ou sur des pages, au-dessus ou en dessous du contenu principal, tout dépend de vous.

La solution. Comme d’habitude, nous créons une fonction, puis la transformons en shortcode. Ce code entre dans vos fonctions.fichier php. N’oubliez pas de remplacer l’URL du flux d’exemple par la vôtre!

function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}add_shortcode('subscribe', 'subscribeRss');

Coiffer la boîte. Vous avez probablement remarqué la classe rss-box qui a été ajoutée à l’élément div contenant le lien. Cela vous permet de styliser la boîte comme vous le souhaitez. Voici un exemple de styles CSS que vous pouvez appliquer à votre boîte « S’abonner à RSS ». Collez-le simplement dans le style.fichier css dans votre thème:

.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}

Insérez Google AdSense n’importe où

Le problème. La plupart des blogueurs utilisent Google AdSense. Il est très facile d’inclure du code AdSense dans un fichier de thème tel que la barre latérale.php. Mais les spécialistes du marketing en ligne qui réussissent savent que les gens cliquent davantage sur les publicités intégrées au contenu lui-même.

La solution. Pour intégrer AdSense n’importe où dans vos publications ou pages, créez un shortcode :

1. Ouvrez les fonctions.fichier php dans votre thème et collez le code suivant. N’oubliez pas de modifier le code JavaScript avec votre propre code AdSense!

   function showads() { return '<div><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');

2. Une fois que vous avez enregistré les fonctions.php, vous pouvez utiliser le shortcode suivant pour afficher AdSense n’importe où sur vos publications et pages:

   Notez que notre code AdSense est enveloppé d’un élément div adsense, nous pouvons le styliser comme nous le souhaitons dans notre style.fichier css.

Explication du code. Le code ci-dessus est utilisé simplement pour afficher des annonces AdSense. Lorsque le shortcode est inséré dans un message, il renvoie une annonce AdSense. C’est assez facile mais aussi, vous en conviendrez, un vrai gain de temps !

Sources:

• Comment: Intégrer AdSense n’importe où sur vos publications

Intégrer un lecteur RSS

Le problème. De nombreux lecteurs ont également semblé apprécier le post « 8 Hacks RSS pour WordPress » publié récemment sur le magazine Smashing. Maintenant, utilisons nos connaissances des RSS et des shortcodes pour intégrer un lecteur RSS directement dans nos publications et pages.

La solution. Comme d’habitude, pour appliquer ce hack, collez simplement le code suivant dans la fonction de votre thème.fichier php.

//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');

Pour utiliser le shortcode, tapez :

L’attribut feed est l’URL du flux à intégrer, et num est le nombre de éléments à afficher.

Obtenez des messages de la base de données WordPress avec un Shortcode

Le problème. Avez-vous déjà souhaité pouvoir appeler une liste de publications connexes directement dans l’éditeur WordPress? Bien sûr, le plug-in « Publications liées » peut récupérer des publications liées pour vous, mais avec un shortcode, vous pouvez facilement obtenir une liste de n’importe quel nombre de publications d’une catégorie particulière.

La solution. Comme d’habitude, collez ce code dans vos fonctions.fichier php.

function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => ’ ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour;}add_shortcode("list", "sc_liste");

Pour l’utiliser, il suffit de coller ce qui suit dans l’éditeur WordPress, après le passage en mode HTML:

Cela affichera une liste de trois messages de la catégorie avec un ID de 1. Si vous ne savez pas comment obtenir l’ID d’une catégorie spécifique, un moyen simple est expliqué ici.

Explication du code. Après avoir extrait les arguments et créé la variable globale $posts, la fonction sc_liste() utilise la fonction get_posts() avec la fonction numberpostsorderorderby et category paramètres pour obtenir les X messages les plus récents de la catégorie Y. Une fois terminé, les publications sont intégrées dans une liste HTML non ordonnée et vous sont renvoyées.

Source:

1. WordPress: Création de shortcode avancé

Obtenez la Dernière Image Attachée à un message

Le problème. Dans WordPress, les images sont assez faciles à manipuler. Mais pourquoi ne pas le rendre encore plus facile? Regardons un shortcode plus complexe, celui qui obtient automatiquement la dernière image attachée à un message.

La solution. Ouvrez les fonctions.fichier php et collez le code suivant:

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+2); $height = ($imagedata+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");

Pour utiliser le shortcode, tapez simplement ce qui suit dans l’éditeur, en mode HTML :

Explication du code. La fonction sc_postimage() extrait d’abord les attributs du shortcode. Ensuite, il récupère l’image en utilisant les fonctions WordPress get_children()wp_get_attachment_image() et wp_get_attachment_image_src(). Une fois cela fait, l’image est renvoyée et insérée dans le contenu de la publication.

Sources:

1. Code court WordPress: affichez facilement la dernière image attachée à post

Le problème. Même si vous avez apprécié cet article, vous vous êtes peut-être senti un peu frustré car, par défaut, WordPress n’autorise pas l’insertion de shortcode dans les widgets de la barre latérale. Heureusement, voici une petite astuce pour améliorer les fonctionnalités de WordPress et permettre l’utilisation de shortcodes dans les widgets de la barre latérale.

La solution. Encore un morceau de code à coller dans vos fonctions.fichier php:

add_filter('widget_text', 'do_shortcode');

C’est tout ce dont vous avez besoin pour autoriser les shortcodes dans les widgets de la barre latérale!

Explication du code. Ce que nous avons fait ici est assez simple: nous avons ajouté un filtre sur la fonction widget_text() pour exécuter la fonction do_shortcode(), qui utilise l’API pour exécuter le shortcode. Ainsi, les shortcodes sont maintenant activés dans les widgets de la barre latérale.

(al)