MarsEditのプレビューに、WordPressのデザインを反映！

Macのブログエディタ『MarsEdit』は、ぼくがいつも愛用しているツール。WordPress（ワードプレス）で『WEBメディア』を構築して運用していくのなら、必ず使って欲しいツールの1つです。

その理由は『MarsEditでWordPress（ワードプレス）の投稿を10倍楽にする』でも伝えた通りですが、MarsEditのメリットのひとつにリアルタイムにプレビューを確認できるというものがあります。（リアルタイムにプレビューを確認するメリットは、『MarsEditでWordPress（ワードプレス）の投稿を10倍楽にする』を確認してくださいね。）

ただし、これを実現するには少しカスタマイズが必要ということで、今日は『MarsEditのプレビュー画面に、WordPress（ワードプレス）サイトのデザインを適用する方法』をみていきたいと思います。

MarsEditのプレビューに、WordPressのデザインを反映させる

STEP1：仮投稿をする

まずはWordPress（ワードプレス）管理画面にログインして、仮の投稿を行います。

その際に、上記の画像のようにタイトル部分に『▼タイトル▼』。本文の部分に『▼本文▼』と入力します。これは後で検索できれば何の文字列でも大丈夫です。

そのまま公開をしてしまうのではなく、『プレビュー』ボタンをクリックしてサイト上での表示を確認します。

STEP2：ソースコードをゲットする

サイト上でプレビュー画面で、ソースを取得します。

Google Chromeの場合は、トップメニューの『表示 > 開発/管理 > ソースを表示』で表示できます。

表示されたソースを、全部選択してコピーしておきましょう。

STEP3：ソースをテキストエディタで編集

先ほどコピーしたソースを、テキストエディタ (Cotediterなど）に貼り付けます。

テキストエディタの「検索&置換」の機能を使って以下のとおり置換を行います。

• 『▼タイトル▼』を『#title#』に全部置換
• 『▼本文▼』を『#body##extended#』に全部置換

で、置換されたカスタマイズ済みのソースを、コピーしておきます。

STEP4：MarsEditの環境設定で設定する

MarsEditを起動して、トップメニューの『Blog > Edit Preview Template…』を選択。

STEP3でカスタマイズしたソースを、丸ごとここに貼り付けます。一応…、バックアップをとっておいたほうがいいですね。

ソースを貼りつけたら、『Save Changes』を押して、保存します。

以上で完了！きちんと設定ができていれば、図のように実際のサイトの表示に沿ったプレビューを確認することができるようになります。

最後にもうひと押し

ここまでで問題なくサイトの表示に沿った形でプレビューを確認することができるのですが、実は動作がもっさりしてしまう可能性があります。プレビューの生成に時間がかかってしまうんですね。

実際に記事を執筆している際に必要な箇所は本文のところだけ。ヘッダーやサイドバー、フッター部分というのは、記事執筆時にはプレビューする必要がありません。

ということで、先ほどの『Blog > Edit Preview Template…』の部分で、もう一度ソースを表示させて、ヘッダーやサイドバー、フッターの部分を削除してしまいましょう。

ヘッダーやサイドバーのタグ全体を削除してしまうというよりは、できるだけ表示を崩さないようにしながら、中身の部分だけ削除するといいと思います。