ローカルテスト環境でダミー画像の利用方法

Simplicity1.3.7からローカル環境でテストする時にダミー画像が利用できるようになりました。

今回は、その使い方と利用例などを説明したいと思います。

スポンサーリンク

ダミー画像の利用

Simplicityでは、ローカル環境の時のみHolder.jsというダミー画像スクリプトが動作するようになっています。

ダミー画像を最も手軽に利用するには、以下のように書きます。

<img src="holder.js/300x200" />

すると、以下のように表示されます。

シンプルなダミー画像

色のランダム指定などもすることができます。

<img src="holder.js/680x480/random" />
 
<img src="holder.js/680x150/random" />
 
<img src="holder.js/100x200/random" />
 
<img src="holder.js/300x200/random" />

こんな感じに表示されます。

色のランダム指定

その他に、キャプションを変更したり、文字のフォントを変更したり、背景色を指定したりいろいろなことができます。

詳しくは、以下の記事を参照してください。

参考 ローカルでのWordpress開発がはかどるったらもう、ダミー画像生成スクリプト「Holder.js」の使い方

利用例

今回は、広告ウィジェットでダミーに画像を表示して、広告を表示している体にしてテストするための方法を紹介します。

テキストウィジェットを広告ウィジェットにドラッグ&ドロップで放り込みます。

広告336

あとは、以下のように入力すると、広告表示した体でテストできます。

広告336×280

<img src="holder.js/336x280/random">

ダミー画像広告

その他の広告ウィジェット用のタグは以下。

広告300×250

モバイル広告や、サイドバーで表示される「レクタングル(中)」広告サイズ。

<img src="holder.js/300x250/random">

広告728×90

インデックスリストなどで表示される「ビッグバナー」広告サイズ。

<img src="holder.js/728x90/random">

広告320×100

モバイルでのインデックスリストで表示される「ラージモバイルバナー」広告サイズ。

<img src="holder.js/320x100/random" />

テキストウィジェット内にこのように書くことで、テスト用の画像を用意せずとも、手軽にテストが行えます。

まとめ

広告ウィジェット以外で、ダミー画像が、Simplicityで効果を発揮すると想定されるところは、以下のようなものが考えられます。

  • テーマのカスタマイズ時にサムネイル画像を生成する
  • ウィジェットの中に入れるものの大きさをダミー画像でテスト表示する
  • 記事投稿でテスト的にダミー画像を表示させてみる

使い方次第では、結構便利な機能なので、よろしかったら使ってみてください。

※ローカルのみで利用できるものなので、サーバー上では表示されません。

注意点

ローカル環境は、Instant WordPressBitnami for XAMPPの使用を想定して、以下のような関数で判定しています。

//ローカルのテスト環境かどうか
function is_local_test(){
  $host = $_SERVER['SERVER_NAME'];
  if ( $host == 'localhost' || $host == '127.0.0.1' ) {
    return true;
  }
}

ですので、ドメイン部分が「localhost」か「127.0.0.1」ではない場合は、ローカル環境と判定されません。

それ以外の場合は、「lib/utility.php」の関数を変更する必要があります。

GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

スポンサーリンク
アドセンス(大)
アドセンス(大)

フォローする

スポンサーリンク
アドセンス(大)