Come migliorare e personalizzare l’editor di 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.

[php]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’);[/php]

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.

[php]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’);[/php]

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.

[php]add_filter(‘wp_default_editor’, create_function(”, ‘return “html”;’));[/php]

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.

[php]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;
}[/php]

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).

[php]function enable_more_buttons($buttons) {
$buttons[] = ‘hr’;
$buttons[] = ‘fontselect’;
$buttons[] = ‘sup’;
// etc, etc…
return $buttons;
}
add_filter(“mce_buttons”, “enable_more_buttons”);[/php]

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/