【Gutenberg対応】TinyMCE Advancedの初期設定方法と使い方｜WordPressプラグイン

固定ページ・投稿ページの編集は手の込んだカスタマイズをしようとすると、通常はどうしてもHTMLの知識が必要になってしまいます。

HTMLの記述はWordPressで初めてWEBサイトを作るような人にはなかなかハードルが高いでしょう。

そこで今回はページの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。

以前は必須プラグインでしたが、グーテンベルグが浸透しこのプラグインの必要性が今はあまりありません。
グーテンベルグエディターをしっかり使えるようになりましょう。

初期設定方法

まずはインストールから初期設定方法を紹介します。

インストール方法

プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。

TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。

インストールされると「有効化」のボタンに変わりますので、クリックします。

Block Editor(Gutenberg)の初期設定方法

インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。

設定項目をクリックすると以下のページが開きます。

Gutenbergのみを利用する場合は左側の「Block Editor」を選んでください。

もし旧エディターである「Classic Editor」を利用する場合ば右を選んでください。

※「Classic Editor」を利用するには「Classic Editorプラグイン」が必要となります。

Block Editor(Gutenberg)の設定方法

Block Editor(Gutenberg)タブには主に以下の設定項目があります。

• Main toolbar
  記事執筆時に段落ブロック内で使用するツールバーの設定をします。
• Alternative side toolbar
  画面右側のサイドツールバーの設定をします。
• Unused buttons for the blocks toolbar
  使用しない機能をここに置きます。

設定はドラッグ&ドロップで直感的に配置することができます。
アンダーラインとマークを移動してみます。

以下のようになります。

次にカラー関係の設定をすることができますが、特に邪魔になるものでもないので両方Yesで問題ないでしょう。

さらに下にクラシックブロックの設定がありますが、こちらは後述するクラシックエディターの設定とほぼ同じです。

ドラック&ドロップで設定できますので、「グーテンベルグ内で以前のクラシックエディターのように使いたい」という人は必ず設定しておきましょう。

Classic Editorの初期設定方法

「Classic Editorプラグイン」使用時のクラシックエディターの設定方法です。

「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。

「設定」タブの各種機能

設定のタブでは各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。

• Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
  GutenbergのすべてのクラッシックブロックにおいてTinyMCE Advancedプラグインで設定したツールバーを一番上に表示させます。
• リストスタイルオプション
  箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。
• コンテキストメニュー
  編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。
• 代替リンクダイアログ
  リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
  リンクを設定したあとならWordPressのリンク設定画面を開けます。
• フォントサイズ
  pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。

↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、クラシックエディター利用時のビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。

設定が完了したら「変更を保存」をクリックして終了します。

使い方

Block Editor(Gutenberg)での使い方

適用するテキストをドラッグし、タブから機能を選択します。

先ほど追加した機能の中で、ここではアンダーラインを選んでいます。

以下のようにアンダーラインが入ります。

Classic Editorでの使い方

WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。

「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。

「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。

適用するテキストをドラッグします。

ptの選択をクリックし、指定するサイズを選択します。

大きいサイズになります。

次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。

青を選択したら青色に変化しましたね。

青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。

青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。

テーマによって「TinyMCE Advanced」を使って機能を増やしているものもありますので、使いやすいようにカスタマイズしてコンテンツに集中できる環境を構築しましょう。

WordPressのおすすめプラグインについてまとめていますので、参考にしてみてください。