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×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 WordPressやBitnami 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」の関数を変更する必要があります。