[Mac] WordPressの投稿プレビューを簡単に一発確認する方法

WordPressでブログ記事の下書きを書いた時にプレビューを簡単に見る方法の解説です。

記事を書いていきなり公開するのではなく一旦下書き保存して確認、修正してから公開するという方も多いのではないかと思います。ただWordPressの管理画面ではなく外部ツールから投稿すると記事のプレビューがすぐに開けない事があり不便でした。そこでこの方法を考えました。

Alfredを使う

やり方は色々とありますが自分のMac環境で汎用的に使いたかったのでAlfredを使うことにしました。ですのでこれはAlfredユーザー限定のTipsです。

設定方法

ホットキーでAlfredを開いて「Show Alfred Preferrences」を開きます。alをタイプすれば出てくるかと思います。
showalfredpreferences.gif

Alfredの環境設定画面で [Features] - [Web Search] を選択します。
右下の [Add Custom Search] ボタンを押します。

alfredaddwebsearch-wppreview.gif

画像の様な形で入力します。

Search URL あなたのWPブログURL/?p={query}&preview=true URLだけ変更
Title Alfredの検索画面に表示される文言 任意
Keyword このコマンドを呼び出すキーワード 任意
Validation テスト用。横の[Test]ボタンで動作確認できる 任意

その他 Encodeのチェックはあってもなくてもどちらでも良いです。

利用方法

ホットキーでAlfredを開いて、呼び出しキーワードと記事のID(PostID)を入力すれば標準のブラウザで記事のプレビューが開かれます。WordPresの管理画面を開く必要はありません。

showwppreview-by-alfred.gif

なおWordPressの管理画面を開いておく必要はありませんがWordPressにログイン状態である必要はあります。事前にログインしてCookieがあればOKです。これはログイン状態で無いと非公開の記事は管理者以外は見れない為です。

Emacsでのやり方

Emacsのorg2blogから記事を投稿する場合は、変数 org2blog/wp-show-post-in-browser とブラウザ関係の変数を設定すれば可能です。例えばこんな感じで。

<span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">&#25237;&#31295;&#24460;&#12398;&#12502;&#12521;&#12454;&#12470;&#34920;&#31034;&#12434;&#23563;&#12397;&#12427;
</span><span style="color: #DCDCCC;">(</span><span style="color: #F0DFAF; font-weight: bold;">setq</span> <span style="text-decoration: underline;">org2blog/wp-show-post-in-browser</span> 'ask<span style="color: #DCDCCC;">)</span> <span style="color: #5F7F5F;">; </span><span style="color: #7F9F7F;">'show&#12391;&#24120;&#26178;&#12289;nil&#12391;&#28961;&#21177;&#21270;
</span>
<span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">--------------------------------------------------------------------
</span><span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">&#12502;&#12521;&#12454;&#12470;&#38306;&#20418;&#12398;&#35373;&#23450;&#20363;
</span><span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">--------------------------------------------------------------------
</span><span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">&#12487;&#12501;&#12457;&#12523;&#12488;&#12502;&#12521;&#12454;&#12470;&#12434;eww&#12395;&#22806;&#37096;&#12502;&#12521;&#12454;&#12470;&#12434;Firefox&#12395;
</span><span style="color: #DCDCCC;">(</span><span style="color: #F0DFAF; font-weight: bold;">setq</span> browse-url-browser-function 'eww-browse-url
      <span style="text-decoration: underline;">shr-external-browser</span> 'browse-url-firefox<span style="color: #DCDCCC;">)</span>

<span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">Firefox&#12391;&#12394;&#12367;Chrome&#12434;&#20351;&#12358;&#22580;&#21512;
</span><span style="color: #DCDCCC;">(</span><span style="color: #F0DFAF; font-weight: bold;">when</span> <span style="color: #BFEBBF;">(</span>eq system-type 'darwin<span style="color: #BFEBBF;">)</span>          <span style="color: #5F7F5F;">; </span><span style="color: #7F9F7F;">Mac
</span>  <span style="color: #BFEBBF;">(</span><span style="color: #F0DFAF; font-weight: bold;">setq</span> <span style="text-decoration: underline;">browse-url-generic-program</span> <span style="color: #CC9393;">"/usr/bin/open"</span>
        <span style="text-decoration: underline;">browse-url-generic-args</span> '<span style="color: #D0BF8F;">(</span><span style="color: #CC9393;">"-a"</span> <span style="color: #CC9393;">"/Applications/Google Chrome.app"</span><span style="color: #D0BF8F;">)</span><span style="color: #BFEBBF;">)</span><span style="color: #DCDCCC;">)</span>
<span style="color: #DCDCCC;">(</span><span style="color: #F0DFAF; font-weight: bold;">setq</span> browse-url-browser-function 'eww-browse-url
      shr-external-browser 'browse-url-generic<span style="color: #DCDCCC;">)</span>

<span style="color: #5F7F5F;">;; </span><span style="color: #7F9F7F;">eww&#12391;&#34920;&#31034;&#20013;&#12398;&#12506;&#12540;&#12472;&#12434;f&#12434;&#25276;&#12377;&#12392;&#22806;&#37096;&#12502;&#12521;&#12454;&#12470;&#12391;&#34920;&#31034;
</span><span style="color: #DCDCCC; text-decoration: underline;">(</span><span style="color: #F0DFAF; font-weight: bold;">bind-keys</span> <span style="color: #DCDCCC; font-weight: bold;">:map</span> <span style="text-decoration: underline;">eww-mode-map</span>
           <span style="color: #BFEBBF;">(</span><span style="color: #CC9393;">"f"</span> . eww-browse-with-external-browser<span style="color: #BFEBBF;">)</span><span style="color: #DCDCCC;">)</span>

ewwやw3mを使わず直接外部ブラウザにしたり色々変更可能です。ただ僕は毎回プレビューが表示されたりプレビューの確認が出るのは面倒なので通常は確認なしで運用しています。

その他

iTermからコマンドラインを使う方法などもありますね。