MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

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

      2016/04/17

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

写真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

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

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

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

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

NO-IMAGE画像はファンクションやプラグインでリサイズできないので、リサイズ済みの画像をアップする必要があります!

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

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

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

例)Stingerシリーズの場合

「wp-content→themes→stinger〇ver〇〇〇〇→images」の中に先ほどの解凍後のフォルダをアップします。

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

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

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

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

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

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

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

 

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

まとめ

いかがでしたか?

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

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

 

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

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

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

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

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

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

 

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

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

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

 - WordPress・カスタマイズ