Les shortcodes sur le support de WordPress.com (EN)
"Les shorcodes… bon sang mais c’est bien sûr !"
Si vous vous dites cela à la lecture de ce billet, c’est que comme moi on ne peut pas dire que vous êtes une lumière en codage. Mais vous serez tellement content d’avoir enfin pigé un truc utile que aucune honte ne viendra assombrir votre front.
Car oui, peut-être que, tel un monsieur Jourdain des temps modernes, vous avez déjà utilisé les shortcodes sans vraiment y avoir prêté attention.
En tout cas sans savoir qu’il en existait une belle collection qui pouvait vous faire oublier les limitations de Worpress.com. Et ainsi vous faire bénéficier de certaines fonctionnalités réservés aux dieux du codage, et aux demi-dieux qui ont le privilège de pouvoir farcir leurs blogs WP de ces fameux plugins.
Les shortcodes, c’est grâce à cela notamment que je peux vous faire enfin profiter de TweetMeme, un outil de retweet digne de ce nom : j’espère que vous ne vous priverez pas d’en abuser !
— Qu’est-ce qu’un shortcode ?
En français, on peut appeler cela des "mini-codes" : ce sont des bouts de codes permettant d’exécuter des fonctions pré-définies dans le code de WordPress (à partir de la version 2.5). Une manière de rendre possible l’utilisation de javascript dans WordPress.com.
Ils sont très courts et écrits entre crochets dans un langage intuitif. Rien de plus simple que de les utiliser !
Vous avez sans doute utilisé maintes fois les shortcodes sans vraiment vous poser de questions… Dans certains cas, ils sont intégrés automatiquement à votre billet en cliquant sur des boutons, comme par exemple :
- insertion de vos images dans un blog légendé =
caption, - sondage Polldaddy =
poll(voir un exemple ici), - insertion de vidéo =
videoou de son =audio, - galerie d’images =
gallery.
N’écoutant que mon courage (les informations sont en anglais), je suis partie en exploration et en ai découvert de nouveaux. Ainsi grâce à cela, je peux maintenant vous offrir :
- un formulaire de contact,
- une page d’archives qui rend quelque peu caduque mon tuto à deux balles (et surtout à la mano)…
- et maintenant un magnifique bouton de retweet (je vais revenir sur ce dernier).
Conseil de base pour utiliser les short codes :
- Ne copiez-collez pas un short code, on ne sait jamais, il peut y avoir un bout d’un autre code "invisible" qui soit lié au texte. Recopiez-le à la main !
- Intégrez-le de préférence en passant par l’éditeur htlm.
- Voyez des termes supplémentaires sont proposés pour personnaliser le code (je donne un exemple plus bas).
- Si cela ne marche pas : vérifiez que vous ne vous êtes pas trompé(e) dans la saisie. Si votre code ne marche pas, peut-être est-ce parce qu’il n’est pas/plus intégré au CSS de votre blog.
- Si vous voulez nommer un shortcode dans votre billet de manière à ce que vos lecteurs puissent le visualiser (sans qu’il se convertisse), essayez de doubler les crochets ( j’ai bien passé une heure à chercher la soluce, grâce à ce site… mais cela ne marche pas à tous les coups !), sinon, mettez un espace de part et d’autre du texte, à l’intérieur des crochets.
— Où trouver tous les short codes "officiels" ?
La liste "en clair" sur le support de wordpress.com est principalement orientée vers usages d’américains (I presume…), vous verrez que l’on n’y retrouve pas certains services plus usités chez nous.
Les liens ci-après renvoient vers les pages concernant les shortcodes sur le support WP.com en anglais, mais vous pouvez aussi voir le sommaire des shortcodes en français avec Google traduction.
- Miscellaneous ("Divers")
Archives, formulaire de contact, bouton de vote Digg, insertion carte Google Maps ou sondage PollDaddy, et écriture de code sans qu’il soit converti (les shortcodes exceptés, d’ailleurs) - Video
Blip.tv, Dailymotion, Flickr, GoogleVideo, Kyte.tv, LiveVideo, Podtech, Redlasso, Splashcast, Ted, Vimeo, WPvideo, Youtube - Images and Documents
Insertion d’une galerie, diaporamas Rockyou, Scribd, Slideshare, Slide. - Audio
Lecteur audio pour un fichier MP3 déjà en ligne, ou sur ODEO, Podtech, et SoundCloud.
En parlant de son, j’avoue que je n’ai toujours pas trouvé comment insérer des sons que j’ai moi-même téléchargé sur Box.net…
En tous cas sachez que cette liste n’est pas exhaustive. On en trouve ailleurs dans le codex WordPress, et certains ont été intégrés sans trop de publicité… Il faut fouiner, car les shorcodes sont mis à toutes les sauces, et hautement paramétrables. Voir par exemple pour configurer l’envoi d’un post par e-mail (EN).
Appel du pied à qui de droit : j’aimerais bien un shortcode pour intégrer une page Pearltrees dans un billet, un autre pour les vidéos Vodpod (possible néanmoins dans un widget de barre lattérale), et un dernier pour mes listes de musique Blip. Et puis je trouve que le paramétrage des archives est plutôt limité (pas possible de faire apparaître une liste des articles par mois, ou de zapper un mois donné). Voilà !
— TweetMeme : il fallait le trouver !
Last but not least, il y a celui que vous attendez tous, chers camarades de WP.com, repéré par CJFrog et révélé par Mirella McCracken : le shortcode pour intégrer le fameux bouton TweetMeme !
Bon d’accord, il faut le coller à chaque page (ou dans un Widget ?), mais tout de même avouez que ce n’est pas si compliqué. Et si vous avez oublié, TweetMeme se mettra à jour dans le compte des RT dès que vous l’intègrerez.
J’avais cru à un moment utiliser le short code [twitter], suggéré ici, mais il ne marchais pas, puisqu’il nécessitait de modifier le CSS.
Alors que là, il suffit que je personnalise le shortcode avec le nom de mon compte Twitter (@Blogexperience), en complétant éventuellement avec un de mes raccourcisseur d’url préférés (bit.ly, attention certains raccourcisseurs ne fonctionnent pas), et en lui demandant de l’afficher aussi quand les billets sont tronqués en page Home (only_single=fase) :
[tweetmeme source="blogexperience" service="bit.ly" only_single=false]
… ça marche ! Si-si, regardez à droite… ou désormais en haut (tiens, et ce serait pas mieux en bas ???) de tous mes billets, si j’y pense.
Nota : Si vous avez un "?", don’t worry, c’est sans doute que votre billet est en brouillon sous htpps:// et que TweetMeme ne peut accéder au lien pour tant qu’il n’est pas publié.
Voici le code pris en compte par WordPress.com pour insérer un bouton TweetMeme :
Et voilà, allelouia, du Javascript dans ma page WP.com !
Avis à mes copains sur Blogger / Blospot : TweetMeme vous propose de configurer votre template en y insérant automatiquement un bouton sur mesure. Les veinards, vous n’avez que deux copier-coller et quelques cases à compléter !
Si vous avez connaissance d’autres short codes, merci de les partager !
> Aller plus loin :
- Sommaire des shortcodes sur le support WP.com (EN)
- Pour les spécialistes (non WP.com) : Comment utiliser les « shortcodes » de WordPress
> Voir d’autres billets de la catégorie "Un peu de technique"
Merci pour cette synthèse… Cela m’a permis de me rendre compte que je faisais en effet du shortcode sans le savoir (insertion video et tweetmeme)…
Peux tu m’expliquer le code exact à mettre car quand je fais copier collé de ton code ça ne fonctionne pas
Merci de me redonner de l’espoir pour avoir un bouton retweet
@Polluxe : Bien venue à Mme Jourdain, alors.
@Yvain : Comme je le dis dans le post, il faut éviter le copier-coller, car il s’y glisse des bouts de code invisibles… Essaie donc en recopiant pour commencer :
tweetmeme source="nom_de_ton_compte_twitter" (laisser les guillemets)
… en mettant des crochets de part et d’autre, sans espace entre le crochet et le contenu.
@Yvain, désollée, mes guillemets sont automatiquement convertis en version typographique, avec des espaces, mais ce ne sera pas le cas si tu tapes de code dans ton billet (de préférence dans l’éditeur html).
Ca marche et ça me change la vie
Merci pour tout, j ai cherché tellement longtemps et en fait c était juste un tout petit bout de code
Enfin!!! avec ce wordpress.com et ses limites c’est une bouffée d’air de pouvoir enfin mettre un bouton de retweet, il ne me reste plus qu’à trouver un moyen de lier une page fan à mon blog
@Yvain : Il faut remercie Mirella l’américaine qui l’a signalé et CJFrog qui l’a tweeté.
Reste à voir si nos billets seront ainsi plus retweetés ! En tout cas j’espère le retrouver sur certains blogs amis, cela me simplifiera la recommandation de leurs billets…
[...] possède des options complètes dans ce sens. On peut contourner cette limitation avec les Shortcode qui sont des bouts de code qu’on insére dans ses articles, mais c’est contraignant et [...]
[...] LinkedIn [...]
[...] LinkedIn [...]