WordPress設定

Advanced Editor Tools 記事編集画面のツールバーをカスタマズするプラグイン 設定方法と使い方読み終わるまで 1

Advanced Editor Tools 記事編集画面のツールバーをカスタマズするプラグイン 設定方法と使い方 アイキャッチ

ワードプレス(WordPress)の投稿ページや固定ページのへ週画面のツールバーを使い易くカスタマイズできるプラグイン Advanced Editor Tools を解説します。

この記事を見ることで得られるメリット
  • Advanced Editor Toolsの使い方と設定方法がわかります
  • おすすめの便利なオリジナル機能がわかります

昔は TinyMCE Advanced という名称でしたが、現在はAdvanced Editor Toolsに名称が変わっています。

Advanced Editor Tools設定画面上部のインフォメーションAdvanced Editor Tools設定画面上部のインフォメーション

Advanced Editor Toolsで実現できること

Advanced Editor Toolsプラグインを入れると実現できることは主に次の2つです。

  1. Classic Editor(旧エディターに戻すプラグイン)を使っている場合は編集画面のツールバーの項目をカスタマイズして機能を増やすことができる

  2. 標準搭載のブロックエディターではメインツールバーと代替サイドツールバー、クラッシックブロックの3か所に機能を設置できる

※メインツールバーは各ブロックのツールバーのことです。
代替サイドツールバーは画面右側にサイドツールバーとして表示されます。

Classic Editor 旧エディターに戻すプラグイン 設定方法と使い方 アイキャッチ
Classic Editor 旧エディターに戻すプラグイン 設定方法と使い方ワードプレス(WordPress)の投稿ページや固定ページのエディタを旧エディターに戻してくれるプラグイン Classic Editor...

Advanced Editor Toolsのインストール方法

Advanced Editor ToolsプラグインをWordPressにインストールする方法を解説します。

WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Advanced Editor Tools”と入力すると下に検索結果が表示されます
  4. ”Advanced Editor Tools”の「今すぐインストール」ボタンをクリックします
“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のダッシュボード(管理画面)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)上部画面

↑ここは設定変更できる部分ではなく説明です

Advanced Editor Tools設定のブロックエディター(TinyMCE)下部画面Advanced Editor Tools設定のブロックエディター(TinyMCE)下部画面

↑クラッシックブロックをカスタマイズできます。
下に表示されている一覧から追加したい機能をドラッグ・アンド・ドロップすることでメニューに追加できます。

反対に表示させたくない機能がある場合は、追加する手順と同様に下側にドラッグ・アンド・ドロップすることでメニューから消すことができます。

画面上部または下部にある変更を保存ボタンを押すと編集画面に変更内容が反映されます。

旧エディター(TinyMCE)

Advanced Editor Tools設定の旧エディター(TinyMCE)画面Advanced Editor Tools設定の旧エディター(TinyMCE)画面

↑Classic Editor(旧エディターに戻すプラグイン)を使っている場合は、下に表示されている一覧から追加したい機能をドラッグ・アンド・ドロップすることでメニューに追加できます。メニュー内に表示された機能を戻す時は下側にドラッグ・アンド・ドロップします。

機能を追加した後は画面上部の変更を保存ボタンを押すと追加した機能が編集画面に反映されます。

ブロックエディター(TinyMCE)と旧エディター(TinyMCE)の設定画面の下にはオプションと上級者向け設定がありますが、初期設定のままで大丈夫です。とくに設定を変更する必要はありません

Advanced Editor Toolsの使い方

前項のAdvanced Editor Toolsの設定でメニューに追加した機能が投稿ページや固定ページの編集画面のツールバーに表示されています。

導入前後の変化を比較するため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)のツールバー
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)の初期導入機能

旧エディター(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 旧エディターに戻すプラグイン 設定方法と使い方