WordPressのビジュアルエディタって今ひとつ使い勝手が…、と思いませんか?

WordやExcelなどに慣れていると、Wordpressのそれって、

だけなんですよね。

明らかに物足りないと思ってしまうのですが、そんな悩みを解決するプラグインがあるのです。

今回は「TinyMCE-Advanced」の紹介をしていきたいと思います。

ビジュアルエディタとは?

WordPressで記事を書く場合、ビジュアルエディタとテキストエディタの2種類があります。

ビジュアルエディタでは、書いていった記事が実際にサイトでどのように表示されるかを目で確認できるようになっています。

一方で、テキストエディタに比べると、文字や文の装飾についてできることが限られており、より高度な設定を使って文を書いていきたい場合、特にHTMLコードを挿入しながら記事作成をしたい場合には、テキストエディタを使用することになります。

基本的な流れで行くと、ビジュアルエディタで記事を書いていき、完成後、テキストエディタで細かい設定を加える、という形が一般的でしょう。

とはいえ、ビジュアルエディタで出来ないことが多いと、テキストエディタでの修正が多くなり、見落としや間違いが発生する可能性が高くなります。

できるだけ、ビジュアルエディタで記事を完成に近づけたいのですが、その際に便利なのが、この「TinyMCE-Advanced」というプラグインです。

このプラグインをインストールして有効化しただけで、ビジュアルエディタで使用できるアイコンがこれだけ増えています。

TinyMCE-Advancedのインストールと設定

それではTinyMCE-Advancedのインストールと設定方法を解説していきます。

インストール

1. WordPress左一覧のプラグインより「新規追加」をクリックし、「TinyMCE-Advanced」を検索して、見つけ出したら「今すぐインストール」をクリックします。

2. インストールが終わったら「有効化」をクリックしてください。

これでインストールは完了です。

設定

1. 設定画面は、Wordpress左一覧の「設定」より「TinyMCE-Advanced」をクリックするか、

「インストール済みプラグイン」一覧の「TinyMCE-Advanced」の「設定項目」をクリックします。

2. 「エディター設定」の画面です。

主に使用するのはこの部分になるでしょう。

ビジュアルエディタのアイコンを設置することができるバーが4つ、表示され、現在、すでに設置されているアイコンが並びます。

その下に「使用しないボタン」がありますので、ビジュアルエディタバーに加えたいアイコンをドラッグ&ドロップすることが出来ます。

逆に、バーから省きたいボタンもドラッグ&ドロップで「使用しないボタン」に移動させることが出来ます。

3. 「設定」ですが、デフォルトのままで問題ないと思います。

簡単にそれぞれの設定を説明すると、

ストスタイルオプション:
箇条書き、または番号付きリストを作ると、文の最初に点や数字が挿入されます。
コンテキストメニュー:
編集画面で右クリックするとリンクやテーブルを挿入できます。
代替リンクダイアログ:
リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。
目次作成ができるページ内リンクも設定できます。
リンクを設定したあとならWordPressのリンク設定画面を開けます。
フォントサイズ:
ピクセルでのフォントサイズを設定できるようになります。

4. 「高度なオプション」ですが、2番目の「段落タグの保持」にチェックを入れておくようにしましょう。

記事を作成した後、ビジュアルエディタとテキストエディタを切り替えた際に、起こる自動補完を防いでくれます。
ただし、完璧ではないので、きちんと目視してチェックするようにしましょう。

5. 最後に「変更を保存」をクリックするのを忘れないようにしてくださいね。

まとめ

使い方は簡単で、基本的に装飾したい部分をドラッグしておいて、アイコンをクリックするだけです。

その結果、装飾後が表示されますので、おかしいところがないかどうか、確認してください。

「TinyMCE-Advanced」を使うことで文の装飾がとても容易になります。
使いやすいようにカスタマイズして、記事作成時間の短縮に使ってください。