【TinyMCE Advanced】WordPressプラグイン設定方法

今日は、WordPressビジュアルエディタを強化してくれる有名なプラグイン【TinyMCE Advanced】を使って、初心者に理想の執筆環境を構築する設定方法を紹介します。

※各メニューの意味等の超初級的な話は省いてます。

プラグイン名：TinyMCE Advanced
作成者: Andrew Ozz

TinyMCE Advanced使い方

プラグイン「新規追加」から、TinyMCE Advancedのインストールが終わったら、管理画面の「設定」→「TinyMCE Advanced」から利用設定を行います。 

設定方法

  1. 利用したいメニューを「Unused Buttons」からドラッグ＆ドロップで①に移動させます。また、不要なものは逆に「Unused Buttons」に移動します。
  2. ②の「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」「Stop removing the and tags when saving and show them in the Text editor」両方とも、チェックを入れます。※私の推奨設定です。
  3. 以上の設定が完了したら「Save Changes」ボタンをクリックします。

ちなみに、②の設定「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」は、テンプレートのCSSをビジュアルエディタに反映するための項目です。

「Stop removing the and tags when saving and show them in the Text editor」は、テキスト(HTML）エディタでの、<p>、<br>の挿入の削除を防止します。 ※ビジュアルエディタとテキスト(HTML）エディタの双方を使う方は必ずチェックを入れた方がいいです。

私が推奨する設定方法

私がWordPressビジュアルエディタを利用して、記事発信をする人に利用してもらいたいメニューを解説します。

メニューは無数にありますが、実際に活用するものは実はほとんどありません。

私も、下記で紹介するメニューぐらいしか記事発信に利用することはありません。

正しい情報発信の邪魔になるようなメニューは利用することを控え、きれいな構造の情報発信を心掛けましょう。

なお、私が提供している極秘副業ツールのテンプレートは、ビジュアルエディタ用のCSSを用意されていますが、用意されていないテンプレートもありますのでご注意ください。

ビジュアルエディタ用のCSSが用意されており、「Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.」にチェックを入れれば、実際の画面に近い雰囲気で更新（記事生成）ができます。

メニュー選択

では、実際に推奨するメニューを解説します。※下記は上記画像の左側から各メニューの説明をしています。

  • Bullet List：リストタグ 
  • Numbered List：ナンバータグ
  • Link：リンク設定
  • RemoveLink Remove Link：リンク解除
  • Quote：引用
  • フォーマット：設定CSSが反映（重要）
  • 段落：見出しタグ

カスタマイズ後の投稿画面

カスタマイズ後

①「ビジュアル」を選択することで、初心者でも記事発信をしやすいビジュアルエディタモードで記事編集できます。

②のメディアを追加から画像のアップロードや挿入ができます。FTPを使ってのアップロードに慣れてない初心者の方は利用するといいでしょう。

③には、「TinyMCE Advanced」で選択したメニューが表示されます。上記画像で表示されているメニューを入れ活用することを推奨します。

なお、③の上段にある以下のメニューも使うことがあるので参考にしてください。

  • 「編集」→「検索置換」
  • 「表示」→「フルスクリーン」
  • 「テーブル」→「テーブル挿入」
  • 「ツール」→「ソースコード」

「検索置換」は記事修正に役立ちます。「フルスクリーン」は作業がしやすくなります。「テーブル挿入」とは表のことです。「ソースコード」を使えば、テキスト（HTML）エディタに変えなくても、ソースを見てコードの微調整ができます。

なお、初心者の方のブログを見ると、間違ったメニュー（タグ）の使用や無駄なタグの乱用を多々見受けます。

通常、必要と考えられるメニュー（タグ）に関しては、本記事で紹介したもので十分です。メニュー（タグ）を利用する際は、どのような意味合いあるのかを理解して活用しましょう。