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

アイキャッチ画像を設定するのが面倒くさい

今回もWordPressの人気テーマであるStinger5のお話です。
Stinger5でなくとも、WordPressで記事を書いている時に、アイキャッチ（サムネイル）画像を設定するのを忘れてしまうことがあるかと思います。または、記事の内容にぴったりなアイキャッチ画像が存在しない場合や、設定するのが面倒なことはあるでしょう。

たとえば、このsaketorock’s blogでもStingerのカスタマイズ記事をエントリーすることがあるのですが、内容がPHPの話しであったりするとちょうど良いアイキャッチが思い浮かばなかったりします。こんなとき、アイキャッチ画像を探して設定するのは結構手間だったりするものです。画像1つ選ぶのに気がついたら10分かかっていた…なんてこともまれにあります。

アイキャッチ画像自動設定プラグイン「Auto Post Thumbnail」では満足できない

アイキャッチ画像の設定が面倒ならば、記事内の画像から自動的に選んでくれる便利なプラグイン「Auto Post Thumbnail」があるじゃないか！という方もいらっしゃると思います。たしかにそのとおりなのですが、PHPのカスタマイズ記事だったり、Macの操作手順を解説するような記事の場合、記事内の画像もオシャレな画像ではなく、アイキャッチにはふさわしくないものばかりになりがちです。「Auto Post Thumbnail」を導入するという選択肢は私の中ではありませんでした。

アイキャッチ画像をランダム表示させたい

まず、Stinger5のデフォルト設定では、アイキャッチ画像を未設定のままにしておくと「no-img.png」という画像が表示されます。

このサムネイル、どこか無機質であり、書き手の「やる気の無さ」を暗示している気がしてなりません。また、ひとつぐらい表示されているぐらいならば百歩譲って問題ないとも思えるのですが、アイキャッチ未設定記事がずらりと並ぶと、ブログのイメージを悪くしてしまう気がしてなりません。たとえばこんな感じ…。

そこで、事前に美しい画像を数枚用意しておき、アイキャッチ画像が未設定記事の場合、それら美的感覚にすぐれた画像をランダムに表示させることを考えてみました。

手順1：綺麗な画像を数点用意する

まずskyseekerさんやぱくたそさんなどの著作権フリーの画像がダウンロードできるサイトへ飛び、お好みの画像を選んでおきます。私の場合、花や空、海などの画像を5点ほど選んでみました。

ダウンロードしたら、使用しているテーマのimageフォルダに写真を保存します。具体的な保存場所は、「wp-content/themes/stinger5ver2014****/images」です。
****の部分は、Stingerのバージョン（数字四桁が入力されているはずです）

この時、ファイル形式はすべて同じものにしておいたほうが後の作業がラクになります。私は画像のファイル形式をすべて「.png」にしておきました。もし、jpg画像をpngにしたい、またはその逆でpngをjpgに変換したいならば、photoshopなどの写真レタッチ系ソフトを使用すれば良いのですが、お持ちでない場合は画像のファイル形式を変換してくれるサイトがありますので、そちらを利用すればよろしいかと思います。なお、gif形式は写真に適していませんので、jpgかpngが理想だと思います。

bannerkoubou.com

mojimaru.com

henkan-muryo.com

ダウンロードした画像は、「no-img1.png」、「no-img2.png」、「no-img3.png」…という名前をおくとよいでしょう。

手順2：Stinger5のソースをカスタマイズする

次に、アイキャッチ画像を読み込んでいるソースをカスタマイズします。カスタマイズすべきファイルは、Stinger5の場合「wp-content/themes/stinger5ver2014****」フォルダ内にある次の
3つになります。ちなみに、フォルダ名の「****」の部分は、Stingerのバージョンによって違う4桁の数字が入っています。

1. itiran.php
2. kanren.php
3. newpost.php

itiran.phpの変更

itiran.phpの8行目がカスタマイズすべき該当箇所です。

上記は、サムネイル画像を持っていない記事を読み込む場合、「wp-content/themes/stinger5ver2014****/images」フォルダ内に保存している「no-img.png」を読み込んで表示せよ…という意味のコードが書かれています。上記コードを次のように変更します。

phpのrand関数を使用しました。

no-img.png

の部分ですね。デフォルトであれば「no-img.png」を読み込む設定になっていますが、手順1で準備しておいた画像5点（「no-img1.png」、「no-img2.png」、「no-img3.png」、「no-img4.png」、「no-img5.png」）を、ランダムに読み込むという設定へ変更しただけです。

画像を3枚だけ用意する場合は、「no-img1.png」、「no-img2.png」、「no-img3.png」のファイルをランダム表示すれば良いわけですから、その際は

no-img.png

の（1,5）部分を（1,3）としてあげればOKです。

なお、写真をpng形式ではなく、jpg形式にしたい場合は、

no-img.png

を

no-img.jpg

に変更してください。

下記ファイルにも上記と同じ変更を行えば作業終了です。

1. 「kanren.php」→24行目に該当箇所があります
2. 「newpost.php」→15行目に該当箇所があります

まとめ

長い間運営してきたブログでも、この技は使えます。
記事内の画像を自動的にアイキャッチ画像にしてくれるプラグイン「Auto Post Thumbnail」を使用した場合、意図しない画像がアイキャッチ化されるので、こちらのほうがスマートだと思いました。

ちなみに、このエントリー記事はアイキャッチを設定していません。このブログ内の同記事検索結果をご覧いただき更新ボタンを押してみてください。アイコンがランダムに変更表示されるのがわかるかと思います。

追記

2016年8月現在、本ブログサイトでは「STINGER PLUS+」を導入しています。
「STINGER PLUS+」での同様の対応方法は、以下ファイルの記述をここで紹介した内容を反映すればOKです。

• itiran-thumbnail-on.php
• kanren-thumbnail-on.php
• newpost-thumbnail-on.php