Aggiungere un pulsante all’editor tinymce di WordPress

Questo post è più vecchio di 3 anni. Potrebbe contenere informazioni non aggiornate.

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

Ultime dal blog

Visualizzare i commenti recenti, con avatar, usando uno shortcode

Pubblicato da Il Jester il 20 Giugno 2024

Creazione di un tema figlio su Wordpress e Classicpress

Pubblicato da Il Jester il 19 Giugno 2024

Usare il markdown per scrivere post su Wordpress e Classicpress

Pubblicato da Il Jester il 18 Giugno 2024

Gestire la query string di un url con Javascript

Pubblicato da Il Jester il 16 Giugno 2024

Sicurezza. Disabilitare XMLRPC sul vostro sito Wordpress

Pubblicato da Il Jester il 15 Giugno 2024

Gravatar. Un plugin per tutelare la privacy

Pubblicato da Il Jester il 14 Giugno 2024