No image らしくない画像に変えて手抜きを誤魔化そう

STINGE5に限りませんが、アイキャッチ画像を設定しないと、記事一覧のサムネイルに「NO IMAGE」とシンプルな画像が表示されます。

この画像が並ぶといかにも手抜きな感じでよろしくないです。

しかし毎回アイキャッチ画像を考えて作るのは時間もかかり面倒です。

そこで手を抜いても、そう見せない方法がありるので解説します。

No image画像を設定する理由

No image画像は、アイキャッチなどの画像を用意できなかった時に、差し替えてくれるデフォルト画像です。

例えば下の画像が、STINGER5に用意されているNo imageです。

非常にシンプルで「NO IMAGE」と書いてあるため、こんな風に並ぶと手を抜いているのが見え見えですｗ

こうならないためにも毎回ちゃんと画像を用意したいのですが、記事を書くだけで力尽きた時には、後回しにしたい時もあります。あり過ぎですが・・・。

アイキャッチ画像は、読者の興味を誘うのに大きな戦力となり得ます。既存のものをそのまま使うより手を加えてオリジナリティを出したい。でも現状では画像探しも大変で、加工する技術も勉強段階なので、あとでまとめて作ろうと思い放置しています。

しかしこれでは、余りにも手抜き感が丸出しなので、もう少しマシな画像に差し替える事にしました。

No imageを別の画像に変える

STINGER5の場合、No image画像は、「itiran.php」、「kanren.php」、「newpost.php」と3つのPHPファイルで下記のように呼び出しています。

 <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.png"  title="no image" width="100" height="100" />
 <?php endif; ?>
 </a>

5行目の”<?php echo get_template_directory_uri(); ?>/images/no-img.png”の部分が画像のURLです。

画像を変える

• 親テーマのimagesフォルダの中にあるno-img.pngを別の画像に差し替える。
• 別フォルダに画像を用意して呼び出す。

No image画像を変える方法は以上の二通りですが、前者の方法だとテーマを変えた時に対応できないので、後者の方法を選択します。

今回は、STINGER5を例にして画像の差し替えを行います。

1. 「itiran.php」、「kanren.php」、「newpost.php」の子テーマを作成する。
2. サムネイル画像を用意する。
3. メディアを追加で画像をアップロードする
4. 画像URLをコピーして、子テーマ内の「<?php echo get_template_directory_uri(); ?>/images/no-img.png」を上書きする。

子テーマの作成方法は、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！の記事を参考にしてください。

以前より手抜き感が軽減しましたが、

ん～同じ画像が並ぶと、やはり誤魔化しきれていないｗ

No imageをランダムで表示する

複数のサムネイル画像を用意して、ランダムに表示させると誤魔化しが効きそうなので試してみましょう。

1. 複数のサムネイル画像を用意。no-img1、no-img2のように通し番号にする。
2. 画像URLの通し番号部分をランダム関数にする。

下記のコードが修正したものです。

<img src="http://......../no-img<?php echo(rand(1,3));?>.png" title="no image" width="100" height="100" />
 <?php endif; ?>

ポイントは、「no-img<?php echo(rand(1,5));?>.png」の部分。

PHPのrand()関数で、1から5までの数字をランダムに生成して、echoでno-imgの後に書き出しています。

これで画像を増やせば、ワンパターンにはならないでしょう。

画像フォルダについて

WordPressの画像フォルダは、メディア設定のアップロードしたファイルを年月ベースのフォルダに整理にチェックを入れていると年月によってフォルダが分かれるようになっています。

画像を整理するのに便利ですが、今回のように画像のURLが一部共通している必要がある場合は、同じフォルダに入れ直す必要があります。

また、同じ画像をアップロードし直した場合、同名ファイルで上書きされずリネームされるので、元の画像を削除してからアップロードしてください。

まとめ

サムネイル画像は記事ごとにキャッチーなもの用意した方がいいと思います。でも苦痛に感じるくらいなら、たまには手を抜いて記事を書く時間に回した方が良いかもしれません。

まあ、余裕が出来たら、まとめてサムネイル作りに没頭したいんですけどねｗ