[shortcode] Créer une info box

Nous l’avons vu dans un précédent article traitant des shortcodes, il peut être ennuyeux de se retrouver prisonnier d’un thème à cause de ses shortcodes.

Créer ses propres shortcodes

Une des solutions pour sortir de ce problème est de créer ses propres shortcodes. Nous allons voir ici comment créer une boite en CSS contenant du texte. Nous allons styliser cette boite et l’appeler via un short code dans notre article.

Voici ce que à quoi nous souhaitons arriver :

Curabitur facilisis aliquam elit, eget vestibulum leo faucibus euismod. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at leo nisl. Aenean imperdiet convallis nunc at suscipit. Curabitur sem ligula, tristique vitae rhoncus ac, accumsan nec tellus.

Notre première boite contient l’icône qui va identifier le type de message que nous affichons : aide, info, alerte, astuce.

Le seconde boite vient donc se placer dans la seconde et contiendra le texte à afficher au lecteur.

Le CSS

La première des chose, nous créons notre CSS. Nous allons avoir besoin de 2 blocs div, le premier contenant le second.
Copier/coler ce morceau de code dans le fichier style.php de votre thème.

.notif418{
	float: left;
	margin: 7px;
	width: 310px;
	display: block;
	color: #949494;

}

.inside {
	background-color: #F4F4F4;
	float : right;
	min-height: 100px;
	width : 100%;
	display: block;
	border-left: 1px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	padding : 3px 7px;

}

La Fonction du Shortcode

Dans un second temps, il nous faut créer la fonction qui va nous permettre d’utiliser le shortcode dans nos articles.

Il vous suffit de copier/coller ce code dans le fichier functions.php de votre thème.

	add_shortcode('notify', 'short_notif');

	function short_notif($atts, $content = null) {
	extract(shortcode_atts(array('type' => 'n-info'), $atts));

		switch($type) {

			case 'error':
				$class = 'n-error';
				break;

			case 'alerte':
				$class = 'n-alert';
				break;

			case 'info':
				$class = 'n-info';
				break;

			case 'astuce':
				$class = 'n-astuce';
				break;

		}

		return '
<div class="notif418 '.$class.'">
<div class="inside">'.do_shortcode($content).'</div>
</div>
';
	}

Désormais, nous allons ajouter une icône pour chacune des boites que nous venons de créer. Pour cela, nous allons ajouter un morceau de code CSS dans notre fichier style.css, à la suite de la première portion que nous avons coller au début de l’article.

.n-error{
	background: url(icones/aider.png) 7px 7px no-repeat;
	padding: 1px 1px 1px 90px;
	min-height: 100px;
}

.n-alert{
	background: url(icones/alerte.png) 7px 7px no-repeat;
	padding: 1px 1px 1px 90px;
	min-height: 100px;
}

.n-info{
	background: url(icones/info.png) 7px 7px no-repeat;
	padding: 1px 1px 1px 90px;
	min-height: 100px;
}

.n-astuce{
	background: url(icones/astuce.png) 7px 7px no-repeat;
	padding: 1px 1px 1px 90px;
	min-height: 100px;
}

Utiliser le shortcode

[notify type='alerte']Mon texte[/notify]

Les Finitions

Désormais, il vous faut donc les icônes en question. En ce qui concerne le présent tuto, j’ai créer un dossier icônes à la racine du répertoire de mon thème, et j’y ai placé mes fichiers icônes.