WordPress の Cocoon でカラフルな表などを挿入したいとき、プラグイン TinyMCE Advanced をインストールすると使えるようになります。設定方法をまとめておきます。
設定手順
以下の手順で設定できます。
① TinyMCE Advanced をインストールします。
「ダッシュボード」→「プラグイン」→「新規追加」→ 右上の検索欄に「TinyMCE …」と入力 → 「TinyMCE Advanced」が出てくるので「今すぐインストール」をクリック → 「有効化」をクリックする。
② 旧エディタ表示に設定する。
「ダッシュボード」→「Cocoon 設定」→「エディター」タブの「Gutenberg エディターを有効にする」のチェックを外し、「変更をまとめて保存」をクリックする。
③ ほぼ必須機能となる、「背景色」等のボタンを表示させるよう設定しておきます。
「ダッシュボード」→「設定」→「TinyMCE Advanced」をクリックし、「旧エディター」タブをクリック → ”使用しないボタン”の欄から、「背景色」のボタンを上のほうにドラッグし、フォント…となっている欄(表のアイコン近くなど)にドロップします。→ 「変更を保存」で設定完了です。
④ 記事の編集画面で、上部のメニューから、「テーブル」や③で設定した「背景色」等のボタンをクリックして、Excel や Word に似た操作性で使用できるようになります。
* ボタンを追加したいときや、設定を戻したいときは、②、③の設定で変更してください。
* また、表の背景色のつけ方がやや特殊です。
先に「テーブル」ボタンをクリックして 2×1 等の表を配置します。つぎに、再度、テーブルボタンの▼をクリックし、表のプロパティから色を設定します。
デフォルトの表との違い
Cocoon のデフォルトに表の設定があります。しかし、ネット検索すると、ビジュアル的に設定するのは無理とのことです。
簡単に、カラーの表を入れたかっただけですが、簡潔に記載されたサイトが見つからなかったためまとめました。表の背景色の設定にちょっと癖がありますが、便利に使えています。
まとめ
プラグイン TinyMCE Advanced の設定方法、使い方についてまとめました。
関連リンク
・ ソースコード挿入用プラグイン 【WordPress】