Come creare un plugin TinyMCE WordPress

Se sei uno sviluppatore WordPress, a un certo punto potresti trovare la possibilità di personalizzare o estendere l'editor visivo di WordPress. Ad esempio, è possibile aggiungere un pulsante alla barra degli strumenti dell'editor visivo per consentire al client di inserire facilmente una casella di testo o un pulsante di invito all'azione senza scrivere codice HTML. In questo articolo, ti mostreremo come creare un plugin TinyMCE in WordPress.

Requisiti

Questo tutorial è destinato agli utenti esperti. Se sei un utente di livello principiante che vuole solo estendere l'editor visuale, consulta il plugin TinyMCE Advanced o dai un'occhiata a questi suggerimenti sull'utilizzo dell'editor visuale di WordPress.

Per questo tutorial, avrai bisogno delle abilità di codifica di base, dell'accesso a un'installazione di WordPress in cui puoi provarlo.

È una cattiva pratica sviluppare plugin su un sito web dal vivo. Un errore minore nel codice può rendere il tuo sito inaccessibile. Ma se devi farlo su un sito dal vivo, quindi almeno prima fai il backup di WordPress.

Creazione del primo plug-in TinyMCE

Inizieremo creando un plug-in WordPress per registrare il nostro pulsante della barra degli strumenti personalizzato TinyMCE. Quando si fa clic, questo pulsante consente all'utente di aggiungere un collegamento con una classe CSS personalizzata.

Il codice sorgente verrà fornito per intero alla fine di questo articolo, ma fino ad allora, creiamo il plugin passo dopo passo.

Innanzitutto, devi creare una directory in wp-content / plugins cartella della tua installazione di WordPress. Assegna un nome a questa cartella TinyMCE-custom-link-class.

Da qui, inizieremo ad aggiungere il nostro codice plugin.

L'intestazione del plugin

Crea un nuovo file nella directory dei plugin che abbiamo appena creato e assegna un nome a questo file TinyMCE-custom-link-class.php. Aggiungi questo codice al file e salvalo.

 / ** * Nome plugin: TinyMCE Custom Link Class * Plugin URI: http://wpbeginner.com * Versione: 1.0 * Autore: WPBeginner * URI autore: https://www.wpbeginner.com * Descrizione: Un semplice plugin TinyMCE per aggiungere una classe di collegamento personalizzata nell'editor di Visual * Licenza: GPL2 * / 

Questo è solo un commento in PHP, che indica a WordPress il nome del plugin, oltre all'autore e una descrizione.

Nell'area di amministrazione di WordPress, attiva il nuovo plug-in selezionando Plugin> Installed Plugin, quindi facendo clic su Attiva accanto al plug-in TinyMCE Custom Link Class:

Impostazione della nostra classe di plugin

Se due plugin di WordPress hanno funzioni con lo stesso nome, questo potrebbe causare un errore. Eviteremo questo problema facendo avvolgere le nostre funzioni in una classe.

 class TinyMCE_Custom_Link_Class / ** * Costruttore. Chiamato quando il plugin è inizializzato. * / function __construct ()  $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class; 

Questo crea la nostra classe PHP, insieme a un costrutto, che viene chiamato quando raggiungiamo la linea $ tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;.

Qualsiasi funzione che aggiungiamo all'interno di questa classe non dovrebbe entrare in conflitto con altri plugin di WordPress.

Inizia la configurazione del nostro plugin TinyMCE

Quindi, dobbiamo dire a TinyMCE che potremmo voler aggiungere il nostro pulsante personalizzato alla barra degli strumenti di Visual Editor. Per fare questo, possiamo usare le azioni di WordPress - in particolare, il dentro azione.

Aggiungi il seguente codice all'interno del tuo plugin __costruire() funzione:

 if (is_admin ()) add_action ('init', array ($ this, 'setup_tinymce_plugin'));  

Questo controlla se siamo nell'interfaccia di amministrazione di WordPress. Se lo siamo, quindi chiede a WordPress di eseguire il setup_tinymce_plugin funzione all'interno della nostra classe quando WordPress ha terminato la sua routine di caricamento iniziale.

Quindi, aggiungi il setup_tinymce_plugin funzione:

 / ** * Verifica se l'utente corrente può modificare Post o Pagine e utilizza l'editor visivo * In tal caso, aggiungi alcuni filtri per registrare il nostro plug-in * / function setup_tinymce_plugin () // Verifica se l'utente WordPress è loggato puoi modificare Post o Pagine // In caso contrario, non registrare il nostro plugin TinyMCE se (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) return;  // Controlla se l'utente WordPress loggato ha l'editor visivo abilitato // In caso contrario, non registrare il nostro plugin TinyMCE if (get_user_option ('rich_editing')! == 'true') return;  // Imposta alcuni filtri add_filter ('mce_external_plugins', array (& $ this, 'add_tinymce_plugin')); add_filter ('mce_buttons', array (& $ this, 'add_tinymce_toolbar_button'));  

Questo controlla se l'utente che ha effettuato l'accesso a WordPress può modificare Post o Pagine. Se non ci riescono, non ha senso registrare il plugin TinyMCE per quell'utente, poiché non vedranno mai l'editor visivo.

Verifichiamo quindi se l'utente sta utilizzando l'editor visivo, poiché alcuni utenti di WordPress lo disattivano tramite Utenti> Profilo. Di nuovo, se l'utente non sta usando l'editor visivo, restituiamo (esci) la funzione, poiché non è necessario fare altro.

Infine, aggiungiamo due filtri WordPress - mce_external_plugins e mce_buttons, per chiamare le nostre funzioni che caricheranno il file Javascript richiesto per TinyMCE e aggiungeranno un pulsante alla barra degli strumenti di TinyMCE.

Registrazione del file e del pulsante Javascript nell'editor visivo

Andiamo avanti e aggiungiamo il add_tinymce_plugin funzione:

 / ** * Aggiunge un file JS compatibile con plugin TinyMCE all'istanza di TinyMCE / Visual Editor * * @param array $ plugin_array Array di plug-in TinyMCE registrati * @return array Array modificato di plug-in TinyMCE registrati * / function add_tinymce_plugin ($ plugin_array) $ plugin_array ['custom_link_class'] = plugin_dir_url (__FILE__). 'TinyMCE-custom-link-class.js'; return $ plugin_array;  

Questa funzione dice a TinyMCE che è necessario caricare i file Javascript memorizzati nel $ plugin_array array. Questi file Javascript diranno a TinyMCE cosa fare.

Abbiamo anche bisogno di aggiungere del codice al add_tinymce_toolbar_button funzione, per comunicare a TinyMCE il pulsante che vorremmo aggiungere alla barra degli strumenti:

 / ** * Aggiunge un pulsante a TinyMCE / Visual Editor che l'utente può fare clic su * per inserire un collegamento con una classe CSS personalizzata. * * @param array $ buttons Array dei pulsanti TinyMCE registrati * @return array Array modificato di pulsanti TinyMCE registrati * / function add_tinymce_toolbar_button ($ buttons) array_push ($ buttons, '|', 'custom_link_class'); ritorno $ pulsanti;  

Questo spinge due elementi sull'array dei pulsanti TinyMCE: un separatore (|) e il nome programmatico del nostro pulsante (custom_link_class).

Salva il tuo plugin, quindi modifica una pagina o un post per visualizzare l'editor visivo. È probabile che la barra degli strumenti non venga visualizzata in questo momento:

Non preoccuparti: se usiamo la console dell'ispettore del nostro browser web, vedremo che un errore e un avviso 404 sono stati generati da TinyMCE, che ci dice che non è possibile trovare il nostro file Javascript.

Va bene - significa che abbiamo registrato con successo il nostro plugin personalizzato TinyMCE, e ora dobbiamo creare il file Javascript per dire a TinyMCE cosa fare.

Creazione del plugin Javascript

Crea un nuovo file nel tuo wp-content / plugins / TinyMCE-custom-link-class cartella e chiamarlo link-class.js TinyMCE-custom-. Aggiungi questo codice nel tuo file js:

 (function () tinymce.PluginManager.add ('custom_link_class', function (editor, url) );) (); 

Questo chiama la classe TinyMCE Plugin Manager, che possiamo usare per eseguire una serie di azioni relative al plugin TinyMCE. In particolare, stiamo aggiungendo il nostro plugin a TinyMCE usando il Inserisci funzione.

Questo accetta due oggetti; il nome del plugin (custom_link_class) e una funzione anonima.

Se hai familiarità con il concetto di funzioni nella codifica, una funzione anonima è semplicemente una funzione senza nome. Per esempio, function foobar () ... è una funzione che potremmo chiamare da qualche altra parte nel nostro codice usando foobar ().

Con una funzione anonima, non possiamo chiamare quella funzione da qualche altra parte nel nostro codice - è solo chiamata al punto il Inserisci() la funzione è invocata.

Salva il tuo file Javascript, quindi modifica una pagina o un post per visualizzare l'editor visivo. Se tutto ha funzionato, vedrai la barra degli strumenti:

In questo momento, il nostro pulsante non è stato aggiunto a quella barra degli strumenti. Questo perché abbiamo solo detto a TinyMCE che siamo un plugin personalizzato. Ora dobbiamo dire a TinyMCE cosa fare - cioè aggiungere un pulsante alla barra degli strumenti.

Aggiorna il tuo file Javascript, sostituendo il codice esistente con il seguente:

 (function () tinymce.PluginManager.add ('custom_link_class', function (editor, url) // Aggiungi pulsante a Visual Editor Toolbar editor.addButton ('custom_link_class', title: 'Insert Button Link', cmd: ' custom_link_class ',););) (); 

Nota la nostra funzione anonima ha due argomenti. Il primo è il editore istanza: questo è l'editor visivo TinyMCE. Allo stesso modo possiamo chiamare varie funzioni sul PluginManager, possiamo anche chiamare varie funzioni sul editore. In questo caso, stiamo chiamando il addButton funzione, per aggiungere un pulsante alla barra degli strumenti.

Salva il tuo file Javascript e torna al tuo Visual Editor. A prima vista, nulla sembra essere cambiato. Tuttavia, se si posiziona il cursore del mouse sulla destra dell'icona più a destra della riga superiore, è necessario che venga visualizzato un suggerimento:

Abbiamo aggiunto con successo un pulsante alla barra degli strumenti, ma è necessaria un'immagine. Aggiungi il seguente parametro al addButton funzione, sotto il titolo: linea:

immagine: url + '/icon.png', 

url è l'URL del nostro plugin. Questo è utile se vogliamo fare riferimento a un file immagine all'interno della nostra cartella plugin, poiché possiamo aggiungere il nome del file immagine all'URL. In questo caso, avremo bisogno di un'immagine chiamata icon.png nella cartella del nostro plugin. Usa l'icona sotto:

Ricarica il nostro Visual Editor e vedrai il tuo pulsante con l'icona:

Definire un comando da eseguire

In questo momento, se fai clic sul pulsante, non accadrà nulla. Aggiungiamo un comando a TinyMCE dicendogli cosa fare quando viene cliccato il nostro pulsante.

Nel nostro file Javascript, aggiungi il seguente codice sotto la fine del editor.addButton sezione:

 // Aggiungi comando quando il pulsante ha fatto clic su editor.addCommand ('custom_link_class', function () alert ('Pulsante cliccato!');); 

Ricarica il nostro Visual Editor, fai clic sul pulsante e apparirà un avviso che conferma che abbiamo appena fatto clic sul pulsante:

Sostituiamo l'avviso con un prompt, chiedendo all'utente il collegamento che desidera avvolgere attorno al testo selezionato nell'Editor visivo:

 // Aggiungi comando quando si fa clic sul pulsante editor.addCommand ('custom_link_class', function () // Verifica di aver selezionato del testo che vogliamo collegare var text = editor.selection.getContent ('format': 'html' ); if (text.length === 0) alert ('Per favore seleziona del testo da collegare.'); return; // Chiede all'utente di inserire un URL var result = prompt ('Enter the link'); if (! result) // Utente annullato - exit return; if (result.length === 0) // L'utente non ha inserito un URL - exit return; // inserisce il testo selezionato di nuovo nell'editor, wrapping in un tag anchor editor.execCommand ('mceReplaceContent', false, '' + text + '');); 

Questo blocco di codice esegue alcune azioni.

Per prima cosa, controlliamo se l'utente ha selezionato del testo da collegare nell'editor visivo. In caso contrario, vedranno un avviso che dice loro di selezionare del testo da collegare.

Successivamente, chiediamo loro di inserire un link, controllando di nuovo se lo hanno fatto. Se hanno cancellato, o non hanno inserito nulla, non facciamo altro.

Finalmente, eseguiamo il execCommand funzione nell'editor TinyMCE, in particolare nell'esecuzione di mceReplaceContent azione. Sostituisce il testo selezionato con il nostro codice HTML, che comprende un link di ancoraggio con class = "button", utilizzando il testo selezionato dall'utente.

Se tutto ha funzionato, vedrai il tuo testo selezionato ora collegato nell'Editor visuale e nelle viste Testo, con la classe impostata su pulsante:

Sommario

Abbiamo creato con successo un plugin per WordPress che aggiunge un pulsante all'editor visuale TinyMCE in WordPress. Questo tutorial ha inoltre trattato alcune delle basi dell'API di TinyMCE e dei filtri di WordPress disponibili per le integrazioni di TinyMCE.

Abbiamo aggiunto il codice in modo che quando un utente fa clic sul nostro pulsante personalizzato, viene richiesto di selezionare del testo nell'Editor visivo, che può quindi collegare a un URL di loro scelta. Infine, il nostro plugin sostituisce il testo selezionato con una versione collegata che contiene una classe CSS personalizzata chiamata pulsante.

Speriamo che questo tutorial ti abbia aiutato a imparare come creare un plugin TinyMCE per WordPress. Si consiglia inoltre di consultare la nostra guida su come creare un plug-in WordPress specifico del sito.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.