前回、Wordpressのテキストエディターにタグ挿入ボタンを追加する方法を書きました。
今回は、ビジュアルエディターに独自タグ挿入用のスタイルボックスを追加する方法を紹介したいと思います。
通常のビジュアルエディターは、以下のようになっていますが
今回のカスタマイズを行うことで、「スタイル選択ボックス」が表示され、
アイテムを選択することにより、独自スタイルを設定しているHTMLタグを手軽に挿入できるようになります。
以下で、そのカスタマイズ方法について説明したいと思います。
目次
主な手順
今回のカスタマイズを行うのに必要な主な手順は以下です。
- CSSスタイルを作成する
- editor-style.cssの設定
- functions.phpにコードを書く
基本的な処理部分は、コピペで行います。ただ、スタイルや、タグの設定などは、環境に合わせて自前でする必要があります。
CSSスタイルを作成する
まずは、独自スタイル用のCSSを書きます。
今回は、例としてstyle.cssに以下のようなスタイルを書きました。
/*太字*/
.bold{
font-weight:bold;
}
/*赤色*/
.red{
color:#E50202;
}
/*サクセスメッセージ*/
.sp-success {
background-color: #DFF0D8;
border-color: #D6E9C6;
padding:15px;
border-radius:4px;
margin-bottom:20px;
}
太字と、赤色はインライン要素用のスタイルです。そして、サクセスメッセージはブロック要素用のスタイルです。
editor-style.cssの設定
ビジュアルエディター上でも、スタイルを確認しながら編集できた方が楽です。なので、前項で書いたスタイルをビジュアルエディター上でも反映させる設定を行います。
まずは、使用しているテーマフォルダ直下に「editor-style.css」というCSSファイルがあるかを確認してください。そして、無い場合は、「editor-style.css」ファイルを作成してください。
そして、「editor-style.css」に前項のスタイルを記入してください。
同じ設定が2回重複して記入されてしまうのが嫌な場合は、「editor-style.css」に以下のように書いてしまってもいいかもしれません。
@import url('style.css');
そして、エディター上でスタイルを呼び出すためfunctions.phpに以下のように書きます。
add_editor_style();
もちろん、既にfunctions.php上に上記のコードの記述がある場合は、コードの記入は不要です。
functions.phpにコードを書く
最後に、ビジュアルエディターにスタイル選択ボックス追加するコードをfunctions.phpにします。
記入するコード例は以下。
//TinyMCE追加用のスタイルを初期化
//http://com4tis.net/tinymce-advanced-post-custom/
if ( !function_exists( 'initialize_tinymce_styles' ) ):
function initialize_tinymce_styles($init_array) {
//追加するスタイルの配列を作成
$style_formats = array(
array(
'title' => '太字',
'inline' => 'span',
'classes' => 'bold'
),
array(
'title' => '赤字',
'inline' => 'span',
'classes' => 'red'
),
array(
'title' => 'successボックス',
'block' => 'div',
'classes' => 'sp-success'
),
);
//JSONに変換
$init_array['style_formats'] = json_encode($style_formats);
return $init_array;
}
endif;
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);
//TinyMCEにスタイルセレクトボックスを追加
//https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4
if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
function add_styles_to_tinymce_buttons($buttons) {
//見出しなどが入っているセレクトボックスを取り出す
$temp = array_shift($buttons);
//先頭にスタイルセレクトボックスを追加
array_unshift($buttons, 'styleselect');
//先頭に見出しのセレクトボックスを追加
array_unshift($buttons, $temp);
return $buttons;
}
endif;
add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');
initialize_tinymce_styles関数では、スタイル選択ボックスに追加するスタイルの設定を行っています。
add_styles_to_tinymce_buttons関数では、ビジュアルエディターのツールバー（TinyMCE）にスタイル選択ボックスを追加しています。
スタイルの設定
スタイルの設定は、initialize_tinymce_styles関数の$style_formats配列に以下のように配列を追加することで行います。
//追加するスタイルの配列を作成
$style_formats = array(
array(
'title' => '太字',
'inline' => 'span',
'classes' => 'bold'
),
array(
'title' => '赤字',
'inline' => 'span',
'classes' => 'red'
),
array(
'title' => 'successボックス',
'block' => 'div',
'classes' => 'sp-success'
),
);
インライン要素のスタイルの時は「’inline’ => ‘span’」、ブロック要素のスタイルの時は「’block’ => ‘div’」のように設定しているのに注意してください。
参考 WordPress『TinyMCE Advanced』の投稿画面をカスタマイズ | com4tis
参考 Plugin API/Filter Reference/mce buttons
動作確認
実際に、スタイル選択ボックスを使うと、以下のように動作します。
これで、ビジュアルエディターでの編集が、かなり捗ります。
まとめ
こんな感じで、ちょっとした手間をかければ、ビジュアルエディターをより使いやすくさせることができます。
ただ、Wordpressには、AddQuicktagという素晴らしいプラグインもあるので、これを使うことで手軽に同様のことを行うこともできます。
ただ、「出来る限りプラグインを使いたくない」とか「テーマ側でクイックタグを管理したい」なんて場合は、今回のカスタマイズ方法はお勧めです。
お世話になってます。
アフィリエイトBのキーワードタグをどこに貼り付けたら良いのかわかりません。
もしわかればお願いします。