WordPressのNO-IMAGEをランダム表示!フリー素材もあるよ!

みなさん、ワードプレスのアイキャッチ画像やサムネイル画像ってどうしてますか?

写真ACぱくたその画像をそのまま使う?少しだけ加工して使う?

面倒だから使ってない方もいるかもしれませんが、見栄え的にも画像はあった方がいいですよね。

でも、こんな記事を書く時って、画像を選ぶのに困りませんか?

  1. 画像をあまり使わないワードプレスのカスタマイズ記事
  2. ちょっと難しい内容のテキスト中心の記事

そして結局、本文と関係ない画像を無理やり選んだりするんですよね…

NO-IMAGE画像をカッコよくしよう!

そんなストレスとバイバイできるのが今回の記事。

当初は「かっこいいNO-IMAGE画像を作ろう!」という内容になる予定だったんですが、ちょっと面白そうな記事を見つけて。

Stinger5でno-imageサムネイル画像を美しい写真に変更してランダム表示させる方法

内容を簡単に説明すると、こんな感じ。

  1. 数点画像を用意してね
  2. サムネイルをランダムで表示させるカスタマイズをしたよ

おぉ!なかなか面白そう!しかも、非常にシンプル(←失礼)なカスタマイズなので、簡単に導入できるぞ!

というわけで、今回の記事は最終的にこんな内容になりました。

  1. かっこいいNO-IMAGE画像を作ろう
  2. そして、それを配布しよう
  3. コピペでカスタマイズできるコードも公開しよう

NO-IMAGE画像のダウンロード

今回用意した画像は全部で20点。

  1. 猫の画像×5
  2. 可愛い巨乳の女の子の画像×5
  3. 子供の画像×5
  4. 文字だけの画像×5

これらの画像がランダムで表示されます。ちなみに正方形です。

lady

他の画像と一緒にダウンロード→【正方形サムネイル画像のダウンロードはこちらから】

横長の長方形のサムネイルのダウンロードはこちら

あ、そうそう、横長のサムネイルにしている方はこちらから横長の画像をダウンロードできますよ!

【横長サムネイル画像のダウンロードはこちらから】

ダウンロードした画像をアップロードする

ダウンロードした画像は、FTPソフトか、サーバーのWEBアップロード機能でアップロードします。

アップする場所は、テーマの中にあるimagesフォルダの中です。

「wp-content→themes→使ってるテーマ→images」の中に先ほどの解凍後のフォルダをアップします。

※zipファイルのままアップせずに、解凍してからアップしてくださいね!

自動でランダム表示させるカスタマイズ

こちらのカスタマイズは先ほどのブログを参考にさせていただきました。

カスタマイズする箇所は3箇所。カッコ内はStingerシリーズのファイル名。

  1. トップページのphp(single.php)
  2. 関連記事のphp(kanren.php)
  3. 新着記事のphp(newpost.php)

※前の記事(次の記事)や人気記事にもサムネイルを表示させている場合は、そちらも修正する必要があります。

※まずはオフライン環境でお試しください。

この3つのphpファイルの中に、共通して入っているであろうコードがこちら。

<img src="<?php echo get_template_directory_uri(); ?>/images/no-img/no-img.png" alt="no image" title="no image" width="100" height="100" />

no-image画像を呼び出すコードです。

Stingerシリーズでは条件分岐をしているので、こんな感じになっているはずです。

    <dt> <a href="<?php the_permalink() ?>" >
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img/no-img.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>

「サムネイルがあればそれを使って、なければno-imageを使ってね」という条件です。

dtタグでサムネイルが囲まれていますが、メインはアンカータグで囲まれてる部分ですね。

今回のカスタマイズで変更する箇所は一つだけ。

no-img.png

このコードを、下記のコードに変更します。

no-img<?php echo(rand(1,20)); ?>.png

1〜20までランダムで表示させるコードです。

つまり、今までは「no-img.png」だけ呼び出すだけでしたが、カスタマイズ後は「no-img4.png」を呼び出すこともあれば「no-img16.png」を呼び出すこともあるということです。

 

↓お使いのテーマでそのままコピペできるかわかりませんが、修正後のコードがこちら。

<img src="<?php echo get_template_directory_uri(); ?>/images/no-img150_150/no-img<?php echo(rand(1,20)); ?>.png" alt="no image" title="no image" width="100" height="100" />

↓Stinger5をお使いの方はコピペでOKです。該当するコードと入れ替えてください。

    <dt> <a href="<?php the_permalink() ?>" >
      <?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
      <?php the_post_thumbnail( 'thumb150' ); ?>
      <?php else: // サムネイルを持っていないときの処理 ?>
      <img src="<?php echo get_template_directory_uri(); ?>/images/no-img150_150/no-img<?php echo(rand(1,20)); ?>.png" alt="no image" title="no image" width="100" height="100" />
      <?php endif; ?>
      </a> </dt>

※長方形のサムネイルを使う場合は「no-img150_150」の箇所を「no-img150_113」に変更してください。

※主に修正する必要があるファイルは3つですのでお忘れなく!

まとめ

いかがでしたか?

「あ!サムネイル忘れた!」とか「面倒だから適当なサムネイルアップしとこう」なんて思ったことはありませんでしたか?

そんな時も、このカスタマイズをしていれば問題なし!しかも、ランダムで表示されるのでお楽しみ要素もあります。

もちろん、オリジナル要素を加えるのもOK!

  • 猫がメインのサイト→猫の画像をランダム表示
  • ガジェットメインのサイト→パソコンやスマホの画像をランダム表示

季節毎に画像を変えるのもいいですね!

  • 夏→海や花火の画像をランダム表示
  • 冬→雪やスノボの画像をランダム表示

1〜20の画像が入ったフォルダ、21〜40の画像が入ったフォルダ…とたくさんのフォルダを用意すれば楽かもしれません。

まだ試してないですが、時間の関数を使って季節ごとの画像を表示するなんてこともできそうですね。

ぜひ僕が作った最高の画像をサムネイルでランダム表示してみてください!

サムネイルのランダム表示をリロードして確かめてみる

  1. 正方形サムネイル画像のダウンロード
  2. 横長サムネイル画像のダウンロード

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!