今回は、WordPressブログにおける代表的なプラグインの1つ…
TinyMCE Advanced
の基本的な設定方法をご紹介していきたいと思います
まず「TinyMCE Advanced」は、記事の編集画面におけるビジュアルエディタ機能を拡張できるツールとして非常におすすめです（もちろん無料）
主な機能や特徴は次の通り
- 機能ボタンが増えることで、クリック1つでできる編集（装飾など）が飛躍的に増える！
- 単純に機能ボタンを増やせるだけでなく、好きなボタンだけを取捨選択でき、ボタン配置まで指定できる！
- 設定自体は超簡単！
僕自身もブログを新規開設するたびに必ず使うプラグインなので、備忘録もかねて「このサイトでも実際に行ってる設定例」を公開しておきたいと思います
はじめに
今回ご紹介する手順は、旧エディタ「Classic Editor」の場合における設定になります。 新エディタ「Gutenberg」の場合ではありませんのでご注意ください
それではさっそく見ていきましょー🐥
プラグインの種類によっては、導入済みのテーマや他のプラグインとの干渉などでWordPressに不具合が発生する可能性があります。 プラグインのご利用にあたっては、あらかじめのバックアップをおすすめします
このブログのWordPress環境
- 使用中のテーマ：WING AFFINGER5
- 使用中のエディタ：クラシックエディタ
- 使用中のプラグイン：おすすめプラグイン17選 の記事で公開しています
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
About me
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^
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点だけ、大事なポイントをご紹介したいと思います（次パートへ！）
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
【重要】「ツールバー切り替え」の使い方（2行目以降に入れると機能しない！）
「TinyMCE Advanced」の数ある機能ボタンのなかで、「ツールバー切り替え」というボタンがあります
この「ツールバー切り替え」の役割は、ビジュアルエディタにおける「2行目以降のボタン」の表示・非表示を切り替えられます
ボタン一覧の2行目以降が閉じた状態
「ツールバー切り替え」ボタンをクリックすると、2行目以降が開く
ちなみに「ツールバー切り替え」ボタンを元々ビジュアルエディタ内に入れていなければ、最初から2行目以降も表示される形になります
で、この「ツールバー切り替え」ボタンの使い方については、ほかのボタン同様に
設定画面で、「使用しないボタン」側 から「ビジュアルエディタ」側にドラッグ＆ドロップ
これで記事編集の画面にボタンが表示されるんですが、1つ大切な注意点として…
「ツールバー切り替え」ボタンは、必ずビジュアルエディタ内の「1行目」に入れるようにしましょう
なぜなら2行目以降に「ツールバー切り替え」ボタンを設置してしまうと、正常に機能しないためです
ちなみに「ツール切り替え」の具体的な用途としては、「普段は使わないけどたまに使うボタンがある」という場合におすすめ
ちなみに僕は使ってません。 理由は、「普段から使うボタンは1行目だけでは収まらないから」ですね
ということで、基本的な設定方法と使い方はこれでOKです
大変お疲れさまでした♪
あずき🐥
＼「本気」で戦うなら ／
―― 検証と改善を重ねた唯一無二のテーマ ――
WING AFFINGER5
今なら超時短ツール「タグ管理プラグイン（4,980円）」の無料配布キャンペーン中！
About me
- 専業ブロガー・フリーランス -
あずき
独立3年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます
普段はTwitterにわりといるので、覗いてもらえると嬉しいです^^