WordPressローカル環境でレスポンシブテストツールをテーマに組み込む方法

ウェブサイトのレスポンシブデザインをチェックするサイトとしてResponsive Design Testingというテストツールがあります。

このツールは、Matt Kersleyさんというデザイナー兼開発者が作成したツールで、様々なデバイスの大きさのレスポンシブ具合を一覧で見ることができるテストツールです。

で、最近このツールは、WEB上で使うだけでなくローカル環境でも利用できることを知りました。

そこで、「Wordpressテーマ内に簡単にレスポンシブチェックできる機能をつけたら便利なのではないかな?」と思ったので試しに実装してみました。

そしたら、結構使い勝手がよかったので、その方法の紹介です。

スポンサーリンク
レクタングル(大)広告

主な手順

Responsive Design Testing

まずは、主な4つの手順を紹介します。

  1. レスポンシブテストツールのダウンロードとリネーム
  2. ローカル環境判別関数の作成
  3. テストツールをカスタマイズ
  4. テスト用リンクの設置

順番通りに行えば、特に難しいことはないと思います。

僕が利用しているローカル環境は以下です。

Windows上にサクサクっとローカルWordpress開発環境を作る方法
Wordpressのテーマなどをカスタマイズするときは、ローカルで編集して、FTPでアップロードするのが望ましいです。 というのも、W...

テストツールのダウンロードとリネーム

まずは、レスポンシブテストツールをダウンロードします。

ダウンロードは、mattkersley/Responsive-Design-Testingの「Download ZIP」から行えます。

レスポンシブデザインテストツールのダウンロード

ダウンロードしたzipファイルの中から以下のファイルを取り出します。

  • index.html
  • responsive.js

今回利用するのは、この2つのファイルのみです。

この2つのファイルのうち、index.htmlファイルを「responsive-test.php」とリネームして「responsive.js」ファイルとともに、テーマ(子テーマ)ディレクトリ直下にコピーしてください。

こんな感じなります。

テストツールリネームあと

テストファイルの置き場所は、パスさえちゃんと設定すれば、どこでも良いですが、今回は説明の単純化のためテーマディレクトリ直下で説明します。

ローカル環境判別関数の作成

次にローカルのテスト環境であるかを判別する関数を作成します。

まずは、テーマ(子テーマ)ディレクトリ直下に「utility.php」というファイルを作成してください。ファイル名は、何でも良いのですが今回は「utility.php」とします。

utility.phpファイルをエディターなどで開いて、以下を貼り付けてください。

これは、ホスト名を判別して、ローカル環境かどうかを判断する関数です。自前でホスト名などを設定している場合は、if部分に条件を追加してください。

あとは、Wordpress上でこの関数を呼び出せるように、functions.phpの先頭あたりに以下のコードを追加してください。

テストツールをカスタマイズ

次に、テストツールをカスタマイズします。

Responsive Design Testingというウェブサイトがあるのに、ローカルに同様のテスト環境を築く利点として、テストツールを自由にカスタマイズしてし使えるという利点があります。

カスタマイズするのは先程リネームした「responsive-test.php」というファイルです。

このファイルをエディターなどで開いて、中身を以下のものに入れ替えてください。

カスタマイズした部分をかいつまんで説明すると、まず先程のローカル環境判別関数を呼び出しています。

その関数を利用して、ローカル環境以外では、ツールが起動しないようにしています。

一応、パブリックで利用しても特に問題のあるコードは使われてはいないと思っているのですが、一応念のためローカルだけの使用にしています。

で、こんな感じで、1280幅の表示を確認できるエリアを追加しています。

ローカルでこのツールを使う利点は、こういった感じで自由な幅のレスポンシブチェックを設定できることにあります。1280ピクセル幅のチェック

このように、自分がチェックしたい端末幅のテストエリアを自由に追加することができます。

テスト用リンクの設置

あとは、フッターのクレジット表記部分の下あたりに以下のように書き込みます。(テストしやすい場所ならどこでも良い)

子テーマからだとget_template_directory_uri()部分をget_stylesheet_directory_uri()に変更してください。

すると、ローカル環境からサイトにアクセスするとフッターに以下のようにリンクが表示されます。

フッターにリンクが表示

これをクリックすると、好きなページから自由にレスポンシブ表示をチェックすることができます。

このリンクは、パブリックに公開した時は、表示されないようになっています。

動作確認

試しに、サイトトップページで「レスポンシブテスト」リンクをクリックすると以下のように表示されます。サイトトップのレスポンシブチェック

画像の色が違っているのは、ダミー画像生成スクリプトをランダム表示にしているからです。

投稿ページなどでは、以下のようにチェック結果が表示されます。

投稿ページレスポンシブチェック

表示切替アドオン

端末がモバイルとパソコンで表示を切り替えている場合は、以下のようなアドオンを使用して。見る必要があります。

Ultimate User Agent Switcher:Chrome拡張

User Agent Switcher:Firefoxアドオン

完全なレスポンシブサイトの場合は不要です。

まとめ

こんな感じで、ローカル環境だけのレスポンシブテスト環境を作成することができます。

「このページテストしたいな」と思ったときに、「テストサイトを開く→URLを入力→送信」という手間がなく、リンクをクリックするだけで表示状態を確認することができます。

また、Responsive Design Testingは、ちょっとしたカスタマイズも出来るので、自分に合ったテスト環境も作ることができます。

このようにすることで、テーマなどのこまめなレスポンシブチェックが簡単にできるようになり、スタイルの不具合発生率も下げられるかもしれません。