WordPressの記事作成に便利!プラグイン《Advanced Editor Tools (旧名 TinyMCE Advanced)》の導入・基本設定【WordPressの初期設定】

この記事では、おすすめプラグインの1つでもある【Advanced Editor Tools (旧名 TinyMCE Advanced)】の使い方について解説していきます。

Advanced Editor Toolsとは?

Advanced Editor Toolsは、ブロックエディター (Gutenberg) とクラシックエディター (TinyMCE) を拡張・強化することができるプラグインです。無料ブログのような投稿のしやすさを、このプラグイン1つで拡張することができるようになります。

例えば、文字のサイズを変更したり、太字にしたり、見出しをつけたりなどの文字装飾がワンクリックで簡単にできるようになります。

また、WordPressを使いこなしていくと実感してきますが、WordPress特有である文章の改行の問題もこのプラグインで解消できますので導入しておくことをオススメします。

では実際に導入・設定していきましょう。

プラグイン【Advanced Editor Tools】の導入

まずはWordPressダッシュボードのサイドメニューにある《プラグイン》にカーソルを合わせ、「新規追加」をクリックします。

すると【プラグインを追加】という新規追加ページに移動しますので、ページ右側にある《プラグインの検索》の欄に「Advanced Editor Tools」と入力します。

入力すると、すぐ下に候補としていくつかのプラグインが表示されるので、一番上に表示されている【Advanced Editor Tools】のプラグインを見つけてください。

見つけることができたら、まず《今すぐインストール》のボタンをクリックします。すると《インストール中》という表示に変わり、インストールが終わると《有効化》というボタンに変わります。

この《有効化》のボタンをクリックして有効化させてください。

これで【Advanced Editor Tools】のプラグインを導入することができました。

プラグイン【Advanced Editor Tools】の設定

つづいて、【Advanced Editor Tools】の設定を行なっていきます。

ダッシュボードからサイドメニューにあるプラグインにカーソルを合わせて、インストール済みプラグインをクリックします。

すると、一番上にAdvanced Editor Tools (旧名 TinyMCE Advanced)がありますので「設定」をクリックします。

もしくは左側サイドメニューの《設定》の項目から、Advanced Editor Tools (TinyMCE Advanced)をクリックして編集画面に入ることもできます。

編集画面に入ると、ページの一番上に「注: このプラグインは “TinyMCE Advanced” から “Advanced Editor Tools” に名前が変更されました。プラグインの機能は同じままです。」と書かれています。

その下に《ブロックエディター (TinyMCE)》というタブと《旧エディター(TinyMCE)》というタブがあります。

今回は、右側の《旧エディター》での説明をしていきます。

《旧エディター》をクリックしてタブを開いたら、すぐ下の『エディターメニューを有効化する』にチェックが入っているかを確認してください。

このチェックが入っていないと、すぐ下に表示されている[ファイル][編集][挿入][表示][フォーマット][テーブル][ツール]などのメニューが投稿編集画面でグレーアウトして使えなくなってしまいます。

『エディターメニューを有効化する』にチェック入れておくと全て使えるようになりますので必ず確認するようにしましょう。

メニューの下にあるのは、実際に投稿画面に出てくる様々な便利機能になります。例えば、基本的なものだと、『太字表示』『車体表示』『引用表示』『箇条書きリスト表示』『数字付きのリスト表示』『文字の寄せ方』『リンクの挿入』『フォントサイズ』『インデント』『テキストの色』などがあり、これらがデフォルトで使えるようになっています。

さらにその下を見てみる、【使用しないボタン】という項目があります。

ここにコマンドがズラッと並んでいますが、これらの【使用しないボタン】の中で使いたいものがあれば、ドラッグアンドドロップで設定をしていきます。

例えば、意外にも使用するのが『下線』というコマンドで、この下線を追加する場合は、【使用しないボタン】の中からドラッグアンドドロップで持っていって、メニューの好きなところに配置します。

逆に追加したものの中から「必要ない」「外したい」というコマンドがあれば、メニュー内から、ドラッグアンドドロップで【使用しないボタン】へ持っていきます。

このように、自分が使いたいようにメニューをカスタムすることができます。

さらに下へスクロールしていくと、《オプション》という項目があります。

一番上のチェックの項目は、『クラシックパラグラフやクラシックブロックの上部ツールバーに全てのボタンを追加します』ということで、旧エディターの場合はこの項目にチェックを入れておかないと投稿画面にメニューが表示されません。

あとは一番下の『フォントサイズ』という項目、こちらもチェックを外してしまうとメニューでフォントサイズを選ぶことができなくなります。

ですので、ここは必ずチェックを入れておきましょう。

続いて《上級者向けの設定》こちらはデフォルトで問題ありません。

一番重要なのが『3つ目のクラシックブロックとクラシックエディター内のパラグラフタグを保持』、こちらには必ずチェックを入れておいてください。

「パラグラフ」というのは段落という意味ですが、文章を書く際に必ず改行や段落を入れると思います。その改行や段落をHTMLでは〈pタグ〉や〈brタグ〉といったもので認識しています。

WordPressを使っていくと、ときどき〈pタグ〉や〈brタグ〉が何かの拍子で消えてしまう場合があります。

ですが、ここにチェックを入れておくと、その症状を防ぐことができるというものです。

続いて《テーブル用の高度な設定》というものは、表を作成する際の仕様変更になります。

上から3つ目の項目の『テーブルを挿入する際、マウスでドラッグして行と列の数を選択できるグリッドを表示』と、4つ目の項目の『テーブルを編集中にタブキーを押して次のセルに移動』の2つにはチェックを入れておくと便利です。

ここまで設定したら、スクロールして右下にある【変更保存】のボタンをクリックします。

すると、変更したものが反映されます。

これで《Advanced Editor Tools (旧名 TinyMCE Advanced)》の使い方は以上になります。