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

先日、ローカルの開発環境で使えるダミー画像生成スクリプトがあるのを知りました。

試しに使用してみたら、思った以上に使い勝手がよく、Wordpress関連の開発がはかどる感じだったので紹介です。

テーマのローカル開発などで面倒なところ

僕は、Wordpressのテーマ作成は、当然ローカル環境で行っています。

Instant WordPressで超簡単にワードプレスローカル環境を構築する方法

当記事はInstant Wordpress v4.3.1時点のものです。僕が確認した時点のv5.3以降では、インターフェースが新...

nelog.jp

2017-11-14 16:01

ローカル環境での開発で、ちょっと面倒くさいと思うことの一つが、画像を配置したページのレイアウトを見るために、その大きさの画像を用意することだったりします。

1つの画像を作成する時間にしたら、1分もかかりません。けれど、いろいろな大きさの画像を配置したレイアウトを試したいときに、様々な大きさを用意するというのは、結構面倒だったりします。

で先日、JavaScriptでダミー画像を簡単に作成してくれるHolder.jsというスクリプトの存在を知りました。

これを使ってみたら、とても簡単に使える上に、ちょっとしたコードで様々な色や大きさの画像が利用でき、これまで画像の作成に要していた時間を短縮できるようになりました。

Holder.jsとは

Holder.jsとは、スクリプトをヘッダーで読み込んで、あとはIMGタグで少量のコードを書けば、簡単にダミー画像を作成できるスクリプトです。

例えば、こんな感じのサムネイルなどが簡単に作れます。

その上、かなり綺麗なダミー画像が作成されるので、作成中のものの景観を損ねることもまずないと思います。

ちょっとしたコードを付け加えるだけで、簡単に色や大きさ、フォント、表示されているテキストも変更することができます。

個人的には、ランダム機能がとても便利で、以下のような感じでテスト動作中にいろいろな配色との組み合わせを試しながら動作確認することができます。

Holder.jsをWordpressで利用する方法

以下ではHolder.jsをWordpressで利用する方法を紹介します。

利用手順は簡単で次の3手順です。

Holder.jsのダウンロード
Holder.jsをヘッダーで読み込む
表示したい部分にIMGタグを挿入

Holder.jsのダウンロード

まずは、Holder.jsからスクリプトファイルをダウンロードします。

ダウンロードしたものを解凍して、中にある「holder.js」ファイルをテーマディレクトリ直下にコピペします。（子テーマで利用したい場合は、子テーマディレクトリ直下に置いてください。）

※「holder.js」ファイルの置き場所は、どこにおいても（WEB上でも）良いのですが、説明の単純化のため、ディレクトリ直下で説明します。

Holder.jsをヘッダーで読み込む

WordPressで利用する場合は、「holder.js」ファイルをheader.phpなどにある<head></head>間から呼び出します。

テーマファイル自体の開発に利用する場合は、以下のように書きます。

<script src="<?php echo get_template_directory_uri(); ?>/holder.js"></script>

子テーマでのカスタマイズで利用するには、以下のように書きます。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/holder.js"></script>

表示したい部分にIMGタグを挿入

あとは、ダミー画像を表示させたい部分に以下のようなイメージタグを記入すると表示されます。

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

以下のように書いてもOKです。

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

「holder.js」ファイルへのフルパスは書く必要がありません。

以下のようにいろいろなオプションを指定してスクリプトを呼び出すこともできます。

<img src="holder.js/150x150/random/font:Droid Sans/text:Dummy" />

これは、大きさ等フォント、表示テキストを指定して、色のランダム表示をしています。

もちろん、Wordpressの投稿で、以下のように記述してポストしてもちゃんと表示されます。

<img src="holder.js/680x480/random" />

<img src="holder.js/680x150/random" />

<img src="holder.js/100x200/random" />

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

その他のオプション

Holder.jsスクリプトにはいろいろなオプションがあり、このような感じで、いろいろなダミー画像を呼び出すことができます。

これらオプションの呼び出し方法は以下のような感じです。これらは、ダウンロードしたファイルの中にある「test/index.html」というデモページのソースに書かれています。

<div class="thumb">
    <img data-src="holder.js/300x200">
    <div class="caption">
         Plain placeholder
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/social">
    <div class="caption">
         Themed placeholder
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/random/font:Droid Sans/text:Droid Sans">
    <div class="caption">
        Placeholder with random theme
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/text:заполнитель">
    <div class="caption">
         Placeholder with text
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/#EE403D:#FFFFFF/text:Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
    <div class="caption">
         Placeholder with lengthy text
    </div>
</div>
<div class="thumb">
    <img data-src="holder.canvas/300x200/#EE403D:#FFFFFF/text:Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
    <div class="caption">
        Canvas placeholder with lengthy text
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/social/text:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor, libero quis accumsan fringilla, augue est laoreet orci, consectetur euismod augue nisl sit amet arcu. Fusce ultrices ornare metus in porta. Aenean ac nisl ut tellus dignissim auctor quis id arcu. Vivamus lorem neque, pulvinar non dictum vel, sagittis lobortis odio.">
    <div class="caption">
         Placeholder with very lengthy text
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/social/text:Lorem ipsum   \n   dolor sit amet, consectetur adipiscing elit.">
    <div class="caption">
         Placeholder with custom newline
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/randomrandom/hello:world/$$$$/%25%25%67/industrial/text:заполнитель">
    <div class="caption">
         Placeholder with text and bad flags
    </div>
</div>
<div class="thumb">
    <script>
    var r = Math.random();
    if(r > 0.5){
    document.write('<img data-src="holder.js/200x150" src="missing.jpg" style="width:200px;height:150px;outline:solid 3px red">');
    }
    else{
    document.write('<img data-src="holder.js/200x150" src="image.jpg" style="width:200px;height:150px;outline:solid 3px green">');
    }
    </script>
    <div class="caption">
        Placeholder with (randomly) missing image source
    </div>
</div>
<div class="thumb">
    <div class="autosize">
        <img data-src="holder.js/200x133/#111:#ffff00/auto">
    </div>
    <div class="caption">
         Auto-sized placeholder
    </div>
</div>
<div class="thumb">
    <div class="autosize">
        <img data-src="holder.js/200x133/#111:#ffff00/auto/textmode:exact">
    </div>
    <div class="caption">
         Auto-sized placeholder in exact mode
    </div>
</div>
<div class="thumb">
    <div class="holderjs" id="holder1"></div>
    <div class="caption">
        <code>&lt;div&gt;</code> with background placeholder
    </div>
</div>
<div class="thumb">
    <div class="holderjs" style="width:300px;height:200px" data-background-src="?holder.js/300x200/#ff8362:#5e422e"></div>
    <div class="caption">
        <code>&lt;div&gt;</code> with <code>data-background-src</code> placeholder
    </div>
</div>

<div class="thumb">
    <div id="thumb1">
    </div>
    <div class="caption">
         Placeholder added through Holder API
    </div>
</div>
<div class="thumb">
    <img data-src="custom.holder/150x100/custom/auto" style="width:300px;height:200px">
    <div class="caption">
        Auto-sized <code>canvas</code> placeholder with custom domain and theme
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200/font:Pacifico/#4466ff:#fff/text:Pacifico">
    <div class="caption">
         Placeholder using <span style="font-family:Pacifico">Pacifico</span> font</span>
    </div>
</div>
<div class="thumb">
    <object data="holder.js/300x200/font:Pacifico/#4466ff:#fff/text:Pacifico"></object>
    <div class="caption">
        <code>object</code> placeholder using <span style="font-family:Pacifico">Pacifico</span> font</span>
    </div>
</div>
<div class="thumb">
    <div style="overflow:hidden">
    <img data-src="holder.js/50x75/sky" style="float:left">
    <img data-src="holder.js/100x75/vine" style="float:left">
    <img data-src="holder.js/150x75/lava" style="float:left">
    </div>
    <div style="overflow:hidden">
    <img data-src="holder.js/300x125/industrial" style="float:left">
    </div>
<div class="caption">
         Placeholders demonstrating adaptive text size
    </div>
</div>
<div class="thumb">
    <div style="height:200px">
<img data-src="holder.js/100%25x50%25/sky">
<img data-src="holder.js/100%25x50%25/lava">
</div>
<div class="caption">Two fluid placeholders in one parent using URI encoding</div>
</div>
<div class="thumb">
    <img data-src="holder.js/80%x50%/vine">
    <div class="caption">
         Fluid placeholder
    </div>
</div>
<div class="fullpage thumb">
    <img data-src="holder.js/90%x80%/sky">
    <div class="caption">
         Full-page fluid placeholder
    </div>
</div>
<div class="fullpage thumb">
    <object data-src="holder.js/90%x80%/vine"></object>
    <div class="caption">
         Full-page fluid <code>object</code> placeholder
    </div>
</div>
<div class="fullpage thumb">
    <img data-src="holder.js/90%x80%/lava/textmode:literal">
    <div class="caption">
         Full-page fluid placeholder in literal mode
    </div>
</div>
<div class="thumb">
    <img data-src="holder.js/300x200">
    <div class="caption">
         Plain placeholder to ensure themes aren't leaked forward
    </div>
</div>

色指定、オートサイズ指定、画像サイズの％指定などもでき、合成のダミー画像まで作ることができます。

まとめ

と、こんな感じで簡単に利用できます。

テーマ作成時などにわざわざ画像編集ソフトを立ち上げる回数が大幅に減るので、作業の効率化が図れるのではないかと思います。

おまけ

もし、「パブリックに公開時にスクリプトの呼び出しを消すのが面倒くさい」、「パブリックでは表示されずローカルのテスト環境のみで利用したい」なんてこともあると思います。

そういった場合は、functions.phpに以下のように書いて、

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

header.php内にある<head></head>タグ間の呼び出しで以下のように書くといいかもしれません。

<?php if ( is_local_test() ): ?>
<script src="<?php echo get_template_directory_uri(); ?>/holder.js"></script>
<?php endif; ?>