WordPress TinyMCE Style Selector
De foarte multe ori am avut nevoie de un selector de stiluri în editorul WordPress. Asta pentru că, în ciuda a ceea ce cred unii, utilizatorul final, cel ce nu înțelege de ce nu e ok să dea paste din Word, vrea o reprezentare cât mai exactă a conținutului introdus.
Sigur, aș fi putut folosi ceva shortcodes, i-aș fi dat clientului o listă de posiblități și i-aș fi urat succes. Dar oare aceste shortcodes sunt cu mult diferite de Markdown? Eu zic că nu…
Prin urmare, am început să caut modalități de a îmbunătăți experiența editorilor (fac mentenanță la un site ce are vreo 20 editori; ar fi un calvar să explic fiecăruia cum se face X). Iar chestia asta e atât de simplă încât e destul de trist să o vezi foarte rar implementată. Prin urmare:
class CustomTinyMCeStyles { public function __construct() { add_filter( 'mce_buttons', array( &$this, 'add_dropdown' ) ); add_filter( 'tiny_mce_before_init', array( &$this, 'add_items' ) ); } public function add_dropdown( $buttons ){ array_unshift( $buttons, 'styleselect' ); return $buttons; } public function add_items( $init_array ){ $styles = array(); $styles[] = array( "title" => "Button", "classes" => "button", "block" => "span" ); $styles[] = array( "title" => "Smaller Button", "classes" => "button small", "block" => "span" ); $init_array['style_formats'] = json_encode( $styles ); return $init_array; } } new CustomTinyMCeStyles();
Rezultatul se vede la începutul postului. În frontend, elementul selectat va fi pus într-un span
cu clasa/clasele din cheia classes
.
În combinație cu editor-style.css, ai îmbunătățit major experiența editorilor în doar câteva linii de cod.
- Posted in:
- WordPress