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.