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

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

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

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

個人的には完全に必須プラグインになっているものですので、一度試してみてはいかがでしょうか。

初期設定方法

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

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

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

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

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

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

TinyMCE Advancedプラグインの図解

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

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

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

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

TinyMCE Advancedプラグインのツールバー図解

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

TinyMCE Advancedプラグインのドラッグドロップの図解

以下のようになります。

TinyMCE Advancedプラグインのドラッグドロップの図解2

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

TinyMCE Advancedプラグインのカラー設定の図解

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

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

TinyMCE Advancedプラグインのクラシックブロックの図解

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

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

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

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