『TinyMCE Advanced』のオススメ設定方法 –Gutenberg・Classic両対応版–

『TinyMCE Advanced』のオススメ設定方法 –Gutenberg・Classic両対応版–
スポンサーリンク

グーテンベルクの活版印刷。

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』。

この『TinyMCE Advanced』とは、WordPressのビジュアルエディタの機能を拡張できるプラグインです。

導入すると、動画の挿入や改ページが容易に可能になる。

導入すると、動画の挿入や改ページが容易に可能になる。

もともと、非常に利用者の多いプラグインですが、WordPress 5.x系で導入されたGutenbergによって、さらに利用者・利用価値が高まった気がします。

ダウンロードは、WordPress公式サイトかWordPress内で行えます。

WordPressのプラグインをダウンロード&インストールする方法

2019.02.27

各種設定

アップデートでTinyMCE Advancedは、WordPress 5.x以降にも対応しました。なので、旧エディター(Classic Editor)と新エディター(Gutenberg)の2つとも解説していきます。なお、両エディターに共通した設定は、1つにまとめております。

共通設定

TinyMCE Advancedの共通設定。

TinyMCE Advancedの共通設定。

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での設定。

Classic Editorでの設定。

下の枠からドラッグ&ドロップで、上の枠に持っていけば設定可能です。上画像の設定が私のオススメなので、設定の参考にしてみてください。

基本的には自由ですが、一段目の右端に『ツールバー切り替え』を設置するようにしましょう。でないと、メニューボタンが機能しないことがあります。

Gutenberg(5.x〜)

Gutenbergでの設定。

Gutenbergでの設定。

Gutenbergでの設定も先程と同様にすればOKです。こちらも、私のオススメ設定にしているので、参考にしてみてください。

画像中央にあるEnable the editor menu (recommended). には、チェックを入れておくようにしましょう。

使い方

TinyMCE Advancedは、かなり使いやすいプラグインなので、おそらく使い方の説明不要なのですが、超初心者向けに少しだけ解説しておきます。

Classic Editor(〜4.x)

ビジュアルエディタ画面で直感的に使える。

ビジュアルエディタ画面で直感的に使える。

WordPress 4.9.9以前のClassic Editorの場合について、今から解説します。すでにWordPress 5.0以降にしてある人は、次をご覧ください。

使い方としては非常に簡単で、

  1. ビジュアルエディタ画面を開く
  2. 赤枠内の項目を好きなようにいじる

の手順。それだけ。本当にそれだけです。

Gutenberg(5.x〜)

基本的にはClassic Editorと同様に使える。

基本的にはClassic Editorと同様に使える。

WordPress 5.0以降のGutenbergの場合について、今から解説します。先程の設定どおりにしていれば、Classic Editorのように使えます。

Gutenbergの場合の使い方は、

  1. 一番左上のアイコンを押下
  2. コンテキストメニュー内のClassic Paragraphを押下
  3. 赤枠内の項目を好きなようにいじる

という手順です。

Gutenbergから、文章の構成がブロックごとの区切りになっているので、ちょっとそのへんがややこしいですが、すぐに慣れはずです。

補足

オススメの設定

TinyMCE AdvancedのMy設定。

TinyMCE AdvancedのMy設定。

これが私が設定しているTinyMCE Advancedの全設定です。

この設定で問題ないはずなので、これを見ながら設定してくださって大丈夫なはずです。ツールバーは、お好みでどうぞ。

pタグ・brタグを表示するようにしておく

pタグ・brタグを表示するようにしておくと便利。

pタグ・brタグを表示するようにしておくと便利。

今回紹介した設定にすれば、テキストエディタ画面でpタグ・brタグが表示されるようになります。このほうが、ビジュアルエディタ画面とテキストエディタ画面を行き来するユーザーは便利だと思います。

なお、WordPressのテーマによってはタグ表示が反映されないものも一部あります。(テーマ側にタグを非表示にスクリプトが組まれており、それが優先されるため)

まとめの一言「バッチリ新旧エディター両方で使えるぞ!」

今回は、WordPressのエディター画面をリッチにするプラグイン『TinyMCE Advanced』の紹介をしました。

四条せつな
つまりは…

  • 導入するとリッチで便利になーる!
  • pタグ・brタグを表示すると何かと便利
  • Gutenbergでも旧エディターみたいに使える

って、感じかなー?

Gutenbergへの移行を躊躇していた人(私も含め)は、アップデートされたTinyMCE Advancedを使うことによって、使い勝手が良くなるはずです。お試しあれ!

四条せつな
ヨハネス・ゲンズフライシュ・ツール・ラーデン・ツム・グーテンベルク!?
スポンサーリンク

コメントを残す