« | »

04月22日 

Wordpress

Wordpressでページ内に記事一覧サムネイル

久しぶりのWordpressネタです。
次のVer.3からはマルチブログにも対応するなど、このところ進み具合が半端無い感じのWPですが(アップグレードでコケるところ多そうだなぁ…)。

ページ内で記事の一覧とそのサムネイル画像を表示させたい、という要求は往々にしてあると思うのですが、それをなんとか使用者にも使いやすい形で実装できないものか…と。

最初に考えたのはカスタムフィールドを使用して、アップロードしたファイルのURLを入れてもらう。。。は手間が増えるし、おそらくイマイチ分かりにくい操作だなぁ。。。と。
記事内の最初に出てくる画像を正規表現で取得して…矩形のサムネイルだと良いけど、中・大の画像サイズとファイル名が不明…
Ver 2.9から実装されているthe_post_thumbnail()はなにも表示されない…

ということで実装したのがこちら、

PHP:
  1. $posts = get_posts('numberposts=5&category=3');
  2. foreach($posts as $post) {
  3.     setup_postdata($post);
  4.    
  5.     $dat = get_posts('post_type=attachment&orderby=menu_order&order=ASC&numberposts=1&post_parent='.get_the_ID());
  6.     if (count($dat)> 0) {
  7.         $image = wp_get_attachment_image_src($dat[0]->ID);
  8.         $desc = '<img src="'.$image[0].'" width="'.$image[1].'" height="'.$image[2].'" alt="" />';
  9.     }
  10.  
  11.     // 記事出力
  12.     echo $desc;
  13. }

get_posts()にパラメータ「post_type=attachment」を指定すると、「post_parent」に与えた記事IDに紐付いているデータを取得できます。その他のパラメータは並び順の先頭にある1件のみを取得する指定です。ギャラリーダイアログで1番上に指定している物を取得する仕様にしました。
配列にはそれぞれファイルURL・幅・高さが入っています。

お客さんにはサムネイルに表示したい画像をアップロード、1番上に移動してもらうだけ。記事内にその画像を表示させたくなければ挿入しなければ良いだけで、ギャラリーの1番上にある画像が自動的に表示されるのは分かりやすいかな?と(サムネイルは表示させたくないけど、記事中に何か画像を表示したい、という希望には添えませんが…orz)。

次のネタは「ページ内で記事を表示させたい。そしてページングも表示させたい」です。ネタは小出しでw

トラックバック URL

コメント & トラックバック

こんばんは。はじめまして。
コードとても参考になります。ありがとうございます。
早速、導入させていただいています。

ただ、「記事に紐付いた画像」は表示できますが、
他の記事で同じ画像を挿入すると、その記事でサムネイルが表示されません。

複数の記事から同じ画像を挿入した時も
全てサムネイル表示される方法はないでしょうか。。

> yanaiさん
はじめまして。コメントありがとうございます。

記事と画像が紐付くフローを正確には把握してないのですが、記事編集画面の状態で画像をアップすると、その画像と記事が紐付くのではないかと思っています。
そのため他の記事の場合、アップロード処理が無いため記事と画像が紐付かないのかな?と。
(メディアで画像の挿入したときに紐付いていればいいのですが…)
ここら辺はDBとか見てみないと分からないです。。。

確実にサムネイルを表示させるなら、カスタムフィールドを使う方法でしょうか…
このネタを考える前はアップロードした画像ファイル名をコピペして使う方法を考えてました。

もう少し良い方法が無いものか考えてみます。
今後ともよろしくお願いいたします。

コメントフィード

コメント