GutenbergとAdvanced Editor Tools (旧TinyMCE) の設定

Advanced Editor ToolsWP プラグイン
Advanced Editor Tools をインストールした場合

プラグインのインストールと設定

Advanced Editor Tools の設定をわかりやすく記載しておきたいと思います。

プラグインはとても簡単で便利ですけど、時折不具合を起こすこともあります。プラグイン間で問題を起こしたり、テーマやサーバーとの相性が悪かったりもします。プラグインの利用しすぎにも注意した方が良いようです。
インストール前にバックアップしておくことも良く言われることです。プラグイン間の問題でサイトにアクセス不能になる場合もあります。

Advanced Editor Tools (旧TinyMCE)の機能

WordPressはGutenberg (グーデンベルグ)というエディタが標準搭載されています。それだけでも十分に記事を書くことができます。

しかしまだGutenberg エディタだけでは機能が少なく、エディタを更に使い易くするためにプラグインAdvanced Editor Tools (旧TinyMCE)を使うと便利です。この先、Gutenberg エディタが充実すれば、Advanced Editor Tools は必要なくなるかもしれませんが、Advanced Editor Tools を利用している人は多いと思います。

どういう機能が増えるのかとインストールから設定まで記載します。

Advertisements

Gutenberg (グーデンベルグ)エディタ

WordPressをインストールしただけのエディタ

下の画像はWordPressをインストールしただけのエディッタです。

Advanced Editor Tools
Advanced Editor Tools をインストールしない場合

上の画像のエディタでも十分かもしれませんが、もっと使い易いようにAdvanced Editor Tools をインストールします。

Advanced Editor Tools (旧TinyMCE)をインストール したエディタ

Advanced Editor Tools の機能が増えました。

Advanced Editor Tools
Advanced Editor Tools をインストールした場合

増やした機能は

  • 書式のクリア(clera fomatting)
  • 取消しボタン
  • 下線ボタン
  • 文字の色の指示 (Text color)

Advanced Editor Tools の機能はもっとたくさんあり、設定で増やすことができます。

Gutenberg のエディッタ やAdvanced Editor Tools は、HTMLの知識がなくても、作表や画像を設置したり、文字の色や大きさを変えたり様々なことが簡単にできます。

Advanced Editor Tools (旧TinyMCE)をインストール

Advanced Editor Tools を検索してインストールします。

  1. ダッシュボードのプラグインから新規追加をクリックする
  2. プラグインの検索窓に「Advanced Editor Tools」を入れ検索する
  3. Advanced Editor Tools をインストール
  • TinyMCE Advanced
  • プラグインをインストール
  • プラグインを有効化

プラグイン Advanced Editor Tools の確認

プラグインはインストール後、有効化しなければ使うことができません。

プラグインのインストールと有効化の確認方法は、左側の「プラグイン」という項目から「インストール済みのプラグイン」クリックして下さい。インストール済みのプラグインの一覧が表示されます。

  • 有効化されたプラグイン 停止ボタンがある
  • 有効化されていないプラグイン 有効化ボタンがある
プラグイン有効化
プラグインインストールの確認・有効化

Advanced Editor Tools の設定

インストール後、Advanced Editor Tools は設定が必要です。設定不要のプラグインもあります。左の項目から「設定」を選び、「Advanced Editor Tools」を開きます。

Advanced Editor Tools
Advanced Editor Tools

Block Editor と Classic Editor

Gutenberg (グーテンベルク)は Block Editor でブロック毎に記事を作っていきます。そのブロックの中にクラシックブロックがあり、従来のエディタと同じように利用できます。

また、クラシックブロックと同じ使い方ができ、クラシックブロックの機能を拡張したエディタがClassic Paragraph です。

Advanced Editor Tools の設定で、すべてを従来のエディタ( Classic Editor )に変更することもできます。

2021年まで Classic Editor のサポートがありますが、 Block Editor (Gutenberg) に慣れていた方が良いと思います。

Block Editor (Gutenberg)の機能を充実させるためには、Advanced Editor Tools が必要です。

Classic Paragraphとクラシックエディタ

Block Editor (Gutenberg) には画像や動画を挿入するツールやテーブルを挿入するツールなど様々な機能がありますが、Advanced Editor Tools が関係があるツールはClassic Paragraphとクラシックブロックです。

Block Editor の設定

Block Editor には2つのツールバーがあります。

  1. メインエディタのツールバー
  2. サイドツールバー

1.Block Editor のメインエディタ

メインエディタの設定

メインエディタに設置したいボタンをドラッグします。

  1. 未使用またはサイドツールバーのボタンをドラッグし設置する
  2. 変更を保存

(例)メインツールバーにClear formattingを設置してみます。

TinyMCE Advanced
Block Editor (Gutenberg)の設定 Clear formattingを設置

エディタで確認すると、メインツールバーにClear formattingが追加されています。

設定後のメインツールバー

TinyMCE Advanced
メインツールにClear formattingが追加されている

2.Block Editor のサイドツールバー

サイドツールバーの設定

サイドツールバーに設置したいボタンをドラッグします。

  1. 未使用またはメインバーのボタンをドラッグし設置する
  2. 変更を保存

(例)サイドツールバーに下線ボタンを設置してみます。

設定前のサードツールバー

TinyMCE Advanced
設定前のBlock Editor (Gutenberg)

設定後のサイドツールバー

サイドツールバーに下線ボタン設置されました。

下線ボタンを設置したBlock Editor (Gutenberg)

3.Text colorの設定

YesをONにするとText colorのツールがサイドツールバーに設置されます。2種類のツールがあります。

  • 文字の色を指定するツール
  • テキストの背景色を指定するツール
TinyMCE Advanced
Block Editor (Gutenberg)の設定

設定後のサイドツールバー

サイドツールバーにText colorが設置される

4.Classic Paragraphとクラシックエディタ

ブロックの追加で、Classic Paragraphやクラシックなどのブロックを選ぶことができます。

TinyMCE Advanced
Classic Paragraphとクラシックエディタ
Classic Paragraph とクラシックブロックの違いと便利な使い方 - webNote / WPとゲーム
Advertisements- 目次 G...

Paragraphとクラシックエディタの設定

Paragraphとクラシックエディタに設置したいボタンをドラッグします。

  1. ボタン一覧から必要なボタンをドラッグし設置する
  2. 変更を保存
TinyMCE Advanced

下のボタンの中から必要なボタンを選んで、ドラッグ&ドロップで設置します。設定を終えた後でもボタンの追加ができます。画像はボタンの一部です。

その他の設定

その他の便利な設定(英文の設定部分と高度な設定)について、下記リンクに記載します。

Gutenberg とTinyMCE の便利な設定と高度な設定 - webNote / WPとゲーム
Advertisements- 目次 G...

Gutenberg の便利な利用法

自分でブロックを作ってBlock Editorの一覧に追加できる方法があります。同じパターンを使いまわす時に便利です。

再利用ブロック Gutenbergの便利な利用法 - webNote / WPとゲーム
Advertisements- 目次 再...
Advertisements
タイトルとURLをコピーしました