Ton WordPress en short(code) : un CV en ligne

Dans le cas pratique d’un CV en ligne sur wordpress, entre custom post types, templates de pages, shortcodes… on peut être un peu perdu à ne pas savoir quel choix faire pour aller vers ce besoin en particulier. il y a des plugins pour ça, certes, mais si on faisait d’abord un petit point sur les shortcodes de wordpress ?

Je me suis récemment trouvé confronté à un problème pour un exercice auquel je m’adonnais : faire un CV en ligne sur WordPress. J’ai alors hésité : custom post types ou shortcodes ?

Définition

Déjà, qu’est-ce qu’un shortcode ? Introduit dans wordpress depuis sa version 2.5 (codex), il s’agit d’une sorte de raccourci, d’appel à une fonction à laquelle on passe des paramètres, des valeurs. Si vous n’êtes pas familiers avec les notions de développement, mais alors pas du tout, je simplifierais comme ceci : c’est une manière de dire à wordpress de faire ou afficher quelque chose de manière pré-programmée, dans une page de contenu ou un article, en fonction de ce que vous écrivez.

Quel choix ?

Dans le cas du CV sur une page wordpress, l’avantage des custom post types c’est de pouvoir structurer expériences, formations et compagnie. Seulement est-ce qu’il ne parait pas un peu lourd d’utiliser quelque chose sur quoi wordpress base des fonctionnalités de recherche, d’indexation, de tri, etc. juste pour afficher certaines infos non exploitées par ailleurs ? Peut-être que la question finalement est là : les contenus que je vais publier, doivent-elles juste être mises en forme ou exploitées ? La réponse est pour notre cas simple : affichées.  Je pars donc sur les shortcodes bien sûr.
Il y a 2 types de shortcodes dans wordpress. Certaines aiment à différencier les types avec ou sans attributs, mais à l’usage on se rend rapidement compte que c’est la même chose : 
Les « self-closing » shortcodes

• Sans attributs : [shortcode]
• Avec attributs : [shortcode size= »medium » id= »123″]

Les « enclosing » shortcodes

• Sans attributs : [shortcode]Lorem ipsum dolor sit amet[/shortcode]
• Avec attributs : [shortcodecolor= »#000000″]Lorem ipsum dolor sit amet[/shortcode]

Dans notre cas, nous allons gérer les enclosing shotcodes.

Mise en place : php

Nous allons utiliser la fonction add_shortcode (codex). En fonction de votre thème, soit vous avez juste un fichier functions.php seul, soit votre thème a prévu un fichier pour tous les développement personnalisés qui est ensuite appelé dans functions.php. j’ai pour ma part choisi pour mon thème perso de mettre ma fonction directement dans functions.php :

add_shortcode( 'itemcv', 'itemcv_shortcode' );

Qu’es-ce que ça fait? Ca ajout un shortcode qui s’appelle itemcv. C’est le nom utilisé dans mon article : [itemcv][itemcv]. Par ailleurs, le second paramètre est le nom de la fonction qui sera exécutée à l’affichage du shortcode.
Du coup, un peu plus haut je déclare ma fonction :

function itemcv_shortcode( $atts, $content = null ) {}

Le premier paramètre, ce sont les atributs que je vais mettre dans mon shortcode. Le second c’est le contenu entre [itemcv] et [/itemcv], qui est initialisé par défaut à null s’il n’y a rien. Par exemple et tout à fait au hasard :
[itemcv datedebut= »Septembre2006″ datefin= »Septembre 2009″ ligne1= » Lorem ipsum dolor sit amet » ligne2= »Awesome position »]Ceci est la descripion de ce poste[/itemcv]
J’ai choisi d’utiliser les paramètres suivants :

• datedebut et datefin : facultatifs, dates de début et de fin de l’expérience
• ligne1 et ligne2 : facultatif, intitulé du poste / formation pour la première ligne, complément d’info pour la seconde (par exemple Ingénieur d’étude / Stage)

La fonction itemcv_shortcode va tester la présence des différents attributs et du contenu pour conditionner un rendu. Dans l’idée, cette fonction va stocker dans une variable le rendu HTML que l’on souhaite renvoyer à la page :

//Shortcodes pour les CV items
function itemcv_shortcode( $atts, $content = null ) {
	//Ouverture du div principal
	$result = '<div class="itemcv row">';
	//Si j'ai une date de début et une date de fin
	if($atts['datedebut'] != "" && $atts['datefin'] != ""){
		$result .= '<div class="dateitemcv pull-left col-xs-12 col-sm-3 col-md-3">';
		$result .= $atts['datedebut'];
		$result .= '<br />';
		$result .= $atts['datefin'];
		$result .= '</div>';
	}
	//Si j'ai une ligne1 et une ligne 2
	if($atts['ligne1'] != "" && $atts['ligne2'] != ""){
		$result .= '<div class="descitemcv pull-right col-xs-12 col-sm-9 col-md-9">';
		$result .= '<span class="ligne1">' . $atts['ligne1'] . '</span>';
		$result .= '<br />';
		$result .= '<span class="ligne2">' . $atts['ligne2'] . '</span>';
		$result .= '</div>';
	}
	//Si content n'est pas null
	if($content){
		$result .= '<div class="contentitemcv pull-left col-xs-12 col-sm-12 col-md-12">';
		$result .= $content;
		$result .= '</div>';
	}
	//fermeture du div principal
	$result .= '</div>';
	return $result;
}

Les commentaires sont normalement suffisants : dans une variable $result on commence par mettre le div général. Puis on teste la présence de datedebut et datefin, si ils sont présents alors on continue à remplir $result avec le code HTML adéquat. Idempour ligne1 et ligne2.

Mise en place : dans la page

Enfin, on va mettre dans $result le contenu $content entre les balises du shortcode. Voilà ce que peut donner le contenu dans l’interface d’édition de la page :
Formation
[itemcv datedebut= »Septembre2006″ datefin= »Septembre 2009″ ligne1= » Lorem ipsum dolor sit amet » ligne2= »Awesome position »]Morbi velit dui, sagittis ut arcu in, consequat tincidunt libero. Nullam fringilla nibh non nisi adipiscing, ac adipiscing nisl molestie. Nulla at augue eget nulla sagittis pretium. Vestibulum aliquet cursus rutrum. Curabitur bibendum metus eu augue gravida placerat. Morbi nec placerat quam. Ut lacinia urna adipiscing imperdiet sagittis. Nulla dapibus risus sit amet commodo venenatis. Ut sit amet odio in mauris vestibulum faucibus. Nullam facilisis tincidunt lorem non tincidunt. Mauris ligula metus, elementum nec sagittis quis, scelerisque et velit. In lacinia sapien id tellus condimentum elementum. Vivamus hendrerit augue leo, eget vestibulum est elementum vitae. Sed eget est at lectus accumsan lacinia nec non felis. Aliquam ac nibh arcu.[/itemcv]
Loisirs
[itemcv] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla lorem, auctor blandit ultrices et, iaculis nec magna. Sed eget fringilla mauris. Fusce turpis leo, consequat ut risus ut, vehicula iaculis urna. Morbi eget lorem a nisl varius dictum. Suspendisse posuere, sapien sit amet dapibus ultricies, nisl dolor euismod nunc, non scelerisque purus libero sed libero. In dui elit, vehicula adipiscing enim vel, accumsan interdum urna. Nunc adipiscing, lectus at feugiat bibendum, leo lorem molestie mauris, nec euismod diam arcu id eros. Ut eleifend tempor erat, ut lacinia felis auctor at. Curabitur a tortor a enim tempus fermentum. Integer pretium dolor quam.[/itemcv]
La page associée va donc insérer à la place de ces shortcodes le code HTML généré par la fonction vue plus haut. Ainsi, il suffit d’aller mettre une couche de CSS par dessus pour avoir le rendu souhaité.
Pour ma part, j’ai choisi d’utiliser un template particulier. Ce n’est pas le sujet de cet article, mais en quelques mots il suffit de créer un fichier qui s’appelle page-cv.php par exemple, et de mettre tout en haut de ce fichier en commentaires php la chose suivante :

/*
Template Name: Curriculum
*/

Mettez-y la boucle wordpress, puis dans l’écran de modification de page  dans la colonne de droite vous pourrez sélectionner le template Curriculum. reste ensuite à styler en CSS. Ca m’a permis de rajoute quelques bouts de code permettant de générer automatiquement un menu horizontal  partir des balises <h2>, comme expliqué dans ce post.

Rendu

Voilà le rendu en direct dans mon environnement de développement. L’avantage, c’est qu’il n’y a pas 15 requêtes différentes pour que wordpress sache quoi afficher, le traitement est beaucoup plus rapide et souple :