MAJ : Il existe maintenant une extension qui permet d’ajouter des shortcodes ainsi que les boutons dans l’éditeur de texte :  Shortcodes Pro

Original  05-04-2011:

TinyMCE est l’éditeur de texte pour WordPress, il existe des plugins pour ajouter des boutons pré-construits mais aucun pour ajouter ses boutons perso.

Pas grave, on va le faire nous même, finalement il n’y a rien de compliqué une fois que l’on sait comment faire.

Suite à notre tutorial sur les shortcodes nous allons ajouter une icone pour voir apparaître directement le code de notre éditeur de texte.

Commencez par ouvrir le fichier functions.php de votre thème, oui oui encore lui ! pour rappel il se trouve dans : wp-content/themes/nom_du_theme et mettez y ce code, à la suite :

<?php /* modif tinymce ajouter les boutons de shortcode à l'éditeur de texte */
add_action('init','add_buttons');
function add_buttons() {
if(current_user_can('edit_posts') && current_user_can('edit_pages')) {
add_filter('mce_external_plugins','add_plugins');
add_filter('mce_buttons','register_buttons');
}
}

En gros on prévient WordPress que l’on ajoute une fonction pour mce_external_plugins, cette fonctions s’appelle add_plugins et on prévient également que l’on ajoute la fonction register_buttons dans mce_buttons.

Maintenant que tout ça est fait on va créer ces 2 fonctions : add_plugins et register_buttons, toujours à la suite dans functions.php :

function add_plugins($plugins) {
$plugins['msginfos'] = get_bloginfo('template_url').'/js/msginfos.js';
$plugins['msgimportants'] = get_bloginfo('template_url').'/js/msgimportants.js';
return $plugins;
}
function register_buttons($buttons) {
array_push($buttons, 'msginfos');
array_push($buttons, 'msgimportants');
return $buttons;
}
/* fin modif tinymce */
?>

La première fonction permet de charger un fichier javascript pour chaque bouton, il va définir l’action à faire lorsqu’on va appuyer sur le bouton et il va également contenir l’image.
Comme vous avez du vous en rendre compte j’ai placé ce fichier dans un répertoire js qui se trouve dans le répertoire de mon thème. Autrement dit, là ou se trouve le fichier functions.php vous devez créer un répertoire js et y mettre les fichiers javascripts que l’on crée dès maintenant :

Ouvrer votre logiciel préféré, dreamweaver, notepad++, … et créer un nouveau fichier javascript dans lequel vous collez ceci :

tinymce.create('tinymce.plugins.msginfos', {
	init : function(ed,url) {
		ed.addButton('msginfos', {
			title : 'Message d info',
			image : url + '/msginfos.png',
				onclick : function() {
				ed.selection.setContent('[msginfos] [/msginfos]')
			}
		})
	}
});
tinymce.PluginManager.add('msginfos',tinymce.plugins.msginfos);

enregistrez tout ça dans le répertoire js sous le nom de msginfos.js (souvenez vous de la fonction add_plugins) il ne reste plus qu’à mettre une image msinfos.png dans le répertoire js et le tour est joué !

Répétez la même opération pour créer un fichier msgimportants.js et une image en png (ou en jpeg mais pensez à modifier le fichier javascript).

Voila, c’est fini, faites un test, ajouter un article ou une page, vos butons devraient apparaître !
Cliquez et normalement le shortcode apparaît dans la zone de texte.

A bientôt !