Les shortcodes sont des macros pour WordPress très faciles à implémenter. On va s’y intéresser pour varier la présentation des pages et articles à la manière des “Art-directed blogs”, tout en gardant de la souplesse en cas d’envie de tout foutre en l’air.

Art-directed blog (ADB)

Un ADB c’est un blog qui adopte une présentation spécifique à chaque article. Un peu comme un magazine papier. C’est une tendance qu’on voit émerger essentiellement chez des graphistes, et pour le moment, surtout outre-atlantique. Et non, je ne vois pas comment le traduire. Ce sera ADB.

Faire un ADB est très facile avec WordPress 3. On peut créer un template php différent par article et le tour est joué. A court terme, c’est sympa. Le faire à chaque article c’est un peu relou. Pour la version actuelle de ce blog, j’ai opté pour un compromis : je ne change que le fond de page, que ce soit pour une image, une animation, une vidéo… ou rien. Et ce grâce aux shortcodes.

Les shortcodes, qu’est-ce ?

C’est une fonction qui commence avec un [ et qui termine par un ] et qui s’insère dans l’éditeur WYSIWYG de WordPress. Wouuuu. Dedans je mets mes arguments, ce que je veux. Comme en HTML on peut aussi les utiliser en double avec le couple [Shortcode] du contenu [/Shortcode].

Dans notre cas on veut lui transmettre l’adresse de notre fond de page (jpg, swf, js…) et qu’il s’occupe d’insérer ça proprement en fond de page.

Le plus simple : changer le fond de page

Pour changer le background en CSS, on utilise ça :
<style type="text/css">body{background:#fff url('mon-image.jpg') top center no-repeat;}</style>
Notre shortcode n’aura besoin que de l’url de l’image.

Première étape, on se rend dans “functions.php” présent dans le dossier du thème WordPress utilisé. Puis, n’importe où après “<? php” on ajoute cette fonction :function customBg($atts){
$bloginfo = get_bloginfo($template_directory);
extract(shortcode_atts(array(
"url" => 'http://www.site.com/fond_par_defaut.jpg',
), $atts));
return '<style type="text/css">body{background:#fff url('.$url.') top center no-repeat;}</style>';
}
add_shortcode('bg', 'customBg');
La fonction extrait les attributs qu’on lui passe (l’url de l’image). Et elle retourne notre code CSS avec l’image dedans. La dernière ligne active le shortcode, et associe la fonction “customBg” avec le shortcode “bg”.

“url” est le seul paramètre à extraire. On lui assigne une valeur par défaut au cas où.
Dans le corps du message, on insère juste [bg url=”ladresse_de_limage.jpg”] et voila ;)
Attention à bien utiliser des adresses absolues. Je trouve personnellement bien pratique d’uploader l’image dans la bibliothèque WordPress et copier-coller l’url. Ca permet de ne pas faire de boulette lors de mises à jour ou migrations car l’image restera dans le dossier “uploads”.

Next

La prochaine fois on verra pour intégrer soit du flash fullscreen soit du canvas. Un peu plus fun.