[WP]画像サムネイルを投稿された記事へのリンク付きで表示

2010/05/172008/07/27 by

記事で使われた画像を使って、記事へのリンクをテンプレート、またはサイドバー内に表示する方法について。
ver2.7でも動きます。

ver2.9の投稿サムネイル機能を使う関数はこちらにあります。

使うとこんな感じになる▼

以前書いた画像のサムネイル表示（ループ内）の応用です。
この記事の関数は特定のカテゴリ下にある画像に絞っています。
全てのカテゴリーに対応したい場合はこちらの記事をご覧下さい。

テーマのfunctions.php内に次のソースをコピペ

function attachment_ancherlinks($my_id){
	$args = "category=".$my_id;
	$posts = get_posts($args);
	print "<ul>";
	for($i=0;$i<count($posts);$i++){
	
	$attachments = get_children(array('post_parent' => $posts[$i]->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
	$attachment = array_shift($attachments);  
	$url = $posts[$i]->guid;
	$title= $posts[$i]->post_title;
	
	print "<li><a href="$url" title="$title">".wp_get_attachment_image($attachment->ID)."</a></li>";
	}
	print "</ul>";
}

array_shift()をarray_pop()にすると逆になります。
get_posts()の引数を変更すると、表示件数などを変えられます。
上のソースはタイトルしか出してませんが、get_posts()使ってるので他の情報も表示させることが出来ます。
表示スタイル変更はprint()のくだりを適当に修正してください。

テンプレートファイルの表示したい場所に

attachment_ancherlinks($category_ID);

上記ソースを書くと、画像が表示されます。

サイドバーウィジェットはこんな感じで、
ウィジェットのコンテンツにテンプレートに書いたのと同じ関数を入れる。

register_sidebar_widget(__('PostImageLink','kubrick'), 'PostImageLink');

function PostImageLink($args){
	extract($args);
	echo $before_widget;
	echo $before_title . $widget_name . $after_title;
	attachment_ancherlinks(5);
	echo $after_widget;
}

データベースクエリとか使ったほうが早いのかなーと思いつつ。
ジェバンニが関数でやってくれました。

修正で分からないことがあればコメントください

実用的かもしれない修正版

表示件数の引数$numを追加して指定した任意の数だけ表示させる
画像が無い場合の例外処理
カテゴリー名の表示

function attachment_ancherlinks($my_id, $num){
	$args = "category=".$my_id."&numberposts=".$num;
	$posts = get_posts($args);
	
	print "<h3>".get_cat_name($my_id)."</h3>";//カテゴリー名
	print "<ul>";
	for($i=0; $i < $num ;$i++){
		if($i >= count($posts) ) return;
		$attachments = get_children(array('post_parent' => $posts[$i]->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
	
		$url = $posts[$i]->guid;//記事URL
		$title= $posts[$i]->post_title;//タイトル
		
		if(is_array($attachments)){
			$attachment = array_shift($attachments);
			print "<li><a href="$url" title="$title">".wp_get_attachment_image($attachment->ID)."</a></li>";
		}else{
			//画像が無い場合
			print "<li><a href="$url">$title</a></li>";
		}
	}
	print "</ul>";
}

2.9以上の場合

どうもget_childrenの返り値が変わったっぽいので、
下記の通り、NoImage出力を判断しているif条件を変更してください

変更前：

if(is_array($attachments))

変更後：

if(count($attachments) >= 1)

参考記事

「[WP]画像サムネイルを投稿された記事へのリンク付きで表示」への20件のフィードバック

ひろ

2009/06/28 04:34

はじめてコメントさせていただきます。

2008-07-27 (日）の　[WP]画像サムネイルを投稿された記事へのリンク付きで表示

　の記事を読んで、是非お聞きしようと思い、コメントさせていただきました。functions.phpを記事内でご説明くださっているようにして、実行すると出来ました！　投稿記事の画像とタイトル文字は表示できたのですが、これに投稿記事の「カテゴリー」をさらに表示したいのですが、うまくいきません。　どのようにfunctions.phpを変えればうまくいくのか、ご意見,アドバイス等いただければと思いコメントさせていただきました。　そして、「get_posts()の引数を変更すると、表示件数などを変えられます。」と書いていただいていたのですが、PHP初心者でして、具体的にどのあたりのコードを見れば　引数を表示している箇所なのか、お教えいただければと思います。
具体的には合計12個表示させたいんです。　いろいろ、はじめてコメントさせていただくのに　大変あつかましい質問ばかりで、すいません。　ご意見,アドバイス等　よろしくお願い致します。
返信
Tenderfeel

2009/06/29 14:52
お答えします！ 😀

get_posts()はWordpressの関数なのですが、これについてはこちらの解説ページを見ていただくとして、
初期の状態では得られるデータはどう頑張っても5件なので、
関数１行目のget_posts()に渡す条件を次のように変更します。

$args = "category=".$my_id."&numberposts=12";

※全件取得する場合は-1とします。

get_posts()で得た記事のデータはまず$postsに配列形式で格納されます。
（「帰って来るオブジェクトはこんな感じ～」と晒してるソースがそれです）
それから配列をforループで記事１つ分ずつ処理しているのですが、
12件で変化がないのなら上記ソースの条件を

for($i=0;　$i<count($posts);　$i++)
↓このように
for($i=0;　$i<12;　$i++)
変更してもいいのですが、これだと$postsが12件より少なくてもループが回ってしまうので
```
for($i=0;$i<12;$i++){
   if($i>=count($posts)) return;
}
```
と、例外処理を付けた方が安心です。

カテゴリーは、関数に渡している引数がカテゴリIDその物なので、
get_cat_name()とかget_category_link()などの関数に通せばタイトルとかリンクが得られます。

print "<h3>".get_cat_name($my_id)."</h3>";//カテゴリ名

追加する場所はforループの上か下に。

ソース全文は記事に追加しておきますのでそちらを参考にしてください。
返信
ひろ

2009/06/29 16:08

すいません。さらに質問します。　一覧表示させる投稿画像の縦・横比率を180×135pxに統一させて表示させたいのですが、その場合はどのようにスクリプトを変更すればいいのか、教えていただけないでしょうか。　よろしくお願いします。
返信
Tenderfeel

2009/06/29 17:01

スタイルシートで
img { width:185px; height:135px; }　
とimgタグのスタイル固定すれば一発です。
返信
ひろ

2009/06/29 18:11

何度も本当にすみません。。。　上記方法で教えていただいている「カテゴリー」＆『タイトル」表示の件ですが、
上記スクリプト内の
print “<h3>”.get_cat_name($my_id).”</h3>”;//カテゴリ名　と
入力し、サイト画面をプレビューしてみると
タグのみしかHTMLに吐き出しておらず、カテゴリーが表示されません。
※get_category_link()だと何も表示されません。

最終的に「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　の繰り返しを（「画像 _ タイトル _ 投稿カテゴリー」が1セットとし）を12個　1ページ内に表示させたいのですが今、私の現状のスクリプトは、教えていただいている上記スクリプト内の

if(is_array($attachments)){　部分に↓

$attachment = array_shift($attachments);
print “<a href="$url" title="$title" rel="nofollow">”.wp_get_attachment_image($attachment->ID).”</a>”;　//投稿画像を表示
print “<a href="$url" rel="nofollow">$title</a>”;　　//投稿タイトルを表示
print “ここに投稿カテゴリーを入れたい”;　んですが、　//投稿カテゴリーを表示

「ここに投稿カテゴリーを入れたい」部分に
print “<h3>”.get_cat_name($my_id).”</h3>”;//カテゴリ名　を
入れているんですが投稿カテゴリー表示してくれません。
プレビューしたHTMLを見ると、<h3>のみしか出てきていません。

これ以外の教えていただいた、for ループとか画像の固定は、問題なく表示できました。　ありがとうございます。

もう少し、詳しく教えていただけると幸いです。　本当に何度も何度もスイマセン。。。

よろしくお願い致します。
返信
ひろ

2009/06/29 18:31

コメントのスクリプトタグがうまく表示できていませんでした、スクリプト表示タグをつけて、再度投稿させていただきます。すいません。（内容は同じです）何度も本当にすみません。。。　上記方法で教えていただいている「カテゴリー」＆『タイトル」表示の件ですが、上記スクリプト内のprint "".get_cat_name($my_id)."";//カテゴリー名　と
入力し、サイト画面をプレビューしてみると
　　
タグのみしかHTMLに吐き出しておらず、カテゴリーが表示されません。
※get_category_link()だと何も表示されません。

最終的に「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　「画像 _ タイトル _ 投稿カテゴリー」　の繰り返しを（「画像 _ タイトル _ 投稿カテゴリー」が1セットとし）を12個　1ページ内に表示させたいのですが今、私の現状のスクリプトは、以下になります。
教えていただいている上記スクリプト内の

if(is_array($attachments)){ $attachment = array_shift($attachments);
以下の部分に↓

print "".wp_get_attachment_image($attachment->ID).""; //投稿画像を表示 print "$title";　//投稿タイトルを表示 print “ここに投稿カテゴリーを入れたい”;　　//投稿カテゴリーを表示

のようにしたいのですが、「ここに投稿カテゴリーを入れたい」部分に
print "".get_cat_name($my_id)."";//カテゴリー名　　を
入れているんですが投稿カテゴリー表示してくれません。
プレビューしたHTMLを見ると、のみしか表示していません。

これ以外の教えていただいた、for ループとか画像の固定は、問題なく表示できました。　ありがとうございました。

もう少し、詳しく教えていただけると幸いです。　本当に何度も何度もスイマセン。。。

よろしくお願い致します。
返信
ひろ

2009/06/29 18:37

すいません。。。　スクリプトタグ「pre」「code」タグ付けて、コメントしなおしたんですが、
表示できませんでした。　内容わかりますでしょうか？
一応、メールにて内容を送信させていただきます。　誠に申し訳ございません。
コメント部分を汚してしまって申し訳ありません。削除してもらって大丈夫です。

よろしくお願い致します。

内容への回答は、こちらのブログで大丈夫です。

よろしくお願い致します。
返信
Tenderfeel

2009/06/29 18:46
コメントにHTMLソースを張る場合はhtmlエンティティ化しなければ表示されないので、こちらでちょっと変換させてもらいました。
wordpressが勝手に除去したのかもしれませんが、エスケープはしてますか？

引用符（クォート）は一重と二重があるのですが、出力時のソースで同種の記号を使用する場合はバックスラッシュ（\）でエスケープする必要があります。

print “<a href=￥”$url￥” title=￥”$title￥” rel=”nofollow￥”>”.wp_get_attachment_image($attachment->ID).”</a>”;

または、開始と終了のみシングルクォートを使用する

print ‘<a href=￥”$url￥” title=￥”$title￥” rel=￥”nofollow￥”>’.wp_get_attachment_image($attachment->ID).'</a>’;

あとはスペースがうっかり全角だったりしてもエラーになります。
カテゴリーもこちらでは表示しているので、ソースの何かが間違ってるとしか言えないです。
```
$category = get_cat_name($my_id);
[省略]
if(is_array($attachments)){
	$attachment = array_shift($attachments);
	print "<li><a href=\"$url\" title=\"$title\">".wp_get_attachment_image($attachment->ID)."</a><br />";
	print "<a href=\"$url\" rel=\"nofollow\">$title</a>";
	print $category;//カテゴリ名
	print"</li>";
	}else{
	//画像が無い場合
	print "<li><a href=\"$url\">$title</a>";
	print "<a href=\"$url\" rel=\"nofollow\">$title</a>";
	print $category;//カテゴリ名
	print"</li>";
}
```
返信
Tenderfeel

2009/06/29 18:57

おーっと、回答がすれ違ってました。
エスケープされてるならHTMLタグの文法が間違ってるのでは、という気がしなくもないのですが、
やはりケアレスミスの線が否めません。
メールで送って貰えるのならソース全文の方がわかりやすいですｗ
返信
ひろ

2009/06/29 19:28

すいません。。。Tenderfeel さんのメールアドレスがわからないんです。
コンタクトページから添付データってつけられるんですか？？？（やりかたわからずで）
一度、私のデータを見ていただきたいんですが。。。

私のメールアドレスに一度メールをいただくか、
コチラで教えていただけると、すぐにでもデータ送信しようと思います。

やってみたのですが、やはりカテゴリーのみが表示できずで。。。。

お手間とらせまして、すいません

よろしくお願い致します。
返信
Tenderfeel

2009/06/29 19:51

コンタクトページから添付ファイル付けれるように修正しておきました 😉

functions.phpの関数の部分と呼び出してるテンプレートのソースが分かればokです
返信
ひろ

2009/06/29 20:03

ありがとうございます。　早速お送りします。
返信
ひろ

2009/06/29 20:11

データ送りました！　すいません、
よろしくお願い致します m(_ _ )m
返信
naoya

2010/02/14 09:15

初めまして、指定カテゴリーのサムネイルの表示を探していてここにたどり着きました。
バージョン2.7でも動作するという事が書いてありましたので、ダメ元で
バージョン2.8.5で試してみた所、ちゃんと表示する事が出来ました。
こんなに役立つコードを公開して下さり、ありがとうございます。

しかし先日2.9.1へアップデートしてみたら、画像がない場合の例外処理が効いていないようでした。
画像がない場合の例外処理のトリガーは、メディアライブラリに登録されているかどうかでいいのですよね。
同環境(デフォルトテーマ/プラグインなし/PHP5/MySQL5)の2.8.5では、ちゃんと例外処理が働き、
else部分が出力されましたが、2.9.1では画像がない場合のelseが出力されませんでした。

画像がない場合はnoimg画像を当ててリンクしていたので、else部分が出力されなくて困っています。
大変お忙しい所申し訳なく、厚かましいお願いなのですが2.9.1でも使えるようご対応頂けないでしょうか。
よろしくお願い致します。
返信
Tenderfeel

2010/02/16 13:42

naoya さん＞

記事にも追加で書きましたが関数の戻り値が変わったようなので
以下の変更で出力されるようになると思います。

修正前：if(is_array($attachments))

修正後：if(count($attachments) >= 1)
返信
naoya

2010/02/19 09:28

Tenderfeel様

詳しいご対応ありがとうございました。
戻り値の違いでelseが出力されなかったんですね。
2.9xで無事出力されました、ご対応ありがとうございました！
返信
あさじ

2010/03/06 22:20

はじめまして。
書き込んだ記事を流用して簡単にギャラリーページっぽいものを作れないかなーとネットを検索していたらここにたどり着きました！
早速導入してみたのですが、サムネイルからのリンクがデフォルトの「?p=123」というURIになりますよね？
これを出来れば自分で設定したパーマリンクに変更したいんです。
何か方法がありましたらご教授いただければと思います。
返信
Tenderfeel

2010/03/08 12:11
あさじさん＞

変数$urlの行を下記のように修正してみてください
```
$url = get_permalink($posts[$i]->ID);
```
返信
あさじ

2010/03/10 22:26

Tenderfeelさん

素早いお返事ありがとうございます。
修正してみたところ、無事にパーマリンクで指定されるようになりました！
本当にありがとうございました。
返信
ピンバック: 記事内画像リンク付き表示 | 文系デザイナーの備忘録

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

実用的かもしれない修正版

2.9以上の場合

シェア

関連

「[WP]画像サムネイルを投稿された記事へのリンク付きで表示」への20件のフィードバック

コメントを残すコメントをキャンセル