TinyMCE Advancedを導入してブログ記事の作成を捗らせよう

ビジュアルエディタは楽で良いですね。

テキストエディタだと、コードとテキストがごちゃ混ぜになって、見づらい上に完成した姿が見れないので不便です。

そんなビジュアルエディタをもっと便利にするのが今回のテーマになります。

投稿画面のエディタを使いこなしたい

ブログ記事を書く場合、キーワードを強調したり、画像や動画を挿入したり、表を使ったり、リンクを貼ったりと文章を書く以外にも色々とする事があります。そもそも文章も<p>タグや<h2>タグで囲ってやる必要があります。

そんな煩わしい作業を楽にしてくれるのが、エディタです。

特にビジュアルエディタは便利で、強調や見出しやリストなどもクリック一発で挿入してくれます。ソースコードもビジュアルエディタに入力すると自動的に、「&lt;」と「&gt;」で囲ってくれるので手間が省けて本当に助かります。

そんな訳で、作業を始める前にWordPressのエディタ機能を確認してみると、最低限のものしか用意されていない様なので、足らない機能を追加したいと思いTinyMCE Advancedプラグインを導入する事にしました。

TinyMCE Advancedプラグインとは

WordPressのエディタに足らない機能を追加するプラグインです。

投稿画面の初期状態はこんな感じです。最低限の物はあるようですが画像映像やテーブルの挿入がないので追加したいです。

TinyMCE Advancedを導入する

プラグインを追加する

1. 管理画面のプラグインから新規追加をクリックします。
2. 検索窓にプラグイン名「TinyMCE Advanced」を入力してEnter。
3. 見つかったら、いますぐインストールをクリック。
4. プラグインを有効化をクリック。

設定方法

管理画面の設定にTinyMCE Advancedが追加されているのでクリックします。

Editor Settingsという画面です。

めぼしい所では、画像の挿入・動画の挿入・テーブル・背景色・顔文字・検索置換・フォントサイズ・ソースコード辺りでしょうか。また、ドラッグ＆ドロップで好きなように並べ替える事も出来ます。

また、上部にあるEnable the editor menuにチェックを入れると、全ての機能がドロップダウンリストから使用できます。

ついでにAdvanced Optionsという所も設定してみます。英語で書かれているのでよく分からない所もありますが以下の3箇所にチェックを入れておけばいいでしょう。

Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.

CSSの設定をビジュアルエディタに反映させるという意味で、プレビューによる確認の手間を省けそうなので設定します。

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

WorsPressが勝手にテキストエディタの<p> と <br />を消す現象を防止します。直接HTMLを編集したい時に<p>タグが見えないと不便なので助かります。

Replace font size settings

フォントサイズをpx単位に統一してくれます。

最後に右下のSave Changesをクリックして設定保存するのを忘れずに。

足らないタグとかを追加するには

元々あるタグだけでは、まだ足りませんよね。独自のCSSとかもクリックするだけで追加されると便利そうです。

足らない物については、AddQuicktagというプラグインがあるので、AddQuicktagプラグインでタグ打ちをとことん手抜きしようの記事を参考にしてください。

まとめ

クリック一発でHTMLを埋め込んでくれるのは楽です。

記事もクリック一発で書いてくれると楽なんですけどねｗ