GutenbergとTinyMCE Advanced の設定

TinyMCE Advanced
WordPress
Advertisements

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

TinyMCE Advanced のインストールから設定まで、わかりやすく記載しておきたいと思います。

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

TinyMCE Advancedの機能

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

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

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

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

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

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

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

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

TinyMCE Advancedをインストール したエディタ

TinyMCE Advancedの機能が増えました。

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

増やした機能は

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

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

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

TinyMCE Advancedをインストール

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

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

プラグイン TinyMCE Advanced の確認

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

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

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

TinyMCE Advancedの設定

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

TinyMCE Advanced
設定→TinyMCE Advancedの設定

Block Editor と Classic Editor

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

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

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

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

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

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

Block Editor (Gutenberg) には画像や動画を挿入するツールやテーブルを挿入するツールなど様々な機能がありますが、TinyMCE Advanced が関係があるツールは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 とクラシックブロックの違いと便利な使い方
GutenbergW…

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

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

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

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

その他の設定

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

Gutenberg とTinyMCE の便利な設定と高度な設定
Gutenberg …

Gutenberg の便利な利用法

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

再利用ブロック Gutenbergの便利な利用法
再利用ブロックGut…
Advertisements
タイトルとURLをコピーしました