今回は、WordPressブログにおける代表的なプラグインの1つ…
TinyMCE Advanced
の基本的な設定方法をご紹介していきたいと思います
まず「TinyMCE Advanced」は、記事の編集画面におけるビジュアルエディタ機能を拡張できるツールとして非常におすすめです（もちろん無料）
主な機能や特徴は次の通り
- 機能ボタンが増えることで、クリック1つでできる編集（装飾など）が飛躍的に増える！
- 単純に機能ボタンを増やせるだけでなく、好きなボタンだけを取捨選択でき、ボタン配置まで指定できる！
- 設定自体は超簡単！
僕自身もブログを新規開設するたびに必ず使うプラグインなので、備忘録もかねて「このサイトでも実際に行ってる設定例」を公開しておきたいと思います
はじめに
今回ご紹介する手順は、旧エディタ「Classic Editor」の場合における設定になります。 新エディタ「Gutenberg」の場合ではありませんのでご注意ください
それではさっそく見ていきましょー🐥
【プラグイン導入の前に】プラグインの種類によっては、導入済みのテーマやプラグインとの相性、またプラグイン自体の問題などによってWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめバックアップを取られた上で全て自己責任にてお願い致します。
当ブログのWordPress環境
- 使用してるテーマ：WING（AFFINGER5）
- 使用してるエディタ：旧エディタ（クラシックエディタ）
- 使用してるプラグイン：↓ の記事ですべて公開してます
この記事を書いた人
Contents
WordPressプラグイン「TinyMCE Advanced」の導入方法【インストールと有効化】
普通に「インストール＆有効化」をするだけなので、わかる方は読み飛ばしていただいてOKです
① WordPress管理画面 ＞ プラグイン ＞ 新規追加
② 画面右上の入力欄に「TinyMCE Advanced」と入力
③ 上記アイコンの「TinyMCE Advanced」が表示されるので、 今すぐインストール ＞ 有効化 の順にクリック
プラグインの導入はこれでOKです🐥
WordPressプラグイン「TinyMCE Advanced」の基本的な設定方法と使い方【実際に使用してるボタン】
大きく3つのポイントにわかれます
- メインの設定（使いたいボタンを選ぶ！）
- そのほかの基本的な設定（実質1つだけ！）
- 【重要】「ツールバー切り替え」の使い方（2行目以降に入れると機能しない！）
順に見ていきますね🐥
メインの設定（使いたいボタンを選ぶ！）
①「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点だけ、大事なポイントをご紹介したいと思います（次パートへ！）
【重要】「ツールバー切り替え」の使い方（2行目以降に入れると機能しない！）
「TinyMCE Advanced」の数ある機能ボタンのなかで、「ツールバー切り替え」というボタンがあります
この「ツールバー切り替え」の役割は、ビジュアルエディタにおける「2行目以降のボタン」の表示・非表示を切り替えられます
ボタン一覧の2行目以降が閉じた状態
「ツールバー切り替え」ボタンをクリックすると、2行目以降が開く
ちなみに「ツールバー切り替え」ボタンを元々ビジュアルエディタ内に入れていなければ、最初から2行目以降も表示される形になります
で、この「ツールバー切り替え」ボタンの使い方については、ほかのボタン同様に
設定画面で、「使用しないボタン」側 から「ビジュアルエディタ」側にドラッグ＆ドロップ
これで記事編集の画面にボタンが表示されるんですが、1つ大切な注意点として…
「ツールバー切り替え」ボタンは、必ずビジュアルエディタ内の「1行目」に入れるようにしましょう
なぜなら2行目以降に「ツールバー切り替え」ボタンを設置してしまうと、正常に機能しないためです
ちなみに「ツール切り替え」の具体的な用途としては、「普段は使わないけどたまに使うボタンがある」という場合におすすめ
ちなみに僕は使ってません。 理由は、「普段から使うボタンは1行目だけでは収まらないから」ですね
ということで、基本的な設定方法と使い方はこれでOKです
大変お疲れさまでした♪
あずき🐥
この記事を書いた人