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

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

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

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

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

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

STEP1:仮投稿をする

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

MarsEditでWordPress ワードプレス の投稿を楽に使いこなしている件02

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

最後にもうひと押し

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

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

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA