てくてくあるく

WordPress の テーマ とか プラグイン に ついて 勉強しています

Gutenberg が 来るっていうのに tinyMCE の カスタマイズ の 備忘録

今更感ですが…

忘れないように…

ねっ??

Block Formats

見出しをつける時に h1 じゃなくて コンテンツ部は h3 から 始めてほしい 等 あると思うのですが

そういう時に カスタマイズしてあげます

内容はこちらと一緒です

ビジュアルエディタ の フォーマット の 中身 を 書き換える
https://tekuaru.jack-russell.jp/2015/08/29/302/

が 汚いので 書き直し

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
add_filter( 'tiny_mce_before_init', function( $initArray ) {
 
  $block_formats = array(
                     __( 'Paragraph', 'tekuaru' ) . '=p;',
                     __( 'Heading 1', 'tekuaru' ) . '=h3;',
                     __( 'Heading 2', 'tekuaru' ) . '=h4;',
                     __( 'Heading 3', 'tekuaru' ) . '=h5;',
                     __( 'Heading 4', 'tekuaru' ) . '=h6;',
                     __( 'Preformatted', 'tekuaru' ) . '=pre;',
                   );
 
  $initArray['block_formats'] = implode( ' ', $block_formats );
 
  return $initArray;
 
} );

Style Formats

こちらは class名 が 付けらるのです

なので Bootstrap の CSS を 使っている この テーマ では 重宝します

ちなみに サンプルは Alerts の スタイルサンプル ですね

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
add_filter( 'mce_buttons', function( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
} );
 
add_filter( 'tiny_mce_before_init', function( $initArray ) {
 
  $style_formats = array(
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Primary', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-primary',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Secondary', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-secondary',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Success', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-success',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Danger', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-danger',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Warning', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-warning',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Info', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-info',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Light', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-light',
      'wrapper' => false,
    ),
    array(
      'title'   => __( 'Alerts', 'tekuaru' ) . ' : ' . __( 'Dark', 'tekuaru' ),
      'block'   => 'div',
      'classes' => 'alert alert-dark',
      'wrapper' => false,
    ),
  );
 
  $initArray['style_formats'] = json_encode( $style_formats );
 
  return $initArray;
} );

ホント 今更ですね…

Related Article

Instant Articles for WP の 出力 を カスタマイズ する ( SyntaxHighlighter Evolved の ショートコード 対応 )

詳細へ »

管理ページで カスタム投稿タイプの デフォルトの並び順 を 変更する!!

詳細へ »