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…』の部分で、もう一度ソースを表示させて、ヘッダーやサイドバー、フッターの部分を削除してしまいましょう。
ヘッダーやサイドバーのタグ全体を削除してしまうというよりは、できるだけ表示を崩さないようにしながら、中身の部分だけ削除するといいと思います。
コメントを残す