ワードプレス(WordPress)の投稿ページや固定ページのへ週画面のツールバーを使い易くカスタマイズできるプラグイン Advanced Editor Tools を解説します。
- Advanced Editor Toolsの使い方と設定方法がわかります
- おすすめの便利なオリジナル機能がわかります
昔は TinyMCE Advanced という名称でしたが、現在はAdvanced Editor Toolsに名称が変わっています。
Advanced Editor Tools設定画面上部のインフォメーションAdvanced Editor Toolsで実現できること
Advanced Editor Toolsプラグインを入れると実現できることは主に次の2つです。
Classic Editor(旧エディターに戻すプラグイン)を使っている場合は編集画面のツールバーの項目をカスタマイズして機能を増やすことができる
- 標準搭載のブロックエディターではメインツールバーと代替サイドツールバー、クラッシックブロックの3か所に機能を設置できる
※メインツールバーは各ブロックのツールバーのことです。
代替サイドツールバーは画面右側にサイドツールバーとして表示されます。
Advanced Editor Toolsのインストール方法
Advanced Editor ToolsプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Advanced Editor Tools”と入力すると下に検索結果が表示されます
- ”Advanced Editor Tools”の「今すぐインストール」ボタンをクリックします
“Advanced Editor Tools”のインストール完了画面↑Advanced Editor Toolsのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Advanced Editor Tools”を有効化すると表示される画面これでAdvanced Editor Toolsのインストールと有効化は完了です。
Advanced Editor Toolsの設定と使い方
Advanced Editor Toolsをインストールして有効化するだけでとくに設定しなくてもツールバーの機能の種類と数が変化しますが、初期設定のままだと使いにくいです。
- ツールバーに利用したい機能の追加と、使い易いように機能の並び順を変更する作業は必須になります
- 機能の追加と並び順の変更はマウス操作だけで完了するので非常に簡単です
利用しているWordPressのテーマによって編集画面のツールバーの内容やレイアウトが異なります。当記事ではJINを利用しています。テーマオリジナルの機能とAdvanced Editor Toolsの機能がミックスされてツールバーに表示されます。
Advanced Editor Toolsの設定
Advanced Editor Toolsの設定画面はダッシュボード(管理画面)の設定の中にある「Advanced Editor Tools(TinyMCE Advanced)」です。
WordPressのダッシュボード(管理画面)↑Advanced Editor Toolsの設定画面はWoredPressのダッシュボード(管理者画面)の「設定」内の「Advanced Editor Tools(TinyMCE Advanced)」をクリックします。
Advanced Editor Toolsは2つの設定項目がある
ブロックエディターを使う場合の設定とClassic Editor(旧エディターに戻すプラグイン)を使っている場合の設定の2つの設定項目があります。
設定画面上の表示は次のようになっています。
- ブロックエディター(TinyMCE)
- 旧エディター(TinyMCE)
Classic Editorを導入して有効化している場合にのみ機能します
Advanced Editor Toolsで追加できる機能はブロックエディターと旧エディターで共通なので全く同じです。ただし初期設定で実装されている機能の数は旧エディターの方が多いです。
ブロックエディター(TinyMCE)
Advanced Editor Tools設定のブロックエディター(TinyMCE)上部画面↑ここは設定変更できる部分ではなく説明です
Advanced Editor Tools設定のブロックエディター(TinyMCE)下部画面↑クラッシックブロックをカスタマイズできます。
下に表示されている一覧から追加したい機能をドラッグ・アンド・ドロップすることでメニューに追加できます。
反対に表示させたくない機能がある場合は、追加する手順と同様に下側にドラッグ・アンド・ドロップすることでメニューから消すことができます。
画面上部または下部にある変更を保存ボタンを押すと編集画面に変更内容が反映されます。
旧エディター(TinyMCE)
Advanced Editor Tools設定の旧エディター(TinyMCE)画面↑Classic Editor(旧エディターに戻すプラグイン)を使っている場合は、下に表示されている一覧から追加したい機能をドラッグ・アンド・ドロップすることでメニューに追加できます。メニュー内に表示された機能を戻す時は下側にドラッグ・アンド・ドロップします。
機能を追加した後は画面上部の変更を保存ボタンを押すと追加した機能が編集画面に反映されます。
ブロックエディター(TinyMCE)と旧エディター(TinyMCE)の設定画面の下にはオプションと上級者向け設定がありますが、初期設定のままで大丈夫です。とくに設定を変更する必要はありません
Advanced Editor Toolsの使い方
前項のAdvanced Editor Toolsの設定でメニューに追加した機能が投稿ページや固定ページの編集画面のツールバーに表示されています。
導入前後の変化を比較するためAdvanced Editor Tools導入前のツールバーも載せています。
導入後のツールバーは初期設定の状態です。
ブロックエディター
Advanced Editor Tools導入前のブロックエディターのツールバー
Advanced Editor Tools導入後のブロックエディターのツールバー旧エディター(Classic Editor)
Advanced Editor Tools導入前の旧エディター(Classic Editor)のツールバー
Advanced Editor Tools導入後の旧エディター(Classic Editor)のツールバーWordPressの有料テーマ「JIN」を利用している場合は”スタイル”機能が非表示になるので後から手動で追加しないと使い辛くなります
Advanced Editor Toolsで使える機能一覧
Advanced Editor Toolsを導入することで使える機能一覧を紹介します。
この表を見て導入するか否かの参考にしてください。
ブロックエディターの初期導入機能
| 機能名 | 説明 |
|---|---|
| 段落 | 見出しH1～H6を指定 |
| 太字 | 文字を太くする |
| イタリック | 文字を斜めにする |
| 引用 | 文字列を引用記号で囲む |
| Bulleted list | 箇条書き |
| 番号付きリスト | 先頭に数字を付けた箇条書き |
| 左寄せ | 文字列を左に寄せる |
| 中央揃え | 文字列を中央に合わす |
| 右寄せ | 文字列を右に寄せる |
| リンクの挿入/編集 | リンクURLの設定 |
| テキスト色 | 文字色を変更 |
| 背景色 | 文字の背景色を変更 |
| テーブル | 表を挿入 |
| キーボードショートカット | 機能のヘルプ画面を表示 |
旧エディター(Classic Editor)の初期導入機能
| 機能名 | 説明 |
|---|---|
| 段落 | 見出しH1～H6を指定 |
| 太字 | 文字を太くする |
| イタリック | 文字を斜めにする |
| 引用 | 文字列を引用記号で囲む |
| Bulleted list | 箇条書き |
| 番号付きリスト | 先頭に数字を付けた箇条書き |
| 左寄せ | 文字列を左に寄せる |
| 中央揃え | 文字列を中央に合わす |
| 右寄せ | 文字列を右に寄せる |
| リンクの挿入/編集 | リンクURLの設定 |
| リンクの削除 | リンクURLの削除 |
| 元に戻す | 1つ前の操作を取り消す |
| やり直す | 元に戻すを取り消す |
| フォントファミリー | フォントの種類を変更 |
| フォントサイズ | フォントの大きさを変更 |
| インデントを減らす | 字下げの行頭の空白を減らす |
| インデントを増やす | 字下げの行頭の空白を増やす |
| テキストとしてペースト | 書式なしのプレーンテキストとして貼付ける |
| 書式設定をクリア | 書式情報を消してプレーンテキストにする |
| 特殊文字 | 特殊文字一覧から選択して入力できる |
| 続きを読む | MOREタグ(広告を表示する位置)を挿入する |
| テキスト色 | 文字色を変更 |
| テーブル | 表を挿入 |
| キーボードショートカット | 機能のヘルプ画面を表示 |
ブロックエディター・旧エディター共通で追加できる機能
前項と重複している機能も含まれています。
太文字はおすすめの機能です。
| 機能名 | 説明 |
|---|---|
| 下線 | 文字に下線を付ける |
| 打ち消し線 | 文字に打ち消し線を付ける |
| 両端揃え | 文字列を両端揃えにする |
| スタイル | 文字装飾機能一覧を表示 |
| フォントファミリー | フォントの種類を変更 |
| フォントサイズ | フォントの大きさを変更 |
| 切り取り | テキストを切り取る |
| コピー | テキストをコピーする |
| 貼り付け | テキストを貼り付ける |
| インデントを減らす | 字下げの行頭の空白を減らす |
| インデントを増やす | 字下げの行頭の空白を増やす |
| 元に戻す | 1つ前の操作を取り消す |
| やり直す | 元に戻すを取り消す |
| 書式設定をクリア | 書式情報を消す |
| 下付き | 文字を下側にずらす |
| 上付き | 文字を上側にずらす |
| 横ライン | 区切り線を挿入 |
| リンクの削除 | リンクURLの削除 |
| 画像の挿入/編集 | 画像の挿入/編集機能を表示 |
| 特殊文字 | 特殊文字一覧から選択して入力できる |
| テキストとしてペースト | 書式なしのテキストとして貼付ける |
| 印刷 | 印刷画面を表示 |
| アンカー | アンカーリンクを挿入する |
| 検索置換 | 文字を検索して置換する機能 |
| ブロックを表示 | クラシックエディターでブロックを表示 |
| 非表示文字を表示 | 非表示の文字を表示する |
| ソースコード | ソースコードを表示する |
| コード | コードを挿入する |
| フルスクリーン | 編集画面を拡大する |
| 日時を挿入 | 現在の時刻を挿入する |
| Insert/edit video | 動画を挿入・編集する |
| 改行なしスペース | 半角スペースを挿入 |
| 左から右 | 左から右に文字を入力 |
| 右から左 | 右から左に文字を入力 |
| 顔文字 | 顔文字を挿入 |
| 背景色 | 文字の背景色を変更 |
| 続きを読む | MOREタグ(広告を表示する位置)を挿入する |
| ツールバー切り替え | ツールバー2行目以降の表示/非表示 |
| 改ページ | 改ページを挿入(記事分割) |
| Mark | 文字を蛍光ペンで装飾 |
まとめ
Advanced Editor Toolsは記事編集画面のツールバーに機能を追加してくれる便利なプラグインです。
ですが、利用しているWordPressのテーマによっては非表示になるので使いにくくなる可能性もあります。その場合はAdvanced Editor Toolsの機能を追加すれば解決します。
例えば「JIN」を利用している場合はAdvanced Editor Toolsを導入すると装飾する機能が数多く入っている”スタイル”がツールバーに表示されなくなるので後から手動で追加しないといけません。
当記事の機能一覧を見て、使いたい機能がなければとくに導入する必要のないプラグインです。
「Classic Editor」の詳しい解説はこちらの記事を参考にしてください↓
Classic Editor 旧エディターに戻すプラグイン 設定方法と使い方
