Digital Meadows

La versione 2.1 di Wordpress offre un’interessante possibilità agli sviluppatori di plugin per TinyMCE (l’editor di testo visuale di WP), che ho recentemente sfruttato per rendere il packaging di ZenPress più razionale.

Il problema: le plugin di Wordpress stanno solitamente in wp-content/plugins, mentre quelle di TinyMCE stanno in wp-includes/js/tinymce/plugins. Una plugin che debba interagire sia con Wordpress che con TinyMCE (come ad esempio ZenPress) rendeva quindi obbligatorio - fino alla versione 2.1 - piazzare alcuni file in una cartella ed alcuni nell’altra, con conseguente confusione sia in fase di installazione che di rimozione.

La soluzione: sta tutta nella funzione tinyMCE.loadPlugin, che permette di caricare plugin per TinyMCE senza che sia necessario mettere i file in wp-includes. Facciamo però un passo indietro: vedremo come usare questo utile metodo dopo un paio di indispensabili note introduttive.

Innanzitutto, vediamo come si fa ad aggiungere plugins per TinyMCE nella maniera classica: sono praticamente le stesse operazioni che dovremo mettere in atto nel nostro caso.
Tutto parte da due hooks, mce_plugins ed mce_buttons, che permettono rispettivamente di modificare l’elenco delle plugin e quello dei pulsanti di TinyMCE. Se vi state chiedendo cosa siano gli hooks, possiamo dire semplicemente che sono gli strumenti per “agganciare” una plugin a Wordpress (maggiori dettagli sul WP Codex). Associando ai due hooks delle funzioni dai noi specificate diremo quindi a WordPress di eseguirle durante l’inizializzazione di TinyMCE. Vediamo in pratica questo primo passo:

add_filter('mce_plugins', 'my_add_plugin');
add_filter('mce_buttons', 'my_add_button');

Naturalmente dovremo definire le due funzioni che abbiamo associato agli hooks. Eccole qua:

function my_add_plugin($plugins) {
array_push($plugins, '-myplug');
return $plugins;
}
function my_add_button($buttons) {
array_push($buttons, 'separator', 'myplug');
return $buttons;
}

La prima funzione prende l’array delle plugin di TinyMCE, aggiunge la nostra plugin myplug e ritorna poi l’array modificato. Allo stesso modo la secoda funzione aggiunge alla lista di pulsanti sulla barra di TinyMCE un separatore (una linea verticale) ed il nostro pulsante. E’ da notare che nella funzione my_add_plugin il nome della plugin è preceduto da un trattino: questo comunica a TinyMCE che si tratta di una plugin esterna.

Ora la parte finale della magia sta nella formula tinymce_before_init, un hook che era già presente nelle versioni precedenti di Wordpress. Specificando una nostra funzione ed associandola a tinymce_before_init diremo a WordPress di eseguirla subito prima di inizializzare TinyMCE. Aggiungiamo quindi l’associazione:

add_action('tinymce_before_init',
'my_add_tinymce_plugin');

Poi, nella funzione, richiamiamo il metodo loadPlugins di cui abbiamo parlato all’inizio:

function my_add_tinymce_plugin() {
$url = get_bloginfo('wpurl') . '/' . PLUGINDIR .
'/myplug/';
echo 'tinyMCE.loadPlugin("myplug", "'.$url.'");'."\n";
}

Questa funzione aggiunge alla pagina una riga di Javascript, con la quale si richiama il metodo tinyMCE.loadPlugin. La costruzione dell’URL sfrutta alcuni dei meccanismi interni di Wordpress (tra cui la costante PLUGINDIR, che è stata introdotta con la versione 2.1): in sostanza possiamo fornire alla funzione loadPlugin qualsiasi URL che punti alla cartella in cui si trovano i file della nostra plugin TinyMCE (tra cui l’indispensabile editor_plugin.js). E’ ovvio che il posto migliore per posizionare questi file è la cartella in cui stanno anche i file della plugin per Wordpress.

Ricapitolando: mce_buttons dice a TinyMCE di aggiungere un pulsante (relativo alla nostra plugin), mce_plugins dice di andare a cercare una plugin di nome myplug e TinyMCE.loadPlugins (richiamato tramite tinymce_before_init) dice dove la plugin va cercata.

Se anelate a qualche complicazione in più, potete provare a dare un’occhiata al codice sorgente di ZenPress ;)