テーマ制作時の「F5連打」から解放されるWordPressの自動リロードプラグインつくってみたよ

[2014.1.3追記]
公式プラグインディレクトリにて公開して半年ほど放置していたのですが、このたび多言語化を施し、正式リリースとしました。日本語の言語ファイルも同梱しています。

WordPress › Reloadr for WordPress « WordPress Plugins


インブラウザデザインでサイトを構築する場面で、HTMLやCSSのファイルが更新されるとすかさずブラウザが自動リロードしてくれる『LiveReload』を活用して作業効率を上げている方も多いかと思います。このブログでも先日、「Windows 7 64bit 上にLiveReload環境を作ってみたよ(ココロ折れそうになりながら)」というエントリーで環境構築までの道のりをつらつらと書きました。

なかなか便利なLiveReload環境ではあるのですが、実はちょっと困ったことが起きました。

  • 前述のエントリーにも書いたけど、やはりウチのマシンでは動作が不安定。
  • どうやら *.php が自動更新の対象にならないっぽい(関連記事↓)。

LiveReload is great, but it has its limitations. It currently only works with client-side web projects (i.e. HTML, CSS, JavaScript, etc.). If you do your development on a local web server with PHP, you’re out of luck with LiveReload.

Reloadr: a LiveReload alternative for PHP

テンプレートファイルをトライ&エラーで作り上げていけるのが、WordPressのテーマ制作における長所。それだけに *.php が自動監視の対象にならないのはちょっと痛いので、上記の関連記事で知った『Reloadr』を導入してみることにしました。

『Reloadr』は、アメリカ・ミシガン州に住むDaniel BergeyさんがGitHubにて公開しているPHPファイル(reloadr.php)+JavaScriptファイル(reloadr.js)のライブラリ。マニュアルに沿って header.php あたりにべた書きしてもよかったのですが、今後の使い回しを考えてプラグイン化しました。Danielさんありがとう!

Reloadr-for-WordPress (GitHub)

[2013.6.13追記]
WordPressの公式プラグインディレクトリに登録できました(http://wordpress.org/plugins/reloadr-for-wp/)。以降のアップデートはそちらで行なっていきます。


プラグインの使い方は次のとおりです。ご利用は計画的に。

 

  • ZIPファイルをダウンロードして展開します。
  • お使いのWordPress環境(プラグインディレクトリ)にアップロード。
  • 管理パネルにて有効化ののち、[設定]-「Reloadr」にて監視対象のファイルを設定します。

 

 

    1. 管理パネルの[プラグイン]-[新規追加]にて『reloadr for wordpress』を検索、インストール。
    2. 有効化ののち、[設定]-「Reloadr」にて監視対象のファイルを設定します。

 

設定画面での設定項目は2つあります。

reloadr

  • Client-side Assets
    監視対象にしたいCSSファイルやJavaScriptファイルのファイル名を記述します。
    たとえばテーマディレクトリ「foo」があり、その中の css/bar.css を監視するには /css/bar.css と記述します。
    デフォルト値は /style.css です。
  • Server-side Assets
    監視対象にしたいPHPファイルのファイル名を記述。「Client-side Assets」と違い、ワイルドカードを使うことができます。
    デフォルト値は /*.php です(=テーマディレクトリ内最上位階層のテンプレートファイルすべてを監視)。

設定が終わったら、フロントページやアーカイブページなど制作中のページを一度リロードします。以降、「Client-side Assets」「Server-side Assets」で設定したファイルが2秒おきにチェックされ、変更があった場合は自動でリロードしてくれるようになります。

念のため補足しますと、「テーマ制作をサポートする」プラグインなのでサイト公開時には無効化したほうがよろしいかと思います。ページの誤動作を防ぐ意味もありますが、『Reloadr』の仕様上HTMLソースに *.php へのフルパスが記述されてしまうからです。

(photo by Morten Siebuhr)

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください