texteditor – modyfikacja Wysiwyg

poniższy kod, najlepiej zamieścić jako plik texteditor.php i podpiąć do pliku functions.php poprzez:


include_once 'lib/texteditor.php';

pozwala na dodanie własnych formatów tekstu, przykładowo dla linku i listy:


function add_style_select_button($buttons) {
  array_unshift($buttons, 'styleselect');
  return $buttons;
}
add_filter('mce_buttons_2', 'add_style_select_button');

// add custom styles to the WordPress editor
function ws_mce_formats( $init_array ) {
  $style_formats = array(
    // These are the custom styles
    array(
      'title' => 'Button',
      'selector' => 'a',
      'classes' => 'button',
    ),
    array(
      'title' => 'Download',
      'selector' => 'a',
      'classes' => 'button button--download',
    ),
    array(
      'title' => 'Underline list',
      'selector' => 'ul',
      'classes' => 'underline',
    ),
  );
  // Insert the array, JSON ENCODED, into 'style_formats'
  $init_array['style_formats'] = json_encode( $style_formats );

  return $init_array;

}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'ws_mce_formats' );

dodanie własnego shortcode – zamknięcie tekstu w określonym span:


function text_info( $atts, $content = null ) {
	return '<span class="text_info">' . $content . '</span>';
}
add_shortcode( 'info', 'text_info' );

dodanie własnych kolorów:


add_filter('tiny_mce_before_init', 'ws_custom_colors');
function ws_custom_colors($init) {
    $default_colours = '"000000", "Black",
                      "993300", "Burnt orange",
                      "333300", "Dark olive",
                      "003300", "Dark green",
                      "003366", "Dark azure",
                      "000080", "Navy Blue",
                      "333399", "Indigo",
                      "333333", "Very dark gray",
                      "800000", "Maroon",
                      "FF6600", "Orange",
                      "808000", "Olive",
                      "008000", "Green",
                      "008080", "Teal",
                      "0000FF", "Blue",
                      "666699", "Grayish blue",
                      "808080", "Gray",
                      "FF0000", "Red",
                      "FF9900", "Amber",
                      "99CC00", "Yellow green",
                      "339966", "Sea green",
                      "33CCCC", "Turquoise",
                      "3366FF", "Royal blue",
                      "800080", "Purple",
                      "999999", "Medium gray",
                      "FF00FF", "Magenta",
                      "FFCC00", "Gold",
                      "FFFF00", "Yellow",
                      "00FF00", "Lime",
                      "00FFFF", "Aqua",
                      "00CCFF", "Sky blue",
                      "993366", "Red violet",
                      "FFFFFF", "White",
                      "FF99CC", "Pink",
                      "FFCC99", "Peach",
                      "FFFF99", "Light yellow",
                      "CCFFCC", "Pale green",
                      "CCFFFF", "Pale cyan",
                      "99CCFF", "Light sky blue",
                      "CC99FF", "Plum"';

    $custom_colours = '
        "f05a1a", "Flamingo"
    ';

    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 6;

    return $init;
}

usunięcie h1 z nagłówków:


//Modify TinyMCE editor to remove H1.
add_filter('tiny_mce_before_init', 'ws_remove_unused_formats' );
function ws_remove_unused_formats($init) {
	// Add block format elements you want to show in dropdown
	$init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Button=a;Text preformatowany=pre';
	return $init;
}

dodanie własnych styli do edytora:


/* Apply styles to the visual editor */
add_action( 'admin_init', 'ws_add_editor_styles' );
function ws_add_editor_styles() {
	add_editor_style( '/lib/custom-editor-style.css' );
}

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.