グーテンベルクの活版印刷。
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』とは、WordPressのビジュアルエディタの機能を拡張できるプラグインです。
もともと、非常に利用者の多いプラグインですが、WordPress 5.x系で導入されたGutenbergによって、さらに利用者・利用価値が高まった気がします。
ダウンロードは、WordPress公式サイトかWordPress内で行えます。
各種設定
アップデートでTinyMCE Advancedは、WordPress 5.x以降にも対応しました。なので、旧エディター(Classic Editor)と新エディター(Gutenberg)の2つとも解説していきます。なお、両エディターに共通した設定は、1つにまとめております。
共通設定
- 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)
下の枠からドラッグ&ドロップで、上の枠に持っていけば設定可能です。上画像の設定が私のオススメなので、設定の参考にしてみてください。
基本的には自由ですが、一段目の右端に『ツールバー切り替え』を設置するようにしましょう。でないと、メニューボタンが機能しないことがあります。
Gutenberg(5.x〜)
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〜)
WordPress 5.0以降のGutenbergの場合について、今から解説します。先程の設定どおりにしていれば、Classic Editorのように使えます。
Gutenbergの場合の使い方は、
- 一番左上のアイコンを押下
- コンテキストメニュー内のClassic Paragraphを押下
- 赤枠内の項目を好きなようにいじる
という手順です。
Gutenbergから、文章の構成がブロックごとの区切りになっているので、ちょっとそのへんがややこしいですが、すぐに慣れはずです。
補足
オススメの設定
これが私が設定しているTinyMCE Advancedの全設定です。
この設定で問題ないはずなので、これを見ながら設定してくださって大丈夫なはずです。ツールバーは、お好みでどうぞ。
pタグ・brタグを表示するようにしておく
今回紹介した設定にすれば、テキストエディタ画面でpタグ・brタグが表示されるようになります。このほうが、ビジュアルエディタ画面とテキストエディタ画面を行き来するユーザーは便利だと思います。
なお、WordPressのテーマによってはタグ表示が反映されないものも一部あります。(テーマ側にタグを非表示にスクリプトが組まれており、それが優先されるため)
まとめの一言「バッチリ新旧エディター両方で使えるぞ!」
今回は、WordPressのエディター画面をリッチにするプラグイン『TinyMCE Advanced』の紹介をしました。

- 導入するとリッチで便利になーる!
- pタグ・brタグを表示すると何かと便利
- Gutenbergでも旧エディターみたいに使える
って、感じかなー?
Gutenbergへの移行を躊躇していた人(私も含め)は、アップデートされたTinyMCE Advancedを使うことによって、使い勝手が良くなるはずです。お試しあれ!

コメントを残す
コメントを投稿するにはログインしてください。