Ajouter un bouton dans l’éditeur WordPress

tinymce

Plus de 1 minutes :)

Introduction

Il peut arriver que l’on doive ajouter un bouton dans l’éditeur de WordPress. Cela peut être pour des raisons pratiques comme par exemple quand on a un short un petit peu compliqué à mettre en oeuvre. Par exemple si notre shortcode va avoir des paramètres multiples et compliqués comme un id de post, de catégorie etc… Partons du constat que nous voulons mettre en place un shortcode qui va afficher les derniers articles d’une catégorie et d’un type de contenu en particulier. Nous n’allons pas demander à notre utilisateur de connaître ses id de taxonomie ou de termes et aussi les slugs des types de contenu.

Donc un petit bouton dans l’éditeur peut être utile.

 Le code pour le bouton

TinyMce permet à travers une API de faire toute sortes de choses, comme des styles en plus et dans notre cas ajouter un bouton avec un comportement particulier.

Cet ajout se passe du côté du javascript et le traitement peut se passer du côté PHP, pour ma part j’aime passer par la thickbox de WodPress et une page en ajax, avec une interface et un vrai formulaire pour que se soit le plus simple pour l’utilisateur et surtout ne pas charger des librairies en plus pour l’interface utilisateur.

Pour le code PHP, c’est assez simple à mettre en place mais il faut bien sûr différencier l’administration de la partie client. Pour se faire nous aurons besoin d’un fichier javascript, d’une image pour le bouton mais aussi d’un fichier qui va se charger de la partie admin et de la partie client. Pour se faire je ferais un petit zip avec tout ça à la fin de l’article !

PHP

La base du plugin est la suivante, elle est comme celle de l’article parlant de la mise en place d’une extension :


<pre><code>
<?php /*
Plugin Name: My tinyMce Button
Plugin URI: http://nicolas-juen.fr
Description: Add tinymce button
Version: 1.0
Author: Rahe
Author URI: http://blog.nicolas-juen.fr
*/

define('MTMCE_URL', plugins_url('/', __FILE__));
define('MTMCE_DIR', dirname(__FILE__));
define('MTMCE_VERSION', '1.0');

require_once (MTMCE_DIR . DIRECTORY_SEPARATOR . 'inc' . DIRECTORY_SEPARATOR . 'class.client.php');
function MyTinyMceButton_Init() {
global $myTinyMce;

// Load translations
load_plugin_textdomain('mytmceb', false, basename(rtrim(dirname(__FILE__), '/')) . '/languages');

// Load client
$myTinyMce['client'] = new myTinyMceButton_Client();

// Admin
if (is_admin()) {
require_once (MTMCE_DIR . DIRECTORY_SEPARATOR . 'inc' . DIRECTORY_SEPARATOR . 'class.admin.php');
$myTinyMce['admin'] = new myTinyMceButton_Admin();

}
}

add_action('plugins_loaded', 'MyTinyMceButton_Init');
?>
</code>

Classe Admin :


<pre><code>
<?php class myTinyMceButton_Admin{

function __construct() {
// init process for button control
add_action( 'admin_init', array (&$this, 'addButtons' ) );
add_action( 'wp_ajax_mybutton_shortcodePrinter', array( &$this, 'wp_ajax_fct' ) );
}

/*
* The content of the javascript popin for the insertion
*
*/
function wp_ajax_fct(){
?>
<h2><!--?php _e("Category: ", 'mytmceb');?--><!--?php wp_dropdown_categories(array('name' =--> 'mcb_category', 'id' => 'mcb_category'));?>

<!--?php _e("Number of posts: ", 'mytmceb');?-->
<input id="mcb_number" type="number" min="-1" name="mcb_number" value="-1"><p class="description"></p>
<input class="button-primary" id="mcb_button" type="submit" name="mcb_button" value="<?php _e(">">
<!--?php die();<br ?--> }

/*
* Add buttons to the tiymce bar
*/
function addButtons() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return false;

if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_external_plugins', array (&$this,'addScriptTinymce' ) );
add_filter('mce_buttons', array (&$this,'registerTheButton' ) );
}
}

/*
* Add buttons to the tiymce bar
*
*/
function registerTheButton($buttons) {
array_push($buttons, "|", "mybutton");
return $buttons;
}

/*
* Load the custom js for the tinymce button
*

*/
function addScriptTinymce($plugin_array) {
$plugin_array['mybutton'] = MTMCE_URL. '/inc/ressources/tinymce.js';
return $plugin_array;
}

}
?>

Donc en décrivant ce qu'il se passe, nous avons deux actions :

  1. L'ajout du bouton dans l'éditeur
  2. L'ajout de l'action ajax ( si vous voulez savoir comment ça marche, vous pouvez vous reporter sur l'article qui explique l'ajax dans WordPress )

Simplement, l'action dans 'admin_init' permet de vérifier si l'utilisateur a les droits suffisants et surtout ajouter deux filtres pour mettre en place le fichier js et aussi ajouter notre bouton à la liste des boutons des tinyMce. Il faut savoir que chaque bouton doit avoir un slug unique! Ici nous utilisons le slug 'mybutton'. Donc notre fichier javascript qui gère le comportement du bouton est inclus seulement si le bouton apparaît dans la liste des boutons.

La méthode wp_ajax_fct permet juste d'afficher notre formulaire pour choisir la catégorie que l'on veut utiliser pour afficher nos articles mais aussi le nombre d'articles à afficher.

Javascript

Pour le javascript, il suffit d'avoir un seul fichier pour que ça marche :


<pre><code>
(function() {
var called = false;
tinymce.create('tinymce.plugins.mybutton', {
init : function(ed, url) {
ed.addButton('mybutton', {
title : 'My button',
image : url + '/images/mybutton.png',
cmd : 'mceMyButtonInsert',
});

ed.addCommand('mceMyButtonInsert', function(ui, v) {
tb_show('', ajaxurl + '?action=mybutton_shortcodePrinter');
if(called == false) {
called = true;
jQuery('#mcb_button').live("click", function(e) {
e.preventDefault();

tinyMCE.activeEditor.execCommand('mceInsertContent', 0, mybutton_create_shortcode());

tb_remove();
});
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('mybutton', tinymce.plugins.mybutton);
})();

function mybutton_create_shortcode() {
return '[my-listing category="' + jQuery('#mcb_category').val() + '" posts_per_page="' + jQuery('#mcb_number').val() + '"]';
}

Rapide tour de  ce qu'il se passe, on ajoute donc une action spéciale sur notre bouton avec le tinymce.PluginManager.add('mybutton', tinymce.plugins.mybutton); et nous déclarons la fonction associée avec tinymce.create('tinymce.plugins.mybutton', ,il ajoute aussi le bouton dans la barre. Comme vous pouvez le voir, on peut mettre une image ( très recommandé ) à notre bouton pour qu'il soit facilement repérable dans l'éditeur. Nous ajoutons aussi l'effet que le click au bouton va déclencher avec cmd : 'mceMyButtonInsert', et avec ed.addCommand('mceMyButtonInsert', nous attrapons l'appel pour pouvoir déclencher la fonction qui nous intéresse à ce moment là.

Dans notre cas nous appelons thickbox avec notre action ajax et après nous ajoutons l'action live sur le bouton de validation de notre petit formulaire dans la thickbox. Au click on lance tout simplement une insertion de contenu en appelant notre fonction mybutton_create_shortcode qui va retourner à tinyMce la chaîne à insérer.

Dans notre cas on insère le shortcode avec les arguments sélectionnés.

 La partie client

Pour la partie client, on va juste ajouter le shortcode et l'interpréter :


<pre><code>
<?php class myTinyMceButton_Client {
function __construct() {
add_shortcode( 'my-listing' , array( &$this, 'shortcode' ) );
}

function shortcode( $atts ) {
extract( shortcode_atts( array(
'category' => 0,
'posts_per_page' =>5,
), $atts ) );

if ( empty( $category ) )
return false;

ob_start();

$q_posts = new WP_Query( array( 'post_type' => 'post', 'category__in' => $category, 'posts_per_page' => (int)$posts_per_page ) );

if( $q_posts->have_posts() ) {
?>
<ul><ul><?php while( $q_posts->have_posts() ) {</ul></ul>
 
<ul><ul>$q_posts->the_post();</ul></ul>
?>

<!--?php </p-->

}
?>

<?php wp_reset_post_data();
}

$content = ob_get_contents();
ob_clean();
return $content;
}
}
?>
</code>

Donc pour le shortcode, on ajoute juste le shortcode, on vérifie que la catégorie a été fournie et on affiche le nombre d'articles demandés dans un ul/li.

Conclusion

Vos utilisateurs ont besoin d'interfaces et ceci est une des possibilités de donner les clés à vos utilisateurs pour ajouter du contenu "dynamique" dans leur article ou autre. En plus avec les shortcodes, l'affichage peut être altéré par la suite ou adapté.

C'est aussi l'assurance d'avoir plus ou moins la main sur l'effet et la présentation des données.

Ajouter un bouton ne demande pas beaucoup de code alors facilitez la vie à vos utilisateurs :)

Pour le fichier zip contenant tout le petit plugin c'est par ici.

Share on Google+3Tweet about this on Twitter20Share on Facebook1Pin on Pinterest0

6 thoughts on “Ajouter un bouton dans l’éditeur WordPress

  1. Merci et bravo pour cet article très complet.
    Ceci permet de plonger un peu dans les entrailles de Worpress et propose une valeur didactique certaine en mettant en oeuvre plusieurs mécanismes différents.
    L’interaction avec l’API de Tinymce et l’utilisation d’Ajax sont très intéressants dans ce cadre.
    A tester dès que j’aurai un peu de temps.

    Daniel

  2. [...] ce tutoriel n’a pas pour objectif de créer un bouton personnalisé mais bien d’ajouter des icônes supplémentaires disponibles avec TinyMCE en [...]

  3. Très sympa comme article, ça permet vraiment de trier les boutons et de ne laisser qu’un interface épurée aux clients …

  4. Merci pour l’info donc, c’est très utile et le code est parfait et simple.

  5. Il peut être pertinent de remplacer la ligne:
    tinyMCE.activeEditor.execCommand(‘mceInsertContent’ .. )

    Par la fonction de JS de WP : send_to_editor()
    Qui fait tout le job, multi-éditeur, plein écran, etc !

Add Comment Register



Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>