[WP]投稿サムネイルを記事へのリンクやタイトル付きで表示

by

以前書いた画像サムネイルを投稿された記事へのリンク付きで表示はギャラリーにある画像を表示するものなのだけど、
Wordpress2.9には投稿サムネイルっていう便利機能が備わっているんだよね。
そろそろ投稿サムネイル使う関数に書き直さねば…と思っていたらフォーラムにそんな感じの質問が投稿されていたのでｗ　さらっと書いてみた。
関数はループ外の使用が有効なので、トップに更新情報を出すもよし、サイドバーに表示するもよしです。

サンプル実行デモ

HTML

仕様上リスト要素しか出力されないんで、タイトルとか適当につけてください。

<h3>新着記事</h3>
<div id="newposts">
	<?php postthumb_ancherlinks('category=16,15');?>
</div>

CSS

デフォルトテーマに書いた超適当なソースだけど以下ポイント。

画像がない場合はnoimageというクラスがli要素に付くので、[No Image]画像を背景として指定。
サムネイルのサイズと同じpaddingとwidthを指定して整える。
サムネイルとタイトルの間には改行が入らないので、サムネイルかタイトルをブロック要素にして改行。

#newposts ul {
padding:0;
}
#newposts li {
list-style:none outside;
padding:0;
display:inline-block;
text-align:center;
}
#newposts li img {
display:block;
}

#newposts li.noimage {
background:url(images/noimage.png) no-repeat top center;
padding-top:100px;
width:100px;
}

PHP

関数の構文

postthumb_ancherlinks($args, $max = 5, $size = 'thumbnail', $linkto='page', $attr=NULL)

オプション

$args (string or array/ ‘numberposts=5’)
get_posts()の引数。文字列か配列で指定。
$max (number/5)
表示件数。整数で指定する
$size (string or array/’thumbnail’)
投稿サムネイルの大きさ。文字列（thumbnail, medium, large, full）　か、配列（ array(32,32)　）で。
$linkto (string/’page’)
投稿サムネイルのリンク先。page→記事、image→フル画像
$attr (array/ NULL)
画像の属性。連想配列形式で指定する

function

バージョンや関数の有無に関する例外処理は入れてないので、2.9以下だと多分エラーが出ます。

functions.phpにコピペする。（コメントのドメインは引越し予定ということで…）

/**
 * 投稿サムネイルを記事へのリンク付きで表示
 * @copyright Tenderfeel(tenderfeel@gmail.com)
 * @usage http://webtecnote.com/wordpress/843/
 */
function postthumb_ancherlinks($args, $max = 5, $size = 'thumbnail', $linkto='page', $attr=NULL){
	
	if(!isset($args))
		$args = array("numberposts"=>5);
	
	$posts = get_posts($args);
	
	if(count($posts)>=1){
		
		print "<ul>\n";
		
		for($i=0; $i < $max; $i++){
			if($i >= count($posts) ) continue;
			
			$url = $posts[$i]->guid;//記事URL
			$title = $posts[$i]->post_title;//タイトル
			$time = mysql2date(get_option('date_format'), $posts[$i]->post_date,true);//更新日
			
			$tid  = get_post_thumbnail_id($posts[$i]->ID);
			
			if($tid != ""){
				if($linkto == 'image'){
					$url = '<li><a href="'.wp_get_attachment_url($tid).'" rel="lightbox"';
				}else{
					$url = '<li><a href="'.get_permalink($posts&#91;$i&#93;->ID).'"';
				}
				print $url.' title="'.$title.'">'.get_the_post_thumbnail($posts[$i]->ID,$size, $attr).'</a>';
				
				print '<span class="postTitle"><a href="'.get_permalink($posts&#91;$i&#93;->ID).'" title="'.$time.'更新">'.$title."</a></span></li>\n";
			
			}else{
				//画像が無い場合
				print "<li class=\"noimage\"><span class=\"postTitle\"><a href=\"$url\" title=\"&#91;".$time."&#93;\">$title</a></span></li>\n";
			}
		}
		
		print "</ul>\n";
	}
}

ギャラリーの画像で例外処理する

投稿サムネイルが設定されていない場合にギャラリーの画像を代用するソース。
全く画像が投稿されていない記事だけタイトルのみとなります。

/**
 * 投稿サムネイルを記事へのリンク付きで表示
 * @copyright Tenderfeel(tenderfeel@gmail.com)
 * @usage http://webtecnote.com/wordpress/843/
 */
function postthumb_ancherlinks($args, $max = 5, $size = 'thumbnail', $linkto='page', $attr=NULL){
	
	if(!isset($args))
		$args = array("numberposts"=>5);
	
	$posts = get_posts($args);
	
	if(count($posts)>=1){
		
		print "<ul>\n";
		
		for($i=0; $i < $max; $i++){
			if($i >= count($posts) ) continue;
			
			$url = $posts[$i]->guid;//記事URL
			$title = $posts[$i]->post_title;//タイトル
			$time = mysql2date(get_option('date_format'), $posts[$i]->post_date,true);//更新日
			
			$tid  = get_post_thumbnail_id($posts[$i]->ID);
			
			if($tid != ""){
				if($linkto == 'image'){
					$url = '<li><a href="'.wp_get_attachment_url($tid).'" rel="lightbox"';
				}else{
					$url = '<li><a href="'.get_permalink($posts&#91;$i&#93;->ID).'"';
				}
				print $url.' title="'.$title.'">'.get_the_post_thumbnail($posts[$i]->ID,$size, $attr).'</a>';
				
				print '<span class="postTitle"><a href="'.get_permalink($posts&#91;$i&#93;->ID).'" title="'.$time.'更新">'.$title."</a></span></li>\n";
			
			}else{
				
				$attachments = get_children(array('post_parent' => $posts[$i]->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
				
				if(is_array($attachments)){
					$attachment = array_shift($attachments);
					print "<li><a href=\"$url\" title=\"".$time."更新\">".wp_get_attachment_image($attachment->ID)."</a>";
					print '<span class="postTitle"><a href="'.get_permalink($posts&#91;$i&#93;->ID).'" title="'.$time.'更新">'.$title."</a></span></li>\n";
				}else{
					//画像が無い場合
					print "<li class=\"noimage\"><span class=\"postTitle\"><a href=\"$url\" title=\"".$time."更新\">$title</a></span></li>\n";
				}
				
			}
		}
		
		print "</ul>\n";
	}
}

どちらの関数も更新日をおまけで付けたりしてますので、お好みで改変して使ってください。

「[WP]投稿サムネイルを記事へのリンクやタイトル付きで表示」への5件のフィードバック

  1. いつも楽しく拝見しています。
    このギャラリー表示で、画像の無い記事をスキップして次の画像付き記事を表示させることは可能でしょうか？

    例）通常の5件記事表示
    1.AAA（画像あり）
    2.BBB
    3.CCC（画像あり）
    4.DDD
    5.EEE（画像あり）
    以下非表示
    6.FFF
    7.GGG（画像あり）
    8.HHH
    9.III（画像あり）

    例）画像無し記事がスキップされた5件記事表示
    1.AAA（画像あり）
    2.CCC（画像あり）
    3.EEE（画像あり）
    4.GGG（画像あり）
    5.III（画像あり）
    以下非表示
    6.LLL（画像あり）
    7.OOO（画像あり）
    8.QQQ（画像あり）
    9.ZZZ（画像あり）

    よろしくお願いします。

    返信
  2. ピンバック: wordpress　弄ってみた | 親父茶屋

  3. すばらしいソースをありがとうございます。

    WP3.2を使用しています。
    画像表示件数を指定しても５つ以外変わりません。

    バージョンアップで出来なくなってしまったのでしょうか？

    よろしくお願いします。

    返信

  4. どうしてもわからずご質問させていただきます。
    wordpressのプラグイン「wp_pagenavi」と併用して使用しているのですが、ページング機能が表示されません。
    具体的には

    としています。
    function.phpの最大表示件数は12にしています。

    ご教示いただけましたら幸いです。
    よろしくお願いいたします。

    返信

  5. こちらを拝見して組み込んでみたところ上手く表示されたのですが5件表示が変わりません。
    $args, $max = 5,
    を
    $args, $max = 20,
    に変更したら20件表示されるということではないのでしょうか？ご教授頂ければ幸いです。

    返信

ナツ へ返信するコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.