こんにちは、久川和人です。
今回は、TinyMCE Advancedのインストール・設定・使い方について説明していきます。
【TinyMCE Advanced】は、ワードプレスの投稿記事や固定ページを書く時の画面（Gutenberg、ビジュアルエディター）の編集ボタンを自由に増やすことができます。
編集ボタンとは、下図の赤枠部分です。
TinyMCE Advancedを設定することで、無料ブログやMicrosoft Wordのような感じで、文字装飾をすることができます。
この記事の目次
TinyMCE Advancedのインストール方法
TinyMCE Advancedのインストールを行います。
ワードプレスの管理画面にアクセスします。
管理画面の左メニューの【プラグイン】⇒【新規追加】をクリックします。
①右上のキーワードに【TinyMCE Advanced】（または、tinymce）と入力、
②TinyMCE Advancedを確認し、【今すぐインストール】をクリックします。
【有効化】をクリックします。
プラグイン一覧の画面に切り替わり、【プラグインを有効化しました。】と表示されます。
TinyMCE Advancedがインストールされ、有効化されました。
TinyMCE Advancedの設定方法
TinyMCE Advancedを有効化したら、初期設定を行います。
管理画面の左メニューの【設定】⇒【TinyMCE Advanced】をクリックします。
エディター設定画面が表示されます。エディター設定画面では、Classic Editor（ビジュアルエディター）とWordPress5.0以降で変更されたGutenbergのそれぞれの設定を行います。
Classic Editor（ビジュアルエディター）の設定
ここでは、Classic Editor（ビジュアルエディター）の設定を行います。ビジュアルエディターは、WordPress4.9.9以下のバージョンでは標準で使用するエディターです。WordPress5.0以上の場合は、ビジュアルエディターを使う設定を行います。
【Classic Editor（TinyMCE）】タブをクリックします。
①Toolbars for the Classic Editor (TinyMCE)の下にある【エディターメニューを有効化する。】にチェックを入れます。
②追加したいボタンをドラック&ドロップします。
Gutenbergの設定
つぎに、Gutenbergの設定を行います。GutenbergはWordPress5.0以上か、WordPress4.9以下でGutenbergプラグインをインストールしている場合に利用します。
【Block Editor（Gutenberg）】タブをクリックします。
①画面を下にスクロールして、Toolbars for the Classic Blocks in the Block Editor (Gutenberg)の下にある【Enable the editor menu (recommended). 】にチェックを入れます。
②追加したいボタンをドラック&ドロップします。
共通設定
画面を下にスクロールすると、「設定」および「高度なオプション」があります。
以下にチェックを入れることをおすすめします。
③Append all buttons to the top toolbar in the Classic and Classic Paragraph blocks.
Gutenbergのすべてのクラッシックブロックに、TimeMCEで設定したツールバーを一番上に表示させます。
④リストスタイルオプション
順序付きリストの先頭記号に英大文字や小文字、順序なしリストの先頭番号に黒丸や四角を使用できます。
⑤フォントサイズ
フォントサイズをピクセル（px）表示させます。
⑥Hybrid Block Editor Mode
GutenbergのブロックでクラシックとGutenbergの両方の機能が利用できます。TinyMCEと連携するプラグインがGutenbergでも利用することが可能になります。
⑦Add “Classic Paragraph” Block.
GutenbergのブロックでTinyMCEを利用しながらクラシックブロックと同等の機能が利用できます。
⑧Replace the Block Editor with the Classic Editor
プラグインのClassic Editorと同等の機能が利用できます。Classic Editorをインストールしなくても、WordPress5.0以上で旧エディター（ビジュアル、テキスト）が利用できます。
⑨段落タグの保持
チェックを入れると、ビジュアルモードとテキストモードとを切り替えた際に、不要なタグを付けないようにします。
さらに画面を下にスクロールすると「管理」があります。
⑩設定した内容を保存（エクスポート）や以前設定した内容を反映（インポート）させることができます。
⑪どのエディターで有効化させるか設定します。すべてチェックをします。
⑫【デフォルトの設定を復元】をクリックすると、初期の状態に戻すことができます。
変更が終わったら、【変更を保存】をクリックします。
TinyMCE Advancedのエクスポート、インポート
TinyMCE Advancedの設定した内容を保存（エクスポート）したり、以前設定した内容を反映（インポート）させることができます。
TinyMCE Advancedのエクスポート
TinyMCE Advancedのエクスポートをする場合は、【設定のエクスポート】をクリックします。
TinyMCE Advancedの設定のエクスポート画面が表示されます。
①の内容をコピーして保存します。
②の【すべて選択】をクリックすると、①の内容がすべて選択されます。
TinyMCE Advancedのインポート
TinyMCE Advancedのインポートをする場合は、【設定のインポート】をクリックします。
TinyMCE Advancedの設定のインポート画面が表示されます。
①にエクスポートした内容を張り付けます。
②【検証】をクリックして、①の内容が問題ないかどうか確認します。
③【インポート】をクリックして、設定を反映させます。
まとめ
TinyMCE Advancedのインストール方法と設定方法について説明しました。
TinyMCE Advancedを導入しないと、ビジュアルエディターで文字装飾などができず、テキストエディターに切り替えて文字装飾する必要があります。
そのため、ブログの記事をビジュアルエディターで作成する場合には非常に便利な機能になりますので、ぜひ導入してみてくださいね。
もし、このブログを読んで、興味を持った。質問がある。感想がある。などがありましたら、お気軽にお問い合わせにてご連絡くださいね。
⇒久川に問い合わせてみる。
最後まで読んでいただきありがとうございました。
