WordPressのビジュアルエディタTinyMCEを少し使いやすくする。

掲載日: / 更新日:
WordPressのビジュアルエディタTinyMCEを少し使いやすくする。

TinyMCEによく使うフォントや折角のフレームワークを登録して使いやすくする。

TinyMCE Advanceでツールアイコンを追加したりして、使いやすくできるのですが、フォントやスタイルまではやってくれません。

スタイルについては、editor-style.cssでCSSを読み込んで見栄えを実際に近くでき、CSSのclassを付加することも出来ますが、セレクタ(tag)は指定は出来ません。

editor-style.cssを読み込んで、出来上がりに近い表示にする。

function.phpに以下の1行を追加します。

add_editor_style( array( 'css/editor-style.css' ) );

ここでは、cssフォルダーの下のeditor-style.cssを読み込んでいます。

editor-style.cssには、H1/H2/H3/…などをstyle.cssなどから抽出して記入します。初期設定と記事作成に使うタグだけなので、さほど多くはないと思います。あと、CSSフレームワーク関係も使えるようにしたいので、初期設定の部分と記事作成に使うものを抽出して追加します。 @importで丸ごとインポートもできるようですが、面倒でも必要な部分だけを記述するのが良いと思います。 フレームワークは、記事作成時には影響は少ないと思いますので、どの部分が必要かわからない場合は、省略でも良いと思います。 pure.cssの場合は、baseとtable、あと必要に応じてButtonsとGridでしょうか。記述の順番は以下の様な感じで(同じセレクタなら最後の設定が有効なので)

  1. pure.css Base
  2. pure.css Buttons
  3. pure.css Tables
  4. pure.css Grids
  5. style.cssから抽出した共通(基本)設定とH1/H2/H3/…など

多機能のフレームワークを使っていて、どの部分を抽出すればよいかわからない場合は、記事ではpure.cssを使う方法もあります。大変小さいフレームワークで、他との競合もないので、追加しても邪魔にはならないと思います。

プラットフォーム違いでも使える代表的英字フォントと日本語フォントに変更する。

こちらも、function.phpに以下を追加します。

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

フレームワークを利用する為のオリジナルのスタイルを登録する。

記事もレスポンシブ対応させる必要が多々あると思います。特に画像や表などは面倒ですし、よくわからない人にclassを追加してなんて言ってもわかりません。

ここでは、もともとのpure.cssとの対比が分かり易い(自分が使う為の設定なので)表記で登録していますが、実際に使う方が分かり易い表記にすればよいと思います。

先ほどのフォントと合わせて、

function pureframe_tinyMCE($arr){
 $arr['font_formats'] =
 "Helvetica='Helvetica';".
 "Century Gothic='Century Gothic';".
 "Franklin Gothic Medium='Franklin Gothic Medium';".
 "Gulim='Gulim';".
 "Impact='Impact';".
 "Verdana='Verdana';".
 "Georgia='Georgia';".
 "Palatino='Palatino';".
 "Times New Roman='Times New Roman';".
 "Courier New='Courier New';".
 "Comic Sans MS='Comic Sans MS';".
 "ヒラギノ角ゴ='ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN';".
 "ヒラギノ丸ゴ='ヒラギノ丸ゴ Pro W4','Hiragino Maru Gothic Pro','ヒラギノ丸ゴ ProN W4','Hiragino Maru Gothic ProN';".
 "MS Pゴシック='MS Pゴシック','MS PGothic';".
 "MS ゴシック='MS ゴシック','MS Gothic';".
 "游ゴシック='游ゴシック','Yu Gothic';".
 "ヒラギノ明朝='ヒラギノ明朝 Pro W3','Hiragino Mincho Pro',ヒラギノ明朝 ProN W3','Hiragino Mincho ProN';".
 "MS P明朝='MS P明朝','MS PMincho';".
 "MS 明朝='MS 明朝','MS Mincho';".
 "游明朝='游明朝','Yu Mincho';"
 ;
 $style_formats = [
 [
 'title' => 'Responsive Images',
 'selector' => 'img',
 'classes' => 'pure-img'],
 [
 'title' => 'Default Table',
 'selector' => 'table',
 'classes' => 'pure-table'],
 [
 'title' => 'Bordered Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-bordered'],
 [
 'title' => 'Table with Horizontal Borders',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-horizontal'],
 [
 'title' => 'Striped Table',
 'selector' => 'table',
 'classes' => 'pure-table pure-table-striped'],
 [
 'title' => 'Striped Table tr',
 'selector' => 'tr',
 'classes' => 'pure-table-odd'],
 [
 'title' => 'Default Buttons',
 'selector' => 'a',
 'classes' => 'pure-button'],
 [
 'title' => 'Primary Buttons',
 'selector' => 'a',
 'classes' => 'pure-button pure-button-primary'],
 [
 'title' => 'Grids',
 'selector' => 'div',
 'classes' => 'pure-g'],
 [
 'title' => 'grid-u-x-5/24',
 'selector' => 'div',
 'classes' => 'pure-u'],
 [
 'title' => 'grid-u-sm-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-sm-1-2'],
 [
 'title' => 'grid-u-md-1-2',
 'selector' => 'div',
 'classes' => 'pure-u-md-1-2']
 ];
 $arr['style_formats'] = json_encode($style_formats);
 return $arr;
}
add_filter('tiny_mce_before_init','pureframe_tinyMCE',1000);

 

これでひとまず完了!

WordPressのビジュアルエディタTinyMCEの変な設定の表もこれで綺麗に作成できます。

 

あ~!....忘れていました。

 

TinyMCE Advanceで、スタイルボタンの追加と高度なオプション「CSS クラスメニューの作成」のチェックをしましょう!.....(‘◇’)ゞ

今度こそ、WordpressのビジュアルエディタTinyMCEが素敵に変身です。

めでたし、めでたし

 

追伸:

こんな感じが分かり易いのかなぁ~

 Responsive Images  画像に付ける 
 Default Table  縦線だけの表
 Bordered Table  罫線ありの表 
 Table with Horizontal Borders  横線のみの表 
 Striped Table  ストライプの表
 Striped Table tr  この行をグレー
 Default Buttons  リンクのボタン
 Primary Buttons  リンクのボタン★ 

WordPressのビジュアルエディタTinyMCEを少し使いやすくする。に1件のコメントがあります

  1. 正しく修正したはずなのに「editor-style.css」が反映されない場合は、以下のおまじないをfunction.phpに書いておくと良いそうです。

    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' );

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA