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

今日は、WordPressビジュアルエディタを強化してくれる有名なプラグイン【TinyMCE Advanced】を使って、初心者に理想の執筆環境を構築する設定方法を紹介します。
※各メニューの意味等の超初級的な話は省いてます。
プラグイン名:TinyMCE Advanced
作成者: Andrew Ozz
TinyMCE Advanced使い方
プラグイン「新規追加」から、TinyMCE Advancedのインストールが終わったら、管理画面の「設定」→「TinyMCE Advanced」から利用設定を行います。
- 利用したいメニューを「Unused Buttons」からドラッグ&ドロップで①に移動させます。また、不要なものは逆に「Unused Buttons」に移動します。
- ②の「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」両方とも、チェックを入れます。※私の推奨設定です。
- 以上の設定が完了したら「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)エディタに変えなくても、ソースを見てコードの微調整ができます。
なお、初心者の方のブログを見ると、間違ったメニュー(タグ)の使用や無駄なタグの乱用を多々見受けます。
通常、必要と考えられるメニュー(タグ)に関しては、本記事で紹介したもので十分です。メニュー(タグ)を利用する際は、どのような意味合いあるのかを理解して活用しましょう。