WebTecNote

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

以前書いた画像サムネイルを投稿された記事へのリンク付きで表示はギャラリーにある画像を表示するものなのだけど、
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";
	}
}

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

モバイルバージョンを終了