WordPressのビジュアルエディタを拡張!TinyMCE Advancedの設定方法

TinyMCE Advancedの設定方法

今回は、「TinyMCE Advanced」というプラグインを使って、WordPressの記事編集機能
「ビジュアルエディタ」を拡張する方法を解説します。

ビジュアルエディタはデフォルトでも十分便利な機能ではあるのですが、不要な編集ボタンが配置されていたり、表の挿入ができないなどといった弱みも持っています。

しかし、TinyMCE Advancedを使えば、よく使うボタンだけを好きな順番で配置したり、さらに便利な編集機能を追加することも可能となります。

作業効率が上がることは間違いないので、まだインストールしていない方は、ぜひ参考にしてみてください。
 
 

スポンサーリンク

TinyMCE Advancedをインストール

まず、TinyMCE Advancedをインストールします。

WordPressの管理画面から『プラグイン新規追加』という順にクリックして進み、
プラグイン検索ページで「TinyMCE Advanced」と検索します。

するとTinyMCE Advancedのプラグインがヒットしますので、
これを『今すぐインストール』し、有効化すればOKです。

プラグインのインストール方法を詳しく知りたい方は、こちらの記事も参考にしてみてください。

参考記事:プラグインのインストール方法
 
 

TinyMCE Advancedの設定

プラグインをインストールしたら、WordPress管理画面左メニューから
設定TinyMCE Advanced』という順にクリックして進みます。

『設定→TinyMCE Advanced』という順にクリック
 
 
エディター設定画面が開きます。
画面上部のツールバーに配置されているのが、現在使用している編集ボタンです。

以下のように、下の「使用しないボタン」の中から使いたいボタンを選んで、
上のツールバーにドラッグ&ドロップすれば機能が追加されます。

下の「使用しないボタン」の中から使いたいボタンを選んで、上のツールバーにドラッグ&ドロップ
 
 
また、『エディターメニューを有効化する』にチェックを入れることで、
エディタ上部にTinyMCE Advancedで使用できる全ての機能が収納されたメニューバーが表示されるようになります。

『エディターメニューを有効化する』にチェックを入れる
 
 
基本的には自分好みに配置したボタンを使うのがほとんどですが、配置したボタン以外の機能を使用したい場合に、こちらから目的の機能を探すことができます。
 
 
ツールバーのカスタマイズが済んだら、ページ下部で以下の項目にチェックを入れましょう。

TinyMCE-Advanced設定画面
 
 

  • フォントサイズ
    チェックを入れると、フォントサイズの単位をpt(ポイント)からpx(ピクセル)に変更することができます。
  •  

  • 段落タグの保持
    WordPressで記事を作成していると、ビジュアルエディタで書いた記事をテキストエディタで修正する、という場面がよくありますが、テキストエディタで修正した記事を、再びビジュアルエディタで確認すると、不要なタグが追加されるといった不具合が起きます。

    しかし、こちらの項目にチェックを入れておくことで、そのような不具合を回避することができます。

 
 
全ての設定が完了したら、『変更を保存』ボタンをクリックしましょう。

『変更を保存』ボタンをクリック
 
 

スポンサーリンク

ビジュアルエディタの確認

実際に記事作成画面を開いて、カスタマイズしたビジュアルエディタを確認してみましょう。

カスタマイズしたビジュアルエディタ
 
 
デフォルトでは、ボタンは一列でしか表示されていませんが、『ツールバー切り替え』ボタンをクリックすれば、TinyMCE Advancedの設定で配置したボタンが全て表示されます。

『ツールバー切り替え』ボタンをクリック
 
 

まとめ

今回は、プラグイン「TinyMCE Advanced」を使って、WordPressのビジュアルエディタを拡張する方法を解説しました。

TinyMCE Advancedを使えば、記事編集に使うツールバーを自分好みにカスタマイズでき、作業効率もグッと高めることができます。

HTMLの知識もほとんど要らなくなるので、初心者の方にもオススメのプラグインです。
 
 

スポンサーリンク








TinyMCE Advancedの設定方法