Come migliorare e personalizzare l’editor di WordPress

personalizza-editor-wordpress

personalizza-editor-wordpress
Per un blogger l’editor è sicuramente uno strumento di lavoro molto importante per la stesura dei propri articoli. In questo post voglio segnalarti dei suggerimenti per apportare delle piccole migliorie sicuramente utili al nostro editor di WordPress.

NOTA: in tutti gli esempi riportati qui di seguito le modifiche andranno applicate al file functions.php del tema in uso

Più tag HTML a disposizione

L’editor di WordPress per impostazione predefinita non consente l’inserimento negli articoli dei tag HTML che non sono compatibili con lo standard XHTML 1.0. Per farvi un esempio non è possibile inserire del contenuto dentro a degli iframe (personalmente non lo farei comunque), ma naturalmente ognuno di noi ha le sue esigenze quindi perché non poterlo fare? Nel codice qui sotto è preso l’esempio proprio del tag iframe ma naturalmente si potrà decidere quale tag usare aggiungendolo semplicemente alla variabile $ext.

function fb_change_mce_options($initArray) {
$ext = 'iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight| marginwidth|src]';
if ( isset( $initArray['extended_valid_elements'] ) ) {
$initArray['extended_valid_elements'] .= ',' . $ext;
} else {
$initArray['extended_valid_elements'] = $ext;
}
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

NOTA: Non verrà visualizzato nell’editor nessun bottone corrispondente al tag che dovrà essere inserito normalmente come codice.

Personalizza gli elementi block

Gli elementi blocco che trovi nel menu a tendina dell’editor visuale possono essere modificati con aggiunte o rimozioni varie intervenendo nei tag contenuti in (theme_advanced_blockformats) e (theme_advanced_disable) del codice seguente.

function fb_change_mce_buttons( $initArray ) {
//@see http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
$initArray['theme_advanced_disable'] = 'forecolor';
return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

custom-editor

Imposta l’editor HTML di default

Sicuramente non tutti amano usare l’editor WYSIWYG visualizzato di default in WordPress. Per tutti i puristi del codice HTML la soluzione è molto semplice, incollare questa riga di codice in functions.php.

add_filter('wp_default_editor', create_function('', 'return "html";'));

Inserire un contenuto di default nell’editor

Se hai la necessità di dover inserire un contenuto che sia uguale in tutti i tuoi post, per esempio un link, una promozione etc. ti basta semplicemente inserire questo codice in functions.php personalizzandone il contenuto inserito nella variabile $content.

add_filter( 'default_content', 'my_editor_content' );

function my_editor_content( $content ) {
$content = "Stai cercando un blog ricco di risorse per WordPress? WordPress Style è il posto giusto.";
return $content;
}

Visualizza i pulsanti nascosti di TinyMCE

Ebbene si TinyMCE ci nasconde qualcosa. Mi è capitato diverse volte di rispondere a delle discussioni riguardo la mancanza di alcuni pulsanti nel nostro amato editor. Ora ti svelo il segreto di come far comparire per magia alcuni pulsanti creduti inesistenti :-). Naturalmente andrai ad inserire il tutto in functions.php (tanto per cambiare).

function enable_more_buttons($buttons) {
$buttons[] = 'hr';
$buttons[] = 'fontselect';
$buttons[] = 'sup';
// etc, etc...
return $buttons;
}
add_filter("mce_buttons", "enable_more_buttons");

Naturalmente potrai aggiungere altri pulsanti scegliendoli dalla lista qui di seguito e inserendoli  semplicemente in questo modo:
$buttons[] = ‘nomepulsante’;
Lista pulsanti disponibili: bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, charmap, visualaid, anchor, newdocument, separator.

Fonti:
http://www.catswhocode.com/blog/killer-hacks-to-enhance-wordpress-editor
http://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

8 thoughts on “Come migliorare e personalizzare l’editor di WordPress

  1. Interessante articolo! mi sembra che tu non abbia specificato che questi codici vano inseriti tutti nel function.php del tema.

    Una domanda. Molto spesso mi capita di inserire del testo formattato nell’editor di W, ma come vado a salvare, mi cancella alcuni tag, esiste un rimedio per questo inconveniente?

  2. Ok grazie per il consiglio, proverò il plugin, per usare il codice del primo esempio che hai postato, potresti fare un esempio se possibile? non ho esperienze di programmazione, e da solo non ci riuscirei.

    grazie ancora

  3. In realtà tutti tag html, ma se vanno inseriti uno alla volta, basterebbe e questi in genere li cancella subito dopo aver fatto salva.

    Che peccato però che non si possa disabilitare la funzione di pulizia del codice.

    grazie ancora

  4. Personalmente l’ho usato con successo con il tag iframe. Per abilitare altri tag inseriscili al posto del contenuto della variabile $ext. Al posto di iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight| marginwidth|src] inserisci i vari tag separati da virgola. Per esempio: iframe,table,div,span etc.
    Fammi sapere se risolvi.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *