Nicolas Juen

Menu

Ajouter un bouton dans l’éditeur WordPress

Plus de 1 minute

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 :

[pastacode provider= »manual » lang= »php »]


[/pastacode]

Classe Admin :

[pastacode provider="manual" lang="php"]





 'mcb_category', 'id' => 'mcb_category'));?>





">
 }

/*
* 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;
}

}
?>

[/pastacode]

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 :

[pastacode provider="manual" lang="javascript"]


(function() {
var called = false;
tinymce.create('tinymce.plugins.mybutton', {
init : function(ed, url) {
ed.addButton('mybutton', {
title : 'My button',
image : url + '//d3npp2g4rgtsd5.cloudfront.net/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() + '"]';
}

[/pastacode]

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 :

[pastacode provider="manual" lang="php"]




 
      $q_posts->the_post();
?> } ?>

[/pastacode]

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.

7 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

    1. Merci pour ce tuto ! il est génial !
      Par contre, en téléchargeant le zip, sur la page « inc/class.client.php », j’ai eu une erreur à la ligne 38 :

      je l’ai corrigé en remplacant :
      wp_reset_post_data(); »
      par :
      wp_reset_postdata();

      Bonne journée ! Merci encore pour tous tes tutos !

  2. 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 !

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.