グーテンベルクの活版印刷。
WordPressのエディター画面をリッチにするプラグイン『TinyMCE Advanced』のオススメ設定方法を紹介します。なお、Gutenberg・Classic Editorの両方のバージョンに対応させた解説をしています。
目次
はじめに
- TinyMCE Advancedを導入・設定する。
- Gutenbergでビジュアルエディタを使いやすくする。
- テキストエディタでpタグ・brタグを表示させる。
最新版のTinyMCE Advancedだと、旧WordPressエディター（Classic Editor）をGutenbergっぽく、新WordPressエディター（Gutenberg）をClassic Editorできます。今回はその解説と設定を中心に話していきます。
また、テキストエディタを使う人なら導入すべき設定（pタグ・brタグの表示）も、同時に解説します。
『TinyMCE Advanced』って？
ビジュアルエディタ機能拡張プラグイン『TinyMCE Advanced』。
この『TinyMCE Advanced』とは、WordPressのビジュアルエディタの機能を拡張できるプラグインです。
導入すると、動画の挿入や改ページが容易に可能になる。
もともと、非常に利用者の多いプラグインですが、WordPress 5.x系で導入されたGutenbergによって、さらに利用者・利用価値が高まった気がします。
ダウンロードは、WordPress公式サイトかWordPress内で行えます。
各種設定
アップデートでTinyMCE Advancedは、WordPress 5.x以降にも対応しました。なので、旧エディター（Classic Editor）と新エディター（Gutenberg）の2つとも解説していきます。なお、両エディターに共通した設定は、1つにまとめております。
共通設定
TinyMCE Advancedの共通設定。
- Options（設定）
- Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.（Gutenbergでツールバーを一番上に表示）
- List Style Options（リストスタイルオプション）
- Context Menu（コンテキストメニュー）
- Alternative link dialog（代替リンクダイアログ）
- Font sizes（フォントサイズ）
- Advanced Options（高度なオプション）
- Hybrid Block Editor Mode（Classic EditorとGutenbergの両方の機能の利用）
- Add “Classic Paragraph” Block.（Gutenbergでクラシックブロックを追加）
- Replace the Block Editor with the Classic Editor（WordPress 5.0以降でClassic Editorを利用）
- Keep paragraph tags（段落タグの保持）
- Create CSS classes menu（CSSクラスメニューの作成）
- Enable pasting of image source（画像元の貼り付けを有効にする）
- Administration（管理）
- Settings import and export（設定のインポートとエクスポート）
- Enable the TinyMCE editor enhancements for（各種機能強化）
- The Classic Editor（メインエディター）
- Other TinyMCE editors in wp-admin（wp-adminの他のエディター）
- TinyMCE editors on the front end of the site（フロントエンドのエディター）
利用状況によって、設定項目の言語が英語の場合も日本語の場合もある模様。設定の際は、上の翻訳（かなり雑ですが）を参考にしてみてください。
ちなみに、上画像の設定がオススメの設定です。
GutenbergでTinyMCE Advancedを利用する場合は、
- Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
- Hybrid Block Editor Mode
- Add “Classic Paragraph” Block.
の3つにチェックを入れておけば大丈夫なはずです。
Classic Editor（〜4.x）
Classic Editorでの設定。
下の枠からドラッグ＆ドロップで、上の枠に持っていけば設定可能です。上画像の設定が私のオススメなので、設定の参考にしてみてください。
基本的には自由ですが、一段目の右端に『ツールバー切り替え』を設置するようにしましょう。でないと、メニューボタンが機能しないことがあります。
Gutenberg（5.x〜）
Gutenbergでの設定。
Gutenbergでの設定も先程と同様にすればOKです。こちらも、私のオススメ設定にしているので、参考にしてみてください。
画像中央にあるEnable the editor menu (recommended). には、チェックを入れておくようにしましょう。
使い方
TinyMCE Advancedは、かなり使いやすいプラグインなので、おそらく使い方の説明不要なのですが、超初心者向けに少しだけ解説しておきます。
Classic Editor（〜4.x）
ビジュアルエディタ画面で直感的に使える。
WordPress 4.9.9以前のClassic Editorの場合について、今から解説します。すでにWordPress 5.0以降にしてある人は、次をご覧ください。
使い方としては非常に簡単で、
- ビジュアルエディタ画面を開く
- 赤枠内の項目を好きなようにいじる
の手順。それだけ。本当にそれだけです。
Gutenberg（5.x〜）
基本的にはClassic Editorと同様に使える。
WordPress 5.0以降のGutenbergの場合について、今から解説します。先程の設定どおりにしていれば、Classic Editorのように使えます。
Gutenbergの場合の使い方は、
- 一番左上のアイコンを押下
- コンテキストメニュー内のClassic Paragraphを押下
- 赤枠内の項目を好きなようにいじる
という手順です。
Gutenbergから、文章の構成がブロックごとの区切りになっているので、ちょっとそのへんがややこしいですが、すぐに慣れはずです。
補足
オススメの設定
TinyMCE AdvancedのMy設定。
これが私が設定しているTinyMCE Advancedの全設定です。
この設定で問題ないはずなので、これを見ながら設定してくださって大丈夫なはずです。ツールバーは、お好みでどうぞ。
pタグ・brタグを表示するようにしておく
pタグ・brタグを表示するようにしておくと便利。
今回紹介した設定にすれば、テキストエディタ画面でpタグ・brタグが表示されるようになります。このほうが、ビジュアルエディタ画面とテキストエディタ画面を行き来するユーザーは便利だと思います。
なお、WordPressのテーマによってはタグ表示が反映されないものも一部あります。（テーマ側にタグを非表示にスクリプトが組まれており、それが優先されるため）
まとめの一言「バッチリ新旧エディター両方で使えるぞ！」
今回は、WordPressのエディター画面をリッチにするプラグイン『TinyMCE Advanced』の紹介をしました。
- 導入するとリッチで便利になーる！
- pタグ・brタグを表示すると何かと便利
- Gutenbergでも旧エディターみたいに使える
って、感じかなー？
Gutenbergへの移行を躊躇していた人（私も含め）は、アップデートされたTinyMCE Advancedを使うことによって、使い勝手が良くなるはずです。お試しあれ！
コメントを残す
コメントを投稿するにはログインしてください。