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

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

mannequin

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

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

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

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

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

Instant Wordpressで超簡単にワードプレスローカル環境を構築する方法
今回は、Windowsに、これ以上無いくらいに簡単にWordpressローカル環境を構築する方法の紹介です。 僕は2台のWindows...

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

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

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

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

Holder.jsとは

Holder.js - client side image placeholders

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

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

ダミー画像(ソーシャル)

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

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

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

ダミー画像(ランダム)

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

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

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

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

Holder.jsのダウンロード

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

スクリプトファイルのダウンロード

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

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

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

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

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

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

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

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

プレーンなダミー画像

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

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

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

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

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

テスト投稿

その他のオプション

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

Holder Testing

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

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

まとめ

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

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

おまけ

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

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

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