【決定版】WordPress定番プラグインTinyMCE Advancedの使い方

wordpress

WordPressの旧エディタ（Classic Editor）では、「ビジュアルエディター（初心者でも記事の編集などが簡単にできる編集画面）」の機能に限界があります。初期インストール状態のままでは凝った装飾は難しく、初心者では苦戦する場面も見られます。しかし有名な定番プラグイン「TinyMCE Advanced」をインストールすれば、初心者でも凝った装飾を簡単にWordPress記事へ反映可能です。
またWordPressのエディタは新エディタ（Gutenberg）に変更され、より直感的に凝った記事レイアウトなどを初心者が作成できるようになりました。GutenbergにもTinyMCE Advancedを利用すれば、より使いやすいエディタになるのでおすすめです。
今回はWordPress記事レイアウトを手軽によくしたい方やGutenbergを使いやすくしたい方向けにTinyMCE Advancedとは何か、そして機能や導入方法、おすすめの設定などをご紹介していきます。

「TinyMCE Advanced」とは？


TinyMCE Advancedとは、WordPressのプラグインの一つです。WordPressに昔から存在する有名なプラグインで、多くの企業やブロガーが活用しています。WordPress公式での評判も星4以上と高く、定期的に更新されているのもメリットです。
WordPressでは「テキストエディタ（HTMLなどを直接操作できる編集画面、新エディタでは「コードエディタ」に該当する）」を操作しなくても、ビジュアルエディタを利用すれば「Microsoft Word」といった初心者でもなじみのあるソフトウェアのようにページ作成が可能です。そしてTinyMCE Advancedを使えばビジュアルエディタの機能が拡張され、初期状態ではHTMLやCSSを操作しなければならない箇所をすべてビジュアルエディタ上で解決できます。

TinyMCE Advancedの機能紹介


TinyMCE Advancedでは、次のような機能が利用可能です。

  • Classic Editorのビジュアルエディタツールバーにアイコンを追加できる
  • Gutenbergのビジュアルエディタでも、カスタマイズ設定が可能
  • オプション設定も充実

Classic Editorのビジュアルエディタツールバーにアイコンを追加できる


Classic Editorのビジュアルエディタツールバーは、初期状態のままだと物足りない部分があります。たとえば

  • 表を追加する
  • Youtubeなどの動画コードを挿入する
  • 対象文字を検索、置換する

こういった機能を持つアイコンは、初期状態でツールバー内に追加されていません。しかしTinyMCE Advancedをインストールすれば、さまざまな機能を持ったアイコンをドラッグ＆ドロップで簡単に追加できます。
旧ビジュアルエディタは、ツールバー表現がMicrosoft Wordに近いです。しかし初期状態だと、正直機能の足りないWord、のようなイメージを持たれる方もいらっしゃるかもしれません。TinyMCE Advancedによって、Classic Editorビジュアルエディタ上で可能な操作が増え、Wordにより近い操作感を得られます。

Gutenbergのビジュアルエディタでも、カスタマイズ設定が可能


TinyMCE Advancedは流行にも敏感で、すでにGutenbergに完全対応しています。Gutenbergではさまざまな機能を持ったブロックを追加することで、より直感的に、初期状態でもある程度複雑なデザインが可能になりました。しかしGutenbergにも初期状態でできないことはあるので、「この部分の装飾が面倒くさい」という場面に遭遇する可能性があります。
TinyMCE Advancedを使うと、

  • 文字選択時に出現するツールバーのアイコンを変更する
  • クラシックブロック時に表示するアイコンの数を編集する
  • 画面右側「ブロック」タブ内に表示されるデザイン設定を追加する

などが可能です。たとえば段落ブロック内文章で1文字だけ色を変えたい場合、Gutenbergデフォルトでは設定ができません。しかしTinyMCE Advancedで設定を追加すれば、ブロックタブから簡単に部分装飾が可能です。

オプション設定も充実


TinyMCE Advancedでは、アイコン編集以外のオプション設定も充実しています。たとえば、

  • マウスドラッグでの表レイアウト変更を可能にするか、しないか
  • フォントで使用可能なサイズ設定を置き換えるか
  • クラシックエディタで<p>や<br>タグが自動除去されるのを停止するか

などの設定が可能です。アイコン以外の細かい使い勝手も、普段からビジュアルエディタで編集を行う方にとっては重要です。TinyMCE Advancedを使えば、WordPress記事編集の細かい操作感を簡単に調整できます。

TinyMCE Advancedの導入方法を分かりやすく解説


ここからは、TinyMCE Advancedの導入方法を丁寧にご紹介していきます。

インストール方法


まずは、インストール方法を説明していきます。

  1. 1.WordPressダッシュボード→左側メニュー内の「プラグイン」→「新規追加」とたどる
  2. 2.プラグイン新規追加画面に、「TinyMCE Advanced」と入力する（「TinyMCE」だけだと似た名前のプラグインが出てくるので、Advancedまで入力すると確実です）
  3. 3.「今すぐインストール」ボタンを押し、インストール終了したら「有効化」ボタンを押す
  4. 4.ダッシュボード「プラグイン」→「インストール済みプラグイン」とたどり、一覧の「TinyMCE Advanced」の「有効化」をクリック
  5. 5.「有効化」が「停止」に表示変更されたら、すぐ右の「設定」から設定画面に入る
  6. 6.タブで「旧エディター (TinyMCE)」と「 ブロックエディター (TinyMCE)」を切り替え、編集を行う（全変更が終わったら、青い「変更を保存」ボタンを確実に押してください）

    7. Classic Editorの設定画面


    Classic Editorは、次のような設定画面になっています。

    「クラシックエディタ用ツールバー」欄と「使用しないボタン」欄


    「クラシックエディタ用ツールバー」欄の「エディタメニューを有効化する」では、ツールバー上部に表示される文字メニューの表示・非表示が選択できます。そして「使用しないボタン」欄から追加したいアイコンを「クラシックエディタ用ツールバー」欄へドラッグ＆ドロップすると、ツールバーにアイコンを追加可能です。ツールバー欄のアイコンは、ドラッグ＆ドロップで直感的に並び替えできます

    「オプション」欄


    「オプション」欄では、細かい設定を行っていきます。

    • 「クラシックパラグラフ」や「クラシックブロック」の上部ツールバーにすべてのボタンを追加します。
    • リストスタイルオプション
    • コンテキストメニュー

    などさまざまなオプション設定がありますが、基本は触らないでも大丈夫です。またオプション欄は、Gutenberg設定画面でも共通表示されます。

    Gutenbergの設定画面


    Gutenbergは、次のような設定画面になっています。

    • 「メインツールバー」、「代替サイドツールバー」、「ブロックツールバーで不使用のボタン」欄
    • 「テキスト色」欄
    • 「クラシック版の段落とクラシックブロックのツールバー」欄

    「メインツールバー」、「代替サイドツールバー」、「ブロックツールバーで不使用のボタン」欄


    「メインツールバー」欄では、文字を入れたブロックに表示されるツールバーの設定を変更できます。ツールバー最左の三点メニューの右にある「▼」ボタン内に、「代替サイドツールバー」や「ブロックツールバーで不使用のボタン」欄にあるアイコンをドラッグ&ドロップで追加可能です。
    代替サイドツールバー欄には、Gutenberg右側サイドバー内のブロックタブに追加するアイコンを設定します。設定は、ブロックタブ内の「整形」欄として反映されます。「ブロックツールバーで不使用のボタン」欄のアイコンは、編集画面には適用されません。

    「テキスト色」欄


    「テキスト色」欄では、ブロックタブに選択した文字部分のみを装飾する設定を追加するかしないかを決められます。

    • 選択済み文字色の設定を有効化・・・選択した文字の色だけを変更できる
    • 選択済み文字背景色の設定を有効化・・・選択した文字の背景色だけを変更できる

    の上記2つの設定を「はい」、「いいえ」のチェックボックスでON、OFFにします。

    「クラシック版の段落とクラシックブロックのツールバー」欄


    「クラシック版の段落とクラシックブロックのツールバー」欄では、Gutenbergに用意されている「クラシックブロック（旧エディタのような編集ツールバーなどを出せるブロック）」の設定を変更可能です。アイコンをドラッグ＆ドロップで追加するなど、操作方法は「クラシックエディタ用ツールバー」、「使用しないボタン」欄といっしょです。
    ただしGutenbergクラシックブロックのツールバーアイコンを増やし過ぎると返って使いにくくなるので、旧エディタツールバーよりアイコンは絞って配置しましょう。

    TinyMCE Advancedを使うときのおすすめの設定


    ここからは、TinyMCE Advancedを使うときのおすすめ設定をご紹介していきます。

    Classic Editor


    Classic Editorでは、次のようなアイコンをツールバーに追加しておくと便利です。

    • 表アイコン・・・ドラッグ＆ドロップだけで簡単に表を追加できる
    • 検索と置換アイコン・・・誤記などを簡単に検索、置換できる
    • フォントファミリー欄・・・フォント種類を指定できる
    • フォントサイズ欄・・・フォントサイズを変更できる
    • 両端揃えアイコン・・・文字を両端揃えにする
    • 画像アイコン・・・外部画像などを、サイズ指定などを行って追加する
    • メディアを挿入、編集アイコン・・・外部の動画をサイズなどを指定して埋め込む
    • ツールバー切替アイコン・・・ツールバーを1行表示にしたり、解除できる（ツールバー1行目にないと動作しません）
    • 背景色アイコン・・・選択部分の背景色を変更する

    ページの基本装飾やレイアウト制作を行う場面では、上記のようなアイコンを追加しておけば困る場面は少ないでしょう。
    「オプション」欄では、

    • フォントサイズ
    • クラシックブロックとクラシックエディター内のパラグラフタグを保持

    のチェックはONにしておくと便利です。「フォントサイズ」のチェックをONにすると、細かいフォントサイズ設定が可能になります。また「クラシックブロックとクラシックエディター内のパラグラフタグを保持」をONにすると、WordPressの

    や
    タグの自動削除機能を停止できます。

    Gutenberg


    Gutenbergでは操作に慣れた場合旧エディタより困る場面は少ないでしょうが、上記でご紹介したおすすめアイコンの中で、特に必要なものを絞ってクラシックブロックで表示できるようにしておくとよいでしょう。また

    • 選択済み文字色の設定を有効化
    • 選択済み文字背景色の設定を有効化

    は両方ONにしておくと、部分文字装飾が楽になります。

    まとめ


    今回はTInyMCE Advancedとは何か、そしてその機能や導入方法、おすすめの設定などをご紹介してきました。TinyMCE Advancedは長年人気があり、WordPressエディタの編集画面をリッチに使いやすくしてくれます。Gutenbergにもしっかり対応しているので、今後も使いどころはあるでしょう。
    ぜひTinyMCE Advancedを使って、編集画面を効率よく作業できるようにカスタマイズしてみてください。