バージョン5に対応したTinyMCE Advancedの快適な設定は?

当記事では、TinyMCE Advancedを導入する場合の快適設定方法を見ることにしましょう。

バナー画像
Initializing...
まだまだ、旧態依然としたWordpressエディターを使用している方も多いと思います。やはり簡単にWordpressをバージョン5にはできないからでしょうか。もしここをクリアできたら、私としては新しいブロックエディター(GutenBerg)をおすすめしたい。前回その趣旨からブロックエディターのススメを書きましたが、もしよかったらこちらも参照してください。
使い勝手が大幅に向上!ブロックエディターのおススメ
Wordpress5から使えるようになったブロックエディター(Gutenberg)は、これまでのエディターからは見違えるように使い安くなっている。HTMLを覚える必要なし見通しのよいソース表示とこれは使わない手はない。新エディター登...

 

 

さて、今回のテーマはブロックエディターをより便利にするTinyMCE Advancedプラグインの設定編です。

このプラグインのメリットは何かは、超有名なプラグインなので言わずもがなでおすすめして間違いはないのですが、こちらも参考にして見てください。

ブロックエディターの機能拡張にはTinyMCE Advancedプラグイン
Wordpress5で採用されたブロックエディター。これの不得意な点は、文字単位などの属性や機能ボタンを増やせないところか? これは従来のエディターでもおなじだが、TinyMCE Adnvancedプラグインがバージョン5に対応している。さ...

じゃ、さっそく設定に移ります。

TinyMCE Advancedプラグインの設定

最初にぶっちゃけていっちゃうとすべての項目にチェックをいれて使ってみたらいかがでしょう。動作うんぬんの難しい設定もありませんし、とんちんかんに動作してしまうこともありません。すべて目に見える形で動きますので、好きなら好き、嫌いなら嫌いでチェックをはずしてしまって構わないと思います。では、解説をしながら設定をおこないます。

インストールする

まずどうやってインストールするのか簡単に説明します。インストールは、Wordpress管理画面を起動しプラグイン新規で検索欄に途中空白を入れずに”TinyMCE”と入力し検索すると、先頭に当該のプラグインが表示されると思いますので、今すくインストールボタンをタップし、インストールが完了したら有効化ボタンを押すだけです。

設定はどこから

無事インストールが完了し”有効化”も完了すると、設定TinyMCE Advancedと画面を遷移すると下記のような設定画面が表示されるはずです。もし設定にTinyMCE Advancedというメニューが無い場合は、インストールできていないかもしくは有効化していていないことが考えられますので、再度挑戦してみてください。

v.5.2.1の設定パネルを実写

v.5.2.1の設定パネルを実写

Enable the editor menuをオンに

前画面を参考にするとBlock EditorとClassic Editorと2つの設定するためのタブがありますが、ほとんど設定内容は似通ったものです。 まずは、Block Editorタブの中程にあるEnable the editor menuのチェックを入れましょう。使いたいアイコンがある場合は、ドラック&ドロップでメニューに好きな位置に配置することができます。もし不必要なものがある場合は、逆にメニューからはずしてください。

Enable the editor menuを表示した画面

Enable the editor menuをオンに

設定セクションの設定

設定セクションは基本的にすべてチェック入れてください。

先頭へ

設定セクションはすべてオンに

設定セクションはすべてオンに

”代替リンクダイアログ”にチェックすると… ”代替リンクダイアログ”にチェックするとリンクボタンを押した場合に、下記のような詳細パネルを表示することができます。  ただし、クラッシックパラグラフの場合に限ります。

リンク詳細設定パネルで詳細が設定できる

リンク詳細設定パネルで詳細が設定できる

”フォントサイズ”にチェックすると… ブロックエディタのパラグラフの文字サイズと統一することができる。下記はClassic Paragraphブロックにフォントサイズコンボを表示し、小、通常、大、特大に合わせたところ。  

4つのフォントサイズを定義
4つのフォントサイズを定義したところ
4つのフォントサイズを定義

4つのフォントサイズを定義

フォントサイズを変えるには、function.phpに下記のコードを追加してください。

function custom_tiny_mce_before_init( $settings ) {
 
	$settings['fontsize_formats'] = "10px 16px 20px 36px 48px";

    return $settings;    
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_before_init',99 );

”高度なオプション”セクションの設定部

高度なオプションは先頭の”Add Classic Paragraph block”には、チェックしてオンにしておきます。これをオンにするとClassic Paragraphブロックを使用することができ、なおかつ、Classic Paragraph,Classic,Paragrahへの相互にコンバートすることが出来るようになります。ついでにCSSクラスメニューの作成もオンにしておきましょう。

高度なオプションの設定

高度なオプションの設定

Advahced options for tablesセクションの設定部

こちらは基本的にすべての項目にチェックを入れておきます。  

Advanced options for tablesの設定

Advanced options for tablesの設定

”Enable the TinyMCE editor enhancements for”セクションの設定部

こちらもすべてオンです。

Enable the TinyMCE editor enhancements の設定

Enable the TinyMCE editor enhancements の設定

CSSのクラスメニュー作成でエラーが表示される場合 ” Disabled: editor-style.css スタイルシートがテーマに追加されませんでした。”と表示される場合、エディター用の独自クラスを定義するeditor-style.cssがインプリメントされていないことが考えられます。 add_editor_styleを使用して、editor-style.cssを追加してください。

コメント

タイトルとURLをコピーしました