WordPress
Plugin
@m_t_of

【wordpress】TinyMCE Advanced(エディター)に独自スタイル（ボタン）追加

WordPressPlugin

■やりたいこと

wordpressのビジュアルエディタに独自のスタイルを当てられるボタンを追加する。
リンク付きボタンを設置したい時などに便利だと思います♪
※TinyMCE Advancedを使用していることが前提です。

gif.mov.gif

1. 管理画面での設定

wordpress管理画面の、設定 > TinyMCE Advanced 「高度なオプション」の「CSS クラスメニューの作成」にチェックを入れます。
※あらかじめeditor-style.cssを作成して、読み込むようにしていないとチェック出来ません。

img01.jpg

下の「使用しないボタン」から「スタイル」ボタンをドラッグし、上部のツールバーにドロップしておきます。

img02.jpg

2. functions.phpでの設定

functions.phpに以下を追記

functions.php
/*------------
 エディター独自スタイル追加
------------*/
//TinyMCE追加用のスタイルを初期化
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
  //追加するスタイルの配列を作成
  $style_formats = array(
    array(
      'title' => 'ボタン（白）',
      'inline' => 'a',
      'classes' => 'button button-01',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    )
    array(
      'title' => 'ボタン（ピンク）',
      'inline' => 'a',
      'classes' => 'button button-02',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    ),
    array(
      'title' => 'ボタン（黄色）',
      'inline' => 'a',
      'classes' => 'button button-03',
      'attributes' => array(
        'href' => 'https://qiita.com/m_t_of'
      )
    )
  );
  //JSONに変換
  $init_array['style_formats'] = json_encode($style_formats);
  return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);

解説：
'title' => 'ボタン（黄色）'
「スタイル」から選ぶときに出てくるスタイルの名前です。

'inline' => 'a'
インライン要素のスタイルの時は「’inline’ => ‘入れたい要素’」、ブロック要素のスタイルの時は「’block’ => ‘入れたい要素’」。

'classes' => 'button button-03'
クラスを付与します。

'attributes' => array(
'href' => 'https://qiita.com/m_t_of'
)
属性を入れることができます。いろいろ出来そうですね♪

つまり上記の場合、「スタイル」から「ボタン（黄色）」を選択すると、
<a class="button button-03" href="https://qiita.com/m_t_of"></a>
が挿入されます。

また、editor-style.cssのキャッシュが残って管理画面でのcssが反映されないのを防ぐために以下も追記しておきます。

functions.php
/*------------
 editor-style.cssのキャッシュクリア
------------*/
function extend_tiny_mce_before_init( $mce_init ) {

    $mce_init['cache_suffix'] = 'v='.time();

    return $mce_init;
}
add_filter( 'tiny_mce_before_init', 'extend_tiny_mce_before_init' );

3. editor-style.css、style.cssにスタイル追加

管理画面でのエディタに反映させるためのcssと、実際のページに反映させるためのcssをそれぞれ追記します。

style.css
.button {
    display: inline-block;
    max-width: 600px;
    margin: 10px 5px;
    padding: 15px 60px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
    text-decoration: none;
}
/*ボタン（白）*/
.button-01 {
    background: #fff;
    box-shadow: 0px 5px 0px #e5e4e5;
    color: #000;
}
/*ボタン（ピンク）*/
.button-02 {
    background: #f26161;
    box-shadow: 0px 5px 0px #ca3434;
    color: #fff;
}
/*ボタン（黄色）*/
.button-03 {
    background: #ffbe1e;
    box-shadow: 0px 5px 0px #d89005;
    color: #fff;
}

こんな感じでいつものcssと同じようにスタイルを書きます。

4. 完成

gif.mov.gif

参考サイト：
・https://codex.wordpress.org/TinyMCE_Custom_Styles
・TinyMCE
・WordPressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ
・WordPress『TinyMCE Advanced』の投稿画面をカスタマイズ

Edit request
2