当記事では、記事作成をより簡単にし直感的に操作できるプラグイン「TinyMCE Advanced」について解説します。

WordPressの投稿画面にはビジュアルモードとテキストモード(HTMLモード)がありますが、出来れば視覚的に分かりやすいビジュアルモードで記事作成を進めていった方がより効率的ですね。
特に、初心者にとっては記事作成の途中で難しいHTMLの編集で躓いてしまうこともあるかもしれません。

ただ、ビジュアルエディタではデフォルトのままだと機能的に不足していることがあり、読みやすいコンテンツを作成するためにはやはり時々HTMLの方も編集しなければならないということが発生してしまいます。

この「TinyMCE Advanced」は、ビジュアルエディタ画面におけるツールボタンの種類を増やしてくれるので、本来ならHTMLエディタでやらなければならなかった操作をビジュアルエディタ上において可能にしてくれるプラグインです。

非常に直感的に操作できるので、HTMLやタグの知識がなくても読みやすいコンテンツを作成することを可能してしれるほか、いちいち画面を切り替えるという手間がなくなり時間的にも節約できますね。

できるだけ煩わしい手間を減らし、クオリティの高い記事を作成することに集中するためにも、ぜひこのプラグインは導入していきましょう。

 

 

 

TinyMCE Advancedをインストールする

それでは、早速TinyMCE Advancedをインストールしていきましょう。

ダッシュボードメニュー>プラグイン>新規追加

から、TinyMCE Advancedを検索して、「今すぐインストール」をクリックします。

622_2

インストールが完了したら、有効化まで進めてください。

Ref: WordPressプラグインをインストールする3つの方法と有効化

 

 

TinyMCE Advancedの設定

TinyMCE Advancedをインストールしたら、まず初期設定を行います。
インストール後、設定メニューに「TinyMCE Advanced」とい項目があるのでこちらにアクセスしてください。

ダッシュボードメニュー>設定>TinyMCE Advanced

ここで行う設定は、

・ ツールボタンの追加
・ Advance Optionの設定

です。

 


1. ツールボタンの追加

設定画面の上部は、投稿画面で実際に使っていくツールを設定します。

下図のように、下の「Unused Buttons」から必要なツールを選び、上のツールバーの部分にドラッグ&ドロップするだけでOK。
逆にデフォルトで設定されているツールで使わなそうなものがあれば、「Unused Buttons」の方に移動し表示させなくすることもできます。

 

474_3

「Enable the editor menu」は、チェックを入れるとツールバーの上部にあるメニューバーが表示されます。
ここでは、TinyMCE Advancedで使用できる機能が全てチェックできるので設置しておくと便利ですね。

 


2. Advance Optionの設定

TinyMCE Advancedの設定画面の下部は、Advanced Optionsの設定です。

474_6

ここでは、下記の2点の項目を設定します。

■ Stop removing the <p> and <br /> tags when saving and show them in the Text editor

エディタのビジュアルモードとテキストモードを両方使う場合はチェックが入れた方がいい項目です。
Wordpressのテキストエディタは、不要な<p>タグと<br>タグを削除する機能があり、ビジュアルエディタで書いたあと、タブを切り替えてテキストモードで編集し、再びビジュアルモードに戻ると、<p>タグや<br>タグが消えてしまっており、段落と改行が崩れてしまうことがあります。

こういった記事編集時の不具合を抑えてくれますが、逆にテキストモードを使用しない場合は、ここはチェックを外した方がいいでしょう。
ビジュアルエディタで作成した文の全ての文頭と文末に<p>タグが自動で挿入されるので、ごちゃごちゃして非常に鬱陶しいです。

 

■ Replace font size settings

ここにチェックを入れると、フォントサイズの単位をpx(ピクセル)で表示できるようになります。

 


3. 補足:Alse Enableの設定

中央部にある、「Also Enable」では、このような項目を設定できます。

474_7

 

■ List Style Options

「List Style Options」にチェックを入れると、「番号なしリスト」及び「番号付きリスト」のデザインを選べるようになります。

474_19

 

■ Context Menu

「Context Menu」にチェックを入れると、エディタ画面で右クリックをしてコンテクストメニューを表示させることができます。
メニュー項目はメニューバーやツールバーと同じなので、特に必要はないかもしれません。

474_20

 

 

■ Link(replaces the insert/Edit Link dialog)

「Link(replaces the insert/Edit Link dialog)」は、高度なリンクの設定項目が必要な場合にチェックを入れます。

474_21

この設定によって、外部リンクのnofollow指定がビジュアルエディタでできるようになるので、チェックを入れておくのがおすすめです。

 

 

TinyMCE Advancedの使い方

文字を太くする&文字色を変更する

文字を太字にしたり、文字色を変更する場合は、変更したい箇所を選択してから、設定ボタンをクリックします。

474_11

474_12

 

段落(見出し)を変更する

文を見出しに設定する場合も同じように、文を選択してから「段落」のプルダウンから任意の見出しを設定します。

474_13

474_14

このように見出しに応じで文字の見た目も変わります。

 

リストの作成

文を箇条書きにするリストタグは、「番号なしリスト」と「番号付きリスト」の2種類があります。
箇条書きにしたい文を選択してから、どちらかのツールを選択してリストを作成します。

474_15

474_16

 

テーブル(表)の挿入

テーブル(表)を挿入するには、テーブルタグツールを選択し、任意の列や行を選択します。
この列や行は後から追加や削除が可能です。

474_18

474_17

 

 

設定したツールがエディタに反映されない時の対処法

設定画面で設定したツールがエディタに表示されていない時があります。
TinyMCE Advancedインストール後、投稿画面を見ると確かに1列目しか表示されていませんね。

474_8
デフォルトでは1列目しか表示されないようになっているので、全てのツールアイコンを表示させるには、下図の「ツールバー切り替え」ボタンをクリックします。

474_9

これで、2列目以降も表示されるようになりましたね^^