Guida per creare i propri pulsanti di WordPress Editor

Molto probabilmente saprai che WordPress è in bundle con l'editor HTML WYSIWYG, TinyMCE. La varietà di funzionalità e la possibilità di estenderli tramite plugin lo rendono l'editor WYSIWYG più utilizzato al mondo. Tuttavia, WordPress non sfrutta tutte le sue funzionalità. WordPress lo personalizza e conserva solo parti che sono davvero utili per gli utenti, evitando di rovinare l'interfaccia utente. Ciò significa anche che alcune funzioni, ad esempio i pulsanti, sono state nascoste agli utenti. Puoi abilitare completamente i pulsanti MCE nascosti. In genere lo sono foglio di stile, sub, cenare pulsanti. Se anche quelli nascosti non soddisfano ancora le tue esigenze, devi creare un plugin TinyMCE per aggiungere il tuo. In questo tutorial, ti illustrerò le basi dell'aggiunta dei pulsanti di WordPress Editor creando un plug-in TinyMCE.

Prima di iniziare

Come accennato in precedenza, creeremo un nuovo plug-in TinyMCE il cui compito è aggiungere i nuovi pulsanti desiderati. Quindi quali pulsanti aggiungeremo? Cercheremo di aggiungere due semplici pulsanti: Capolettera e messaggi recenti, in cui il primo ti dà la possibilità di convertire una lettera selezionata in una lettera capolettera, e quest'ultima mostrerà i post recenti. Il codice genera questi pulsanti mostrati di seguito.

Creiamo una nuova cartella denominata wptuts-bottoni dell'editor (ovviamente, puoi cambiarlo in qualcos'altro se vuoi) nella tua directory dei temi (sto usando TwentyTwelve). Continua a creare due nuovi file, wptuts.php che invoca PHP personalizzato e l'altro chiamato wptuts-plugin.js dove si trovano gli snippet di codice JavaScript. Infine, apri il tema functions.php file e includi il nuovo creato wptuts.php file in esso. Nota, ricorda di definire esattamente il suo percorso:

 require ('wptuts-editor-buttons / wptuts.php');

Quindi dobbiamo preparare un codice per questi due pulsanti:

Capolettera - Il modo ideale per trasformare una lettera in capolettera è semplicemente racchiudere la lettera selezionata dall'utente all'interno di una classe di span HTML predefinita che definisce quella lettera come capolettera. Il codice CSS della classe mostrato di seguito, lo aggiunge al tuo tema style.css file:
```
 / * Aggiungi questo codice in style.css * / .dropcap float: left; font-size: 80px; padding-right: 7px; altezza della linea: 72px; 
```

messaggi recenti - Creeremo un shortcode che aggiungerà un elenco di post recenti nella pagina, apriremo il wptuts.php file e aggiungi il seguente codice:

 add_shortcode ('recent-posts', 'wptuts_recent_posts'); function wptuts_recent_posts ($ atts) extract (shortcode_atts (array ('numbers' => '5',), $ atts)); $ rposts = new WP_Query (array ('posts_per_page' => $ numbers, 'orderby' => 'date')); if ($ rposts-> have_posts ()) $ html = 'messaggi recenti
'; while ($ rposts-> have_posts ()) $ rposts-> the_post (); $ html. = sprintf ('%S
', get_permalink ($ rposts-> post-> ID), get_the_title (), get_the_title ());  $ html. = '
';  wp_reset_query (); return $ html;

Supponiamo che quando gli utenti fanno clic sul messaggi recenti pulsante, il browser aprirà una finestra di dialogo chiedendo loro il numero di post che vogliono mostrare. Dopo aver avuto quel numero, l'editor lo riempirà come argomento nel codice corto sopra. Ad esempio, se vogliamo mostrare sette post recenti, lo shortcode viene generato come segue:

 [numeri di post recenti = "7" /]

Registrazione di un nuovo plug-in TinyMCE

Supponendo che abbiamo già il nuovo plug-in, dobbiamo registrarlo con WordPress per integrarlo nell'editor TinyMCE. Il codice è mostrato di seguito:

 add_action ('init', 'wptuts_buttons'); function wptuts_buttons () add_filter ("mce_external_plugins", "wptuts_add_buttons"); add_filter ('mce_buttons', 'wptuts_register_buttons');  function wptuts_add_buttons ($ plugin_array) $ plugin_array ['wptuts'] = get_template_directory_uri (). '/Wptuts-editor-buttons/wptuts-plugin.js'; return $ plugin_array;  function wptuts_register_buttons ($ buttons) array_push ($ buttons, 'dropcap', 'showrecent'); // dropcap ',' recentposts return $ buttons;

L'importante gancio per filtro mce_external_plugins è usato per collegare il nuovo plugin a TinyMCE. Abbiamo bisogno di passare un ID del plugin (wptuts) e l'URL assoluto che punta al nostro wptuts-plugin.js file. Il mce_buttons hook è usato per dire all'editor TinyMCE quali pulsanti del nostro plugin vogliamo mostrare. Il capolettera e showrecent sono i valori ID di questi pulsanti che intendiamo creare. Tieni a mente questi valori, saranno utilizzati in seguito.

Configurazione del plugin TinyMCE

In generale, penso che il modo migliore per estendere o sviluppare qualcosa su una piattaforma sia consultare la documentazione per quella piattaforma. TinyMCE ha una sua wiki che potresti trovare utile. Seguendo un esempio di come creare un plugin TinyMCE, abbiamo il seguente codice di inizializzazione:

 (function () tinymce.create ('tinymce.plugins.Wptuts', / ** * Inizializza il plugin, questo verrà eseguito dopo che il plugin è stato creato. * Questa chiamata viene eseguita prima che l'istanza dell'editor abbia terminato l'inizializzazione quindi usa l'evento onInit * dell'istanza dell'editor per intercettare quell'evento. * * @param tinymce.Editor ed Editor istanza in cui il plug-in è inizializzato. * @param string url URL assoluto in cui si trova il plug-in. * / init: function (ed, url) , / ** * Crea istanze di controllo basate sul nome incomming.Questo metodo normalmente non * è necessario in quanto il metodo addButton della classe tinymce.Editor è un modo più semplice di aggiungere pulsanti * ma a volte è necessario creare controlli più complessi come elenchi di caselle, pulsanti divisi, ecc. Quindi questo metodo * può essere utilizzato per crearli. * * @param String n Nome del controllo da creare. * @param tinymce.ControlManager  cm Gestore di controlli per utilizzare inorder per creare un nuovo controllo. * @return tinymce.ui.Control Nuovo controllo inst ance o null se non è stato creato alcun controllo. * / createControl: function (n, cm) return null; , / ** * Restituisce informazioni sul plug-in come array nome / valore. * Le chiavi attuali sono longname, author, authorurl, infourl e version. * * @return Object Array nome / valore contenente informazioni sul plugin. * / getInfo: function () return longname: 'Wptuts Buttons', autore: 'Lee', authorurl: 'http://wp.tutsplus.com/author/leepham', infourl: 'http: // wiki. moxiecode.com/index.php/TinyMCE:Plugins/example ', version: "0.1"; ); // Registrati plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts); ) ();

Ricorda di aggiungere questo codice nel wptuts-plugin.js file. Abbiamo lasciato per te i commenti del codice per capire facilmente cosa sta succedendo. Il codice sopra riportato fa solo due compiti principali:

Innanzitutto, definendo un nuovo plugin TinyMCE in modo sicuro chiamando TinyMCE creare metodo. Il comportamento del nostro plugin sarà definito nel dentro e CreateControl funzioni. Puoi vedere che le informazioni del plugin sono dichiarate nel ottenere informazioni funzione anche. Il nostro plugin avrà il nome Wptuts e l'ID wptuts come potete vedere.
Infine, aggiungi semplicemente il nostro nuovo plug-in a TinyMCE Plugin Manager.

Creazione di pulsanti

Nel dentro funzione, iniziamo a creare i nostri pulsanti. Il codice visto come segue:

 (function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', immagine: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Aggiungi post recenti shortcode', cmd: 'showrecent', immagine: url + '/recent.jpg');, // ... Hidden code); // Register plugin tinymce.PluginManager.add ('wptuts', tinymce.plugins.Wptuts);) ();

Usando il addButton metodo del Ed oggetto, diciamo all'editor corrente che vogliamo creare tutti questi pulsanti. Questo metodo accetta due argomenti:

Il primo è l'ID del pulsante. Nella sezione precedente, lo abbiamo menzionato. Deve essere uguale a quello che abbiamo definito prima. Altrimenti, non funzionerà correttamente.
Il secondo è l'oggetto che contiene le informazioni del pulsante, come ad esempio:
- Il titolo del pulsante
- Il più importante: l'attività che farà il pulsante. Dai un'occhiata al cmd proprietà, ha il valore di showrecent. Questo è l'ID del comando che viene eseguito ogni volta che viene chiamato, entreremo nei dettagli a breve
- L'immagine del pulsante. Si noti che il parametro URL contiene l'URL della directory assoluta in cui si trova il nostro plug-in, questo rende più facile fare riferimento all'immagine che si desidera. Quindi devi inserire la tua immagine nella cartella del plugin e assicurarti che il suo nome sia impostato precisamente su Immaginevalore.

Ora, controlla l'editor di WordPress e vedremo i nostri pulsanti visualizzati. Tuttavia, non fanno nulla al momento.

I nostri pulsanti sono apparsi.

Aggiungere comandi di pulsanti

Abbiamo definito il nome dei comandi che verranno eseguiti dai nostri pulsanti, ma non abbiamo ancora definito ciò che verrà effettivamente eseguito. In questo passaggio, imposteremo le cose che faranno i nostri pulsanti. Dentro il dentro funzione, continua ad aggiungere questo codice come mostrato:

 (function () tinymce.create ('tinymce.plugins.Wptuts', init: function (ed, url) ed.addButton ('dropcap', title: 'DropCap', cmd: 'dropcap', immagine: url + '/dropcap.jpg'); ed.addButton ('showrecent', title: 'Aggiungi post recenti shortcode', cmd: 'showrecent', immagine: url + '/recent.jpg'); ed. addCommand ('dropcap', function () var selected_text = ed.selection.getContent (); var return_text = "; return_text = ''+ selected_text +''; ed.execCommand ('mceInsertContent', 0, return_text); ); ed.addCommand ('showrecent', function () var number = prompt ("Quanti post vuoi mostrare?"), shortcode; if (numero! == null) numero = parseInt (numero); if (numero > 0 && numero <= 20)  shortcode = '[recent-post number="' + number + '"/]'; ed.execCommand('mceInsertContent', 0, shortcode);  else  alert("The number value is invalid. It should be from 0 to 20.");   ); , //… Hidden code ); // Register plugin tinymce.PluginManager.add( 'wptuts', tinymce.plugins.Wptuts ); )();

Ora il ed.addCommand il metodo ci aiuterà ad aggiungere un nuovo comando. È necessario passare l'ID del comando e la funzione di callback che verrà eseguita se è stata chiamata da ed.execCommand metodo. Nota che Ed rappresenta il tinyMCE.activeEditor oggetto. Diamo un'occhiata alle funzioni di callback:

Nel capolettera comando, il desiderio che vogliamo è quando un utente seleziona una lettera e fa clic su Capolettera pulsante, la lettera verrà quindi trasformata in forma di capolettera. Allora, come prendiamo quella lettera? Bene, il ed.selection.getContent il metodo lo farà per noi. Quindi, una volta ottenuta questa lettera, la racchiudiamo all'interno di a campata elemento. Ricorda di impostare il valore della classe di questo elemento su capolettera che abbiamo definito prima, giusto? Infine, abbiamo il testo completo che deve essere inserito nuovamente nell'editor. TinyMCE ha un comando predefinito con il nome mceInsertContent che è usato per inserire contenuti specifici nell'editor, come usarlo è mostrato sopra. Il contenuto verrà passato come terzo argomento del mceInsertContent metodo.
Una cosa simile accade nel showrecent comando come nel capolettera comando, tranne che non è necessario ottenere il contenuto selezionato dell'utente. Semplicemente visualizziamo una finestra di dialogo che chiede all'utente quanti messaggi vogliono visualizzare, quindi inseriamo quel valore numerico in una sintassi appropriata per lo shortcode.

Registrazione di CSS personalizzati per pulsanti (facoltativamente)

Invece di aggiungere testo puro quando i pulsanti inseriscono il contenuto nell'editor visivo, possiamo renderlo molto più visivo registrando CSS personalizzati per i nostri pulsanti. Dipende dal tipo di dati del contenuto e puoi scegliere uno stile appropriato. Ad esempio, il nostro CapoletteraLo stile di s può essere uguale a quello mostrato sul front-end. Così puoi prendere il suo codice CSS nella parte superiore di questo post, quindi inserirlo nel redattore style.css file (per impostazione predefinita, vedere add_editor_style per il detais).

Per gli shortcode, potrebbero non avere un elemento HTML. Come dovremmo modellarli? Bene, questa situazione è molto più complessa per raggiungere il risultato, ma non è impossibile (puoi vedere alcuni pulsanti di WordPress predefiniti come "Aggiungi media"). Tuttavia, può ancora essere un problema, avvolgendo lo shortcode in un elemento HTML e poi lo styling come sopra. È abbastanza semplice, non del tutto perfetto però. In questo post, non ci concentreremo su questa complessa elaborazione.

risultati

Infine, i risultati che otteniamo sono mostrati come segue:

Prova il pulsante Dropcap.

Quindi, sul front-end:

Lettera a goccia nel front-end.

Anche il pulsante Messaggi recenti funziona bene:

Il pulsante Post recenti ha funzionato.

Conclusione

Va bene, abbiamo coperto una pratica che è abbastanza semplice e facile da seguire. Potresti notare che il pulsante Messaggi recenti ti consente di regolare un'impostazione (il numero di post mostrati). Sicuramente sai che abbiamo usato il JavaScript predefinito, richiesta, per raggiungere questo. Cosa succede se vuoi un popup più complesso, che ha molte impostazioni piuttosto che una sola? Bene, in un altro post ne discuteremo e proveremo un altro approccio.

Ogni commento su questo post sarà apprezzato. Grazie per la lettura, e ci vediamo dopo.

Riferimento

TinyMCE_Custom_Buttons
Creazione di un plugin TinyMCE

Codice