2012
9
03

プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する

今まで関連記事はただ単にテキストだけのリスト表示にしてたんですが、やっぱりサムネイルがあったほうがクリック率上がるのかなぁと思い、やってみました。プラグイン使わずにできますので、方法をご紹介します。


イメージ

今までは、Webクリエイターボックスさんのコードを使わせていただいて、こんな感じにしてました。

120903-1

これにちょっと手を加えて、こんな感じに。

120903-2

うん、やっぱ画像あったほうが目に入ってくるような気がする!

実装

functions.php

テーマにサムネイルを使いますよー(1行目)と言った後、任意のサイズを縦、横の順番で指定して、'rel_tmn'という名前で定義します(2行目)。数値はお好きに変えてください。

2012/9/21追記:2行目を書くと、画像をアップロードした際にその画像サイズのものが自動生成されてしまします。画像が増えるのが嫌な方は2行目を省いても大丈夫です!(後述します)

single.php

22行目で、先ほど指定したサイズのサムネイルを呼び出して、リンクをつけています。

2012/9/21追記:'rel_tmn'を定義しなかった方は、the_post_thumbnail(array(100,100));のように書きます。長辺がこの大きさに合うように縮小されます。

style.css

このブログで使っているCSSです。imgにもリンクを貼っているので、マウスホバーで何かアクションが欲しいなと思ったのですが、画像を差し替えるのも面倒なのでちょっぴり薄くなるようにしています。あとは、枠をつけたりとか。

参考

こちらのサイトを参考にさせて頂きました!ありがとうございます!

imgにaltとtitleをつける

さて、この時点でだいたいOKなんですが、表示したサムネイルをマウスホバーすると画像のファイル名がでてきちゃう…。altもないし、なんかちょっとやだなーと思ったので、titelとaltと追加します。

single.php

さっきの22行目の、the_post_thumbnail()の中にこんな感じで追加しましょう。

2012/9/21追記:定義しなかった方は、'rel_tmn'array(100,100)に差し替えてください。

いかがでしたでしょうか。どなたかのお役に立てれば幸いです!

2014/5/1追記

長らく使わせていただいていたコードですが、現在ではget_posts()を使ってこのように書いておりますので、一応載せておきます。

こちらを参考に、該当記事が存在しない場合にメッセージを出すように修正しました。(2014/7/14)

現在表示されている記事は除いて、同じタグの記事をランダムで表示します。サムネイルの有無を調べて、ないものは代替imgを指定してます。

実稼働では、併用している人気記事一覧と記事が被らないように、9行目のpost__not_inに人気記事リストを入れて除外して使っています。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2012/09/03
更新日:2014/07/14


5件のコメント

  • りんご
    2013年1月17日 11:58 PM

    はじめまして!
    こちらの記事を参考に関連記事を表示させていただいています。
    質問なのですが、こちらの記事ではタグによって関連記事を表示させていますが、これをカテゴリーによって表示させるにはどうしたらいいでしょうか。
    お時間がありましたら、お教え願えると幸いです。
    宜しくお願いします。

  • りんご
    2013年1月18日 12:31 AM

    すみません、自己解決しました。失礼いたしました。

    • *you
      2013年1月18日 8:56 AM

      はじめまして、コメントありがとうございます。
      解決なさったそうで良かったです(*´∀`*)
      お役にたてずにすみません、良ければまたお越しくださいませ!

  • 吉田哲也
    2014年5月17日 1:42 PM

    何時間かかかりましたが、おかげさまでヘッダー部分に関連記事を表示できるようになりました。すごく助かりました。
    ありがとうございます。

    • *you
      2014年5月19日 10:52 AM

      吉田さん、コメントありがとうございます!

      ブログ拝見しました!ヘッダーに表示するのも良いですね(´∀`*)
      参考にして頂けて光栄ですー!

6件のトラックバック

コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top