YARPPのテンプレートファイル yarpp-template-thumbnail.php をカスタマイズしてアイキャッチ画像とデフォルト画像を表示する

前回の記事
アイキャッチ画像を自動で取得して関連記事を表示するプラグイン
【 IGIT Related Posts With Thumb Image After Posts 】

設置・投稿後に何故だかWordPressのブラグインディレクトリから削除されていたので、
何か不具合でもあるといけないので直ぐ様方向転換しました ^^;

今回は ごりゅご.com さんの
関連記事プラグインYARPPをカスタマイズしてLinkWithin風にする
という記事を参考に運営しているブログをカスタマイズしてみました。

全ての投稿にアイキャッチが設定されている場合は
ごりゅご.com さんの通りで良いのですが、個人的に画像のない投稿も多く、
画像があるものでも、アイキャッチが設定されていなければ
別のプラグインを使うか、または

関連記事プラグイン YARPP をカスタマイズして、全自動でアイキャッチ画像表示する
という記事を参考にして、画像がある投稿だけは
表示できるようにするという記事の方法しか
見当たらなかったので、正しいかどうかはわかりませんが、
アイキャッチのない投稿については、
デフォルト画像を設定して、同じ画像が表示されるようにしました。

このブログ 「 そば どっと びず 」と「 そば レシピ 」では
すべての投稿にアイキャッチが設定してあったので、
ごりゅご.com さんのやりかたそのまま使わせていただき、
もうひとつのブログ 「 そばを楽しもう♪ 」のみ、デフォルト画像表示にしました。

完成形はこうです ↓

上記の中でカメラのイラストが入っているところが
画像がない記事で、デフォルトの画像が表示されています。

アイキャッチが全ての投稿にあるブログに関しては ごりゅご.com さんのところと同じで

phpファイル

CSSファイル(自分のテーマにあわせてカスタマイズ)

アイキャッチがない、画像がない投稿がある場合、デフォルトの画像を設定

phpファイル

上記のファイルの中で追加したのは下記の部分。

もうちょっとスマートなやり方あるかと思うんですけど
テーマファイルの画像ディレクトリ(私の場合だと images)に
画像(私の場合だと noimage.gif)を用意して読み込んでいます。

CSSファイルは同じです。

っとここまでで普通のテーマならよいのですが、
私の使っているテーマはレスポンシブWebデザイン対応のものなので、
それぞれに合わせてCSSも調節しなくてはなりません。

っということで、そもそもCSSの設定で
overflow:hidden;
になっていましたので、このようにしました。

スマホ用(関連記事2つ表示)

iPad用(関連記事3つ表示)

通常のブラウザで幅が狭くなった時用(関連記事3つ表示)

これでどのパターンで見ても見た目よしということで 笑

:: スポンサーリンク ::

posted by そば富泉

コメント(Facebook・Twitter・WordPressアカウントでもコメントできます)