Aggiungere un pulsante all’editor tinymce di WordPress

Con l’aggiornamento all’ultime versioni del noto plugin Tinymce Advanced (che utilizzo sui miei blog), è scomparso il pulsante “cite”, da me molto usato quando devo riportare brevi citazioni. La differenza con il blockquote è evidente: con quest’ultimo si riportano brani più lunghi in un paragrafo a parte; con il <cite>, brani più brevi, nella stessa linea del testo.

Dunque dovevo trovare una soluzione che potesse colmare la lacuna (si spera temporanea). Quanto meno finché non troverò una soluzione più “pulita” o gli sviluppatori di Tinymce Advanced non decidano di reinserire nel plugin i pulsanti xhtml.

Ancora una volta, la soluzione è piuttosto semplice. Non si deve far altro che incollare il seguente codice nel file functions.php:

/* add custom cite button */
add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_push($buttons, "cite");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['cite'] = get_template_directory_uri() .'/js/cite_tinymce.js';
   return $plugin_array;  
}

All’interno della cartella del tema dove avete i vostri file .js (file che contengono javascript), dovete poi inserire un nuovo file js, che io ho chiamato cite_tiny_mce.js, ma che ognuno può chiamare come meglio crede, anche perché la funzione può essere utilizzata per l’inserimento di qualsiasi pulsante all’interno dell’editor. Nel file .js, dovete inserire questo codice javascript:

(function() {
     /* Register the buttons */
     tinymce.create('tinymce.plugins.cite', {
          init : function(ed, url) {
               /**
               * Adds HTML tag to selected content
               */
               ed.addButton( 'cite', {
                    title : 'Add cite',
                    image : '../wp-content/themes/dmtheme/images/cite.png',
                    cmd: 'cite_cmd'
               });
               ed.addCommand( 'cite_cmd', function() {
                    var selected_text = ed.selection.getContent();
                    var return_text = '';
                    return_text = '<cite>' + selected_text + '</cite>';
                    ed.execCommand('mceInsertContent', 0, return_text);
               });
          }/*,
           createControl : function(n, cm) {
               return null;
          }, */
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'cite', tinymce.plugins.cite );
})();

Ovviamente, all’indirizzo relativo all’immagine, inserite un’immagine che possa meglio rappresentare il vostro pulsante. Nel caso di “cite” io ho creato un’immagine con i sergenti alti. Niente di trascendentale. L’importante è che faccia il suo sporco lavoro: