WordPressプラグイン「TinyMCE Advanced」の基本的な設定方法と使い方【ブログのビジュアルエディタを拡張】

今回は、WordPressブログにおける代表的なプラグインの1つ…

の基本的な設定方法をご紹介していきたいと思います

まず「TinyMCE Advanced」は、記事の編集画面におけるビジュアルエディタ機能を拡張できるツールとして非常におすすめです（もちろん無料）

主な機能や特徴は次の通り

僕自身もブログを新規開設するたびに必ず使うプラグインなので、備忘録もかねて「このサイトでも実際に行ってる設定例」を公開しておきたいと思います

それではさっそく見ていきましょー🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

WordPressプラグイン「TinyMCE Advanced」の導入方法【インストールと有効化】

普通に「インストール＆有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです

① WordPress管理画面　＞　プラグイン　＞　新規追加

② 画面右上の入力欄に「TinyMCE Advanced」と入力

③ 上記アイコンの「TinyMCE Advanced」が表示されるので、　今すぐインストール　＞　有効化　の順にクリック

プラグインの導入はこれでOKです🐥

WordPressプラグイン「TinyMCE Advanced」の基本的な設定方法と使い方【実際に使用してるボタン】

大きく3つのポイントにわかれます

順に見ていきますね🐥

メインの設定（使いたいボタンを選ぶ！）

①「Classic Editor（TinyMCE）」タブをクリックして開きます

② WordPress管理画面　＞　設定　＞　TinyMCE Advanced　をクリックします

③ まず、画面1番上の「エディターメニューを有効化する。」にチェックを入れましょう

このチェックを外すと、「TinyMCE Advanced」の機能そのものがオフになります

④ 次に、「使用しないボタン」の一覧から実際に使いたいボタンを選んでいきます

各ボタンの機能については、それぞれにカーソルを合わせると説明が表示されます

まず先に、このサイトで実際に使ってるボタンを載せておきますね

⑤ 使いたいボタンが決まったら、そのボタンをドラッグして、その上に表示されてる「エディタメニュー」側でドロップします

「ドラッグ」はクリック押しっぱなし、「ドロップ」はクリックを放すこと！

⑥ 同じ流れで、今度は使わないボタンを「エディターメニュー」側から「使用しないボタン」側にドラッグ＆ドロップしていきましょう

⑦「エディタメニュー側」を使いたいボタンだけにできたら、並び順を自分が使いやすい形に整理しましょう（同じようにドラッグ＆ドロップで！）

これでメインの作業はOK。 あとは、残りの基本的な設定をしていきます（一瞬です）

そのほかの基本的な設定（実質1つだけ！）

そのほかの基本的な設定は、大きく…

この2つにわかれますが、実質変更する場所は1ヶ所だけです

「設定」

↑「設定」内の項目は、すべてデフォルトのままです

「高度なオプション」

↑「高度なオプション」では、「Keep paragraph tags in the Classic block and the Classic Editor」にチェックを入れます

ここにチェックを入れることで、「段落タグの保持」という機能が有効になります

「ビジュアルエディタ」と「テキストエディタ」を切り替えた際に生まれてしまう、段落タグの自動補完によるトラブル対策が目的です

よくわからない場合は、とりあえず入れておくのが無難！

残りの設定項目については、すべてデフォルトのままです

基本的な設定はこれだけ🐥

そして最後にもう1点だけ、大事なポイントをご紹介したいと思います（次パートへ！）

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ

【重要】「ツールバー切り替え」の使い方（2行目以降に入れると機能しない！）

「TinyMCE Advanced」の数ある機能ボタンのなかで、「ツールバー切り替え」というボタンがあります

この「ツールバー切り替え」の役割は、ビジュアルエディタにおける「2行目以降のボタン」の表示・非表示を切り替えられます

ボタン一覧の2行目以降が閉じた状態

「ツールバー切り替え」ボタンをクリックすると、2行目以降が開く

ちなみに「ツールバー切り替え」ボタンを元々ビジュアルエディタ内に入れていなければ、最初から2行目以降も表示される形になります

で、この「ツールバー切り替え」ボタンの使い方については、ほかのボタン同様に

これで記事編集の画面にボタンが表示されるんですが、1つ大切な注意点として…

「ツールバー切り替え」ボタンは、必ずビジュアルエディタ内の「1行目」に入れるようにしましょう

なぜなら2行目以降に「ツールバー切り替え」ボタンを設置してしまうと、正常に機能しないためです

1行目内ならどこでもOK！（試してみた）

そもそも「1行目だけ表示 → 2行目以降も開く」ためのボタンだから、1行目にないと使えない！

ちなみに「ツール切り替え」の具体的な用途としては、「普段は使わないけどたまに使うボタンがある」という場合におすすめ

つまり、「普段はボタンの並びを1行目だけでスッキリさせたい！」という場合だね

ちなみに僕は使ってません。 理由は、「普段から使うボタンは1行目だけでは収まらないから」ですね

ということで、基本的な設定方法と使い方はこれでOKです

大変お疲れさまでした♪

あずき🐥

関連：「AFFINGER5」の購入・導入方法を1から解説
関連：「AFFINGER5」導入後にまず行うべきステップまとめ