WordPress: la funzione wp_editor e l’uso avanzato di TinyMce Editor per le categorie e i riassunti
Introdotta nella versione 3.3 di WordPress e recentemente aggiornata, la funzione di Core wp_editor di WordPress permette di instanziare un “editor ricco”, quello che in inglese si definisce comunemente come Rich Text Editor, ovvero un editor visuale WYSIWYG con cui scrivere e formattare i contenuti per le vostre pagine web senza conoscere il linguaggio HTML.
In questo articolo vedremo come utilizzare questa funzione per raggiungere due obiettivi a mio avviso molto comuni ed utili agli utilizzatori avanzati di WordPress:
- Aggiungere un editor visuale per le descrizioni di categoria
- Trasformare il campo Riassunto in un rich text editor
Le possibilità sono infinite e questi rappresentano solo due esempi pratici per mostrarvi l’uso di questa funzione.
Come usare la funzione wp_editor di WordPress
Prima di tutto vediamo di capire il funzionamento della funzione wp_editor e che ricordiamo essere built-in nel core di WP:
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>
La funzione ha due parametri obbligatori e un oggetto che contiene le impostazioni dell’editor che andrete a istanziare:
- $content rappresenta il contenuto iniziale dell’editor e sarà tipicamente rappresentato da testo in formato HTML
- $editor_id rappresenta l’id della textarea presente in pagina che andrete a trasformare in editor avanzato. Nel nostro caso, ad esempio, indicheremo l’id della textarea relativa al campo Riassunto
- $settings è un array, nella forma chiave->valore che indica le impostazioni per l’editor.
Trovate i riferimenti ufficiali nella pagina del Codex: http://codex.wordpress.org/Function_Reference/wp_editor
Aggiungere un editor TinyMce alle descrizioni di categoria
Nel caso il vostro tema utilizzi la descrizione della categoria come contenuto della pagina che mostra l’archivio degli articoli della stessa, potreste avere la necessità di inserire, in modo comodo, del “contenuto ricco” nel campo descrizione (normalmente reso come semplice textarea).
Vediamo quindi come trasformare il campo categoria in un editor avanzato con l’utilizzo di TinyMce e la funzione wp_editor.
Se desiderate “stampare” il contenuto del campo Descrizione della categoria nel vostro tema WordPress o cercare dove viene visualizzata quell’informazione dovete utilizzare/cercare la funzione category description:
<?php echo category_description( $category_id ); ?>
Il codice che segue potete inserirlo nel file functions.php del vostro tema.
Per cominciare dobbiamo aggiungere alla pagina di modifica delle categorie il nostro editor TinyMce utilizzando la funzione wp_editor ed un filtro, ecco come:
add_filter('edit_category_form_fields', 'tinymce_categoria');
function tinymce_categoria($category)
{
?>
<table class="form-table">
<tr class="form-field">
<th scope="row" valign="top"><label for="description"><?php _ex('Description', 'Taxonomy Description'); ?></label></th>
<td>
<?php
$settings = array('wpautop' => true, 'media_buttons' => true, 'quicktags' => true, 'textarea_rows' => '15', 'textarea_name' => 'description' );
wp_editor(wp_kses_post($category->description , ENT_QUOTES, 'UTF-8'), 'cat_description', $settings);
?>
<br />
<span class="description"><?php _e('The description is not prominent by default; however, some themes may show it.'); ?></span>
</td>
</tr>
</table>
<?php
}
A questo punto avremo in pagina il nostro nuovo editor TinyMce, ma vedremo ancora il campo descrizione originale. Dato che non esiste un filtro per fare questa operazione in modo pulito andremo ad aggiungere un po’ di javascript che rimuoverà dal DOM (html della pagina) l’area con la textarea originale. Aggiungiamo quindi:
add_action('admin_head', 'rimuovi_textarea_descrizione');
function rimuovi_textarea_descrizione()
{
global $current_screen;
if ( $current_screen->id == 'edit-category' )
{
?>
<script type="text/javascript">
jQuery(function($) {
$('textarea#description').closest('tr.form-field').remove();
});
</script>
<?php
}
}
A questo punto la nostra pagina di modifica della categoria è pronta, ma manca un altro piccolo accorgimento. WordPress infatti fa dei controlli sul contenuto inserito nella textarea del campo Descrizione in modo che contenga HTML corretto e TinyMce potrebbe produrre dell’HTML non proprio perfetto. Andiamo quindi a disabilitare i filtri sul salvataggio del dato:
remove_filter( 'pre_term_description', 'wp_filter_kses' ); remove_filter( 'term_description', 'wp_kses_data' );
Giunti a questo punto dovreste essere in grado di salvare contenuti formattati ed aggiungere immagini nel campo Descrizione.
Io ho fatto un piccolo passo in più e ho aggiunto un ulteriore editor (che mi serviva per motivi legati alla SEO del sito in questione) sempre grazie alla funzione wp_editor.
Ecco il risultato finale:
Il codice è stato riadattato da questo articolo.
Aggiungere un Editor TinyMce per il campo Riassunto (Excerpt)
Mi è capitato più di qualche volta di sviluppare temi WordPress e di voler utilizzare il campo Riassunto (Excerpt) per visualizzare informazioni su post (e pagine) in contesti diversi dalla singola pagina che mostra tutto il contenuto.
Spesso quindi ho avuto la necessità di aggiungere testo formattato o immagini in questo campo e mi risultava scomodo farlo direttamente utilizzando l’HTML. Lo stesso obiettivo si può raggiungere utilizzando plugin come Rich Text Excerpt, ma per i puristi e i più attenti alle performance è possibile trasformare la normale textarea destinata al campo Riassunto con un editor TinyMce.
Ecco il codice da aggiungere al vostro file functions.php (che ricordo trovate all’interno della cartella del vostro tema):
function rimuovi_metabox_riassunto() {
global $post_type;
if (isset($post_type) && post_type_supports($post_type, 'excerpt')) remove_meta_box('postexcerpt', $post_type, 'normal');
}
add_action('admin_menu', 'rimuovi_metabox_riassunto');
function aggiungi_metabox_riassunto() {
global $post_type;
if (isset($post_type) && post_type_supports($post_type, 'excerpt')) add_meta_box('postexcerpt', __('Excerpt'), 'riassunto_tinymce', $post_type, 'normal', 'high');
}
add_action( 'add_meta_boxes', 'aggiungi_metabox_riassunto');
function riassunto_tinymce( $post ) {
$settings = array( 'textarea_rows' => '12', 'quicktags' => false, 'tinymce' => true);
wp_editor(html_entity_decode(stripcslashes($post->post_excerpt)), 'excerpt', $settings);
echo '<p><em>Descrizione per il tuo campo Riassunto</em></p>';
}
La prima funzione rimuovi_metabox_riassunto rimuove fisicamente il meta box che contiene la textarea con il campo Riassunto solo nei post/pagine in cui è effettivamente supportato.
La seconda funzione aggiungi_metabox_riassunto aggiunge un meta box per il campo Riassunto che contiene l’editor visuale TinyMce creato dalla terza funzione riassunto_tinymce.
Passerete quindi dalla normale textarea del campo Riassunto:
a un rich text editor come questo:
A questo punto il limite sta solo nella vostra fantasia e nel decidere dove inserire l’html che ora avete a disposizione nel tema WordPress del sito web che state sviluppando.
Piccolo suggerimento… qualora voleste aggiungere il campo Riassunto (excerpt) anche alle Pagine (di default c’è solo negli Articoli) aggiungete il seguente codice sempre nel vostro file functions.php:
add_action( 'init', 'aggiungi_excerpts_alle_pagine' );
function aggiungi_excerpts_alle_pagine() {
add_post_type_support( 'page', 'excerpt' );
}
Spero che queste due funzionalità possano tornare utili agli sviluppatori che seguono Your Inspiration Web, in tal caso attendo i vostri commenti.
Alla prossima!
L'autore
12 commenti
Trackback e pingback
-
Wordpress: la funzione wp_editor e l'uso avanza...
[…] Introdotta nella versione 3.3 di Wordpress e recentemente aggiornata, la funzione di Core wp_editor di Wordpress permette di instanziare… -
WordPress per i tuoi clienti: semplificare l’interfaccia del popolare CMS — Parte 3 | Your Inspiration Web
[…] che permette di far scrollare il contenuto interno dell’editor mantenendo visibili i pulsanti di TinyMCE per la formattazione dei…
Salve, con l’ultimo aggiornamento di WordPress non riesco più a visualizzare il codice sorgente ottimizzato e creato dall’editore una volta terminato l’articolo o pagina, lato visuale.
Il plugin TinyMCE Advanced 4.1.1 non mi chiede neanche un ulteriore aggiornamento.
Grazie
Ottimo articolo, raro trovare in Italiano risorse così chiare.
io pero’ lascerei il settaggio di ‘quicktags’ => true come da default, così si puo’ anche controllare ed eventualmente ripulire il codice dalla tab “testo” (mai fidarsi al 100% degli editor wysiwyg) :)
ciao,
sono riuscito a inserire la barra nella textarea dei commenti degli articoli…
ci sono due righe di pulsanti…solo che la seconda si attiva solo se premi il pulsante toogle, che sarebbe il terz’ultimo della prima riga…
c’è un modo che la seconda riga si possa attivare di default senza premere quel pulsante?
Grazie @Diego.
@peppe, per quello che ne so quando si clicca il “toggle” la prima volta l’impostazione viene mantenuta e salvata da WordPress, perciò nei successivi accessi dovresti trovare le 2 righe di pulsanti sempre aperte. Se così non fosse potrebbe esserci un errore, ma sinceramente non saprei cosa consigliarti per risolvere. :(
ti ringrazio per la risposta….
il mio timore è che per gli utenti potrebbe non essere immediato il fatto che devo premere sul pulsante per estendere il menu.
pensavo che ci potesse essere un modo per imporre al pulsante di essere “premuto” di default. per quel che ho notato io il codice recita aria-pressed=false e quando viene premuto diventa true..per cui stavo cercando in giro una sorta di funzione che impoga a questo valore di essere true…
Ora ho capito. Pensavo che il problema fosse legato al fatto che non ti manteneva l’impostazione una volta cliccato.
Purtroppo anche in questo caso non saprei bene come aiutarti, ma ti consiglio di guardare la documentazione della funzione wp_editor e anche di TinyMce per scoprire se c’è modo di abilitare la seconda riga come default.
In caso contrario potresti passare al “superaccrocchio” inserendo del javascript che attiva la seconda riga se il pulsante se non è già attivo.
Grosso modo il js dovrebbe controllare lo stato del pulsante e in caso simularci il click.
Ciao,
potrei sapere il codice che avevi scritto per l’inserimento dell’editor nell’area dei commenti?
Grazie!
Ciao
Sono un po’ neofita, perciò provo a copiare ed incollare nel file function.php del mio tema il codice descritto, ma wordpress va in palla e lo schermo appare tutto bianco. Questo comportamento mi è già capitato con altri script che mi interessavano. Qualcuno sa spigarmi il motivo?
ciao a tutti, sto calpestando da poco il mondo WP e leggendo l’articolo ho qualche difficoltà di comprensione.
io dovrei trasformare una textarea in un edito cosi da permettere al cliente l’inserimento della formattazione che desidera ed il testo che lui ritiene piu oppurtuno. Come faccio esattamente passaggio per passaggio? grazie
Salve Niky trovo interessantissimi i tuoi insegnamenti, e a tal proposito volevo porti una domanda.
Sto realizando il mio portale e ho la necessità di inserire le donazioni online, ho acquistato un plugin chiamato totaldonation, per creare delle campagne ora sto avendo difficoltà nell’inserimento dello shorcode nelle campagne che creo, cerco di spiegarmi meglio.
in una pagina portfolio creo la mia campagna, nel content aggiungerò lo shortcode [totaldonations] dove mi esploderà tutto il necessario per effettuare la donazione, e fin qui tutto ok.
poi ho aggiunto il campo riassunto dove metto alcune righe di descrizione e questo shortcode [totaldonations-progress-bar campaign=”Prova Campagna4″ button=”no” button_text=”Dona Ora” text=”no”] che mi occorre per visualizzare in home la barra per l’avanzamento dell’obbiettivo.
ora mi chiedo ma non è possibile integrarlo all’interno del function.php per renderlo automatico l’inserimento nelle pagine di portfolio? “o anche selezionabile”.
E nel campo riassunto visto che nello shortcode è presente il tag campaign, che non è altro il titolo che darò alla pagina si possa compilare automaticamente?
Spero di essere stato abbastanza chiaro nel frattempo ti ringrazio anticipatamente se volessi rispondermi saluti Marco.