TinyMCE Advancedプラグインの使い方(ビジュアルエディタの機能拡張)

TinyMCE Advancedプラグインは記事を作成する時に使用するビジュアルエディタのツールバーを拡張してくれるプラグインです。フォントサイズやフォントの種類を設定したり、下線を引いたりすることが簡単にできるようになります。ここではTinyMCE Advancedプラグインのインストール方法と使い方について解説します。

TinyMCE Advancedプラグインのインストール

TinyMCE Advancedプラグインをインストールするには、画面左側の「プラグイン」メニューの中にある「新規追加」メニューをクリックして下さい。

「プラグインを追加」画面が表示されましたら、画面右上の検索ボックスで「TinyMCE Advanced」を検索して下さい。

「TinyMCE Advanced」プラグインが表示されましたら「今すぐインストール」をクリックして下さい。

インストールが完了します。

なおダウンロードしてインストールされたい場合は下記のURLからダウンロードできます。

• https://ja.wordpress.org/plugins/tinymce-advanced/

続いてプラグインの有効化を行います。画面左側の「プラグイン」メニューの中にある「インストール済みプラグイン」メニューをクリックして下さい。

「プラグイン」画面が表示されます。現在インストール済のプラグインの一覧が表示されます。

「TinyMCE Advanced」に表示されている「有効化」をクリックして下さい。

「TinyMCE Advanced」プラグインが有効となりました。これで準備は完了です。

TinyMCE Advancedプラグインが有効な時のビジュアルエディタ

それでは記事の新しい作成画面を表示して下さい。

デフォルトのビジュアルエディタと違い、ツールバー上にメニューが表示されていたりツールバーに表示されているアイコンも増えています。

オリジナル(TinyMCE Advancedプラグインが無効)：

TinyMCE Advancedプラグインが有効：

今まではテキストエディタで直接記述が必要だったフォントサイズの変更もビジュアルエディタ上で簡単に設定できるようになります。

またビジュアルエディタ上のメニューからも書式を設定することができます。

このようにビジュアルエディタのツールバーを拡張し、記事本文の作成が以前よりも効率よく行えるようになります。

TinyMCE Advancedプラグインのカスタマイズ

TinyMCE Advancedプラグインをカスタマイズしてツールバーに表示されるアイコンを増やしたり並べ替えたりすることができます。カスタマイズを行うには、画面左側の「設定」メニューの中にある「TinyMCE Advanced」メニューをクリックして下さい。

設定画面が表示されます。

「使用しないボタン」のところに表示されているものが現在ツールバー上に表示されていないものです。例えばこの中から常にツールバー上に表示しておきたいボタンをドラッグ＆ドロップで上のエリアへ移動させて下さい。例として「下線」を移動させてみます。

設定を変更した場合には、画面右上の「変更を保存」をクリックして下さい。

これでツールバー上に常に「下線」を設定するためのアイコンが表示されるようになりました。改めて新しい記事の作成画面を表示してみると、ビジュアルエディタ上に「下線」を設定するためのアイコンが増えていることが確認できます。

このようにTinyMCE Advancedプラグインをカスタマイズして、普段よく使用する機能を常に表示したり並べ替えたりすることができます。