青菜に塩ブログ

育児/買い物/サイト構築 つれづれ

サイト構築

[STINGER7]アイキャッチ画像を設定しなかったときの「NO IMAGE」をランダム画像に

2016/04/10

アイキャッチ画像を毎回選ぶのが手間、だけど「NO IMAGE」画像やサムネイル表示無しも彩りが足りない。そう思いカスタマイズしました。カスタマイズのメイン部分はこちらの記事を参考にしています。

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

とても詳しく解説されているので、併せて読んでいただくとスムーズだと思います。以下では補足的にSTINGER7でのカスタマイズ方法を紹介します。

手順1:画像を数点用意しアップロード

ランダム表示させたい画像を数点用意します。(以下は10点用意した場合)
それぞれの画像に「no-img1.png」「no-img2.png」…「no-img10.png」とファイル名をつけます。

それをSTINGER7のimagesフォルダにアップロードします。
フォルダ位置は「/wp-content/themes/stinger7/images」です。

手順2:PHPファイルの書き換え

STINGER7では以下の4つのファイルを書き換えます。

  • itiran-thumbnail-on.php
  • kanren-thumbnai-on.php
  • newpost-thumbnail-on.php
  • popular-thumbnail-on.php (おすすめ記事一覧を表示する場合)

それぞれのファイルの赤字箇所

<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />

↓このように書き換えます。

<?php else: // サムネイルを持っていないときの処理 ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/no-img<?php echo(rand(1,10)); ?>.png" alt="no image" title="no image" width="100" height="100" />

このときrand関数の中の数字は、手順1で準備したファイ名と対応させてください。上記の例は「no-img1.png」「no-img2.png」…「no-img10.png」と10点使用する場合ですが、「no-img1.png」「no-img2.png」「no-img3.png」と3点使用する場合はrand(1,3)とします。

これでサイトを読み込むたびにサムネイル画像が変わります。「NO IMAGE」画像よりはサイトが華やかになりますが、読み込むたびに画像が変わるので少々落ち着かないかもしれません。

ss160302

補足

私はランダム画像はすべて縦横150pxにしました。はじめは適当な画像サイズにしていましたが、それでは読み込むたびに時間がかかってしまったので最終的に縦横150pxでファイルサイズも100KB以下の小さなものにしています。
画像をいただいたのはこちらのサイトです。

写真素材ルーム 【無料・リンク不要・商用サイトOK!】

画像の加工(画像にエフェクトをかけ正方形に切り出し)にはPicasa3を、一括リサイズ(□150px化)・ファイル形式変更(jpg→png)にはIrfanViewを使用しています。

こんな回りくどいやり方をしなくてもできるソフトがあるのかもしれませんが、今の私の知識とスキルの限界です。

-サイト構築
-,