imath

Ce matin en me réveillant vers 3h47, je me suis dit :

c’est quand même dommage de ne pas proposer un bouton pour faciliter l’insert d’un shortcode dans le mode « FullScreen » de l’éditeur WordPress.

Du coup, j’ai allumé le MacBook et me suis lancé dans une inspection de code en règle.. Pas encore bien réveillé, manifestement, car j’aurais peut-être dû me douter que quelqu’un avait réfléchit à la question (Comme par exemple Matt de mattvarone.com avec cet article).

Petit rappel pour resituer le contexte!

Lorsqu’on veut simplifier la tâche d’un utilisateur dans son utilisation de notre plugin, on est souvent amené à ajouter des boutons à la toolbar de tinyMCE ou à la mediabar juste au dessus. C’est ce que j’ai fait pour le plugin Bowe Codes.

Dans cette extension, je voulais notamment intégrer un moyen de simplifier la rédaction du shortcode en lançant une fenêtre thickbox d’édition pour ensuite ramener le shortcode bien rédigé dans la fenêtre d’édition du post ou de la page. Pour cela je me suis accroché sur le hook « media_buttons » d’une manière équivalente à celle-ci :

function imath_regular_screen_add_media_button() {
	//définition de l'url á charger dans la fenêtre thickbox
	$url = IMATH_FS_PLUGIN_URL.'/fs-handle/fs-action.php?tab=add&TB_iframe=true&height=400&width=640';

	echo '<a href="'.$url.'" class="thickbox" id="demo-fs" title="Ajouter démo fs"><img src="'.IMATH_FS_PLUGIN_URL.'/images/icon.png" alt="Ajouter démo fs"></a>';
}
add_action('media_buttons', 'imath_regular_screen_add_media_button', 21);

Ce qui visuellement donne :

Découverte du filter « wp_fullscreen_buttons »

Ok, sauf que maintenant, lorsque je passe en mode FullScreen, l’utilisateur se dit « mais ou est mon bouton?? ». Pour reprendre le fil de mon intro, mon inspection m’a guidé jusque dans le fichier /wp-includes/wp-class-editor.php – précisément – à la ligne 655, où on trouve :

$buttons = apply_filters( 'wp_fullscreen_buttons', $buttons );

« Cool ! » me dis-je 🙂 Je n’ai plus qu’à ajouter un filtre pour récupérer le tableau des boutons ($buttons) et lui ajouter un nouvel élément. C’est quand même vachement bien fait WordPress !! Ce qui nous donne quelque chose comme :

function imath_fullscreen_button( $buttons ){
	$url = IMATH_FS_PLUGIN_URL.'/fs-handle/fs-action.php?tab=add&TB_iframe=true&height=200&width=640';

	// tb_show nous permet d'ouvrir une fenêtre thichbox
	$buttons['mybutton'] = array(
		'title' => __('My Button'),
		'onclick' => 'tb_show('fullscreen button démo' , ''.$url.'');',
		'both' => false
	);

	return $buttons;
}
add_filter( 'wp_fullscreen_buttons', 'imath_fullscreen_button', 9, 1 );

Sauf qu’en l’état, on a bien un bouton qui apparaît mais aucune icône 🙁 Il convient donc de rajouter un style pour que le background du bouton intègre une icône. Pour cela, j’intercepte les hooks load-post.php et load-post-new.php pour charger une css qui ajoutera un background à l’id wp_fs_mybutton. La dernière partie de l’id étant égal à l’identifiant du rang que j’ai ajouté au tableau $buttons dans le code précédent.

function imath_fullscreen_button_css() {
	wp_enqueue_style( 'fs-style', IMATH_FS_PLUGIN_URL.'/fs-styles.css' );
}
add_action('load-post.php', 'imath_fullscreen_button_css'); 
add_action('load-post-new.php', 'imath_fullscreen_button_css');

Dernière étape : construire le script php qui sera appelé dans la thickbox

Pour le coup, je ne détaille pas cette étape. Mais pour les plus curieux d’entre vous, vous pouvez télécharger tous les fichiers de ce tuto organisés dans un plugin que j’ai intitulé :

En deux mots, il suffit d’intégrer dans le script php un jQuery qui va envoyer à l’éditeur le contenu de l’input (dans cet exemple) ou dans le cadre d’un vrai plugin le shortcode bien formé 😉 La fonction javascript clé dans cette opération est win.send_to_editor('lecontenu').

Le plugin de démo a été testé sur WP 3.2.1 et WP 3.3 Beta 2 😉 A la prochaine…