WebTecNote

[wp]投稿された画像のサムネイルが表示される記事一覧ページを作る

以前書いた記事　[WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。

表示するのは、記事に投稿された画像（のサムネイル）・記事タイトル・カテゴリー名、の３つとします。
記事に関連付けられていない画像（ライブラリから引っ張った画像）は表示されません。
※上記のサンプル画像のwordpressでは、サムネイルの最小サイズを100x100pxの切り抜き設定にして、それを表示しています。

※記事のギャラリーに投稿された画像のサムネイルを利用するもので、
2.9で実装された投稿サムネイル機能とは全く別物です。ご注意ください。

Step1.ページテンプレート作成

まず、ページ用テンプレートを作成します。
single.phpやpage.phpなどを複製して名前を変更後、先頭にテンプレート名のコメントを入れる。

/*
Template Name:Sample
*/

Step2.ページへテンプレートを適用

テンプレートが出来たら、適当にページを作成してテンプレートを適用しておきます。

Step3.テンプレートの編集

作成したページテンプレートの先頭に次の関数を追加します。（ver2.9以上対応）

function attachment_ancherlinks2($num,$size="thumbnail"){
    $args = "numberposts=".$num;
    $myposts = get_posts($args);
    print "<ul id=\"thumb-post-lists\">";
	
    for($i=0;$i<$num;$i++){
        if($i>= count($myposts) ) return;
        $attachments = get_children(array('post_parent' => $myposts[$i]->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));

        $url = $myposts[$i]->guid;//記事URL
        $title= $myposts[$i]->post_title;//タイトル
        $post_cats = wp_get_post_categories($myposts[$i]->ID);//カテゴリー
        $cat_num = count($post_cats);
        $x = 1;
       if(count($attachments) >= 1){
            $attachment = array_shift($attachments);
			print "<li><a href=\"$url\" title=\"$title\">".wp_get_attachment_image($attachment->ID,$size)."</a><br />";//サムネイル出力
			print "<a href=\"$url\">$title</a><br />";//タイトル出力
			foreach($post_cats as $cat){
				$sep =  $cat_num > $x ? ",":"";
				print "<span class=\"cat\">".get_cat_name($cat).$sep."</span>";//カテゴリ名
				$x++;
			}
			print"</li>";
		}else{
            //画像が無い場合
            print "<li><a href=\"$url\" class=\"noimage\">$title</a><br />";//NoImage
			print "<a href=\"$url\">$title</a><br />";//タイトル出力
			foreach($post_cats as $cat){
				$sep = $cat_num > $x ? ",":"";
				print "<span class=\"cat\">".get_cat_name($cat).$sep."</span>";//カテゴリ名
				$x++;
			}
			print"</li>";
        }
    }
    print "</ul>";
}

2.9に対応。

コンテンツを表示する部分に次のソースを追加します。
the_content()は本文を表示しないのなら入れ替えても問題無し。

<?php attachment_ancherlinks2(12);  ?>

関数の第１引数は表示する数です。上記例では１２件出力されます。
第２引数はサムネイルのサイズです。デフォルトはthumbnailで、他にmediumとlargeが選べます。

<?php attachment_ancherlinks2(5,"medium");  ?>

問題なく表示されたらあとはスタイルや出力部分のソースを編集するだけ。

カスタマイズ例

画像が無い場合にNoImage画像を表示する
NoImage出力の部分を変更

print "<a href=\"$url\"><img src=\"".get_bloginfo("template_directory")."/images/noimage.png\" width=\"100\" height=\"100\" alt=\"\" /></a>";

widthとheightは直接サイズを書く方が良いんですが、気にしないなら次の様に

print "<a href=\"$url\"><img src=\"".get_bloginfo("template_directory")."/images/noimage_".$size.".png\" alt=\"\" /></a>";

ファイル名にサイズを追加してnoimage_thumbnail.png、noimage_midium.png、noimage_large.pngみたいに変更する事も出来ます。

カテゴリーページへのリンクも張る
カテゴリー名とコメントしてある行を変更

print "<span class=\"cat\"><a href=\"".get_category_link($cat)."\">".get_cat_name($cat).$sep."</a></span>";//カテゴリー名

出力をランダムにする
関数先頭行の$argsを変更。

 $args = "orderby=rand&numberposts=".$num;

orderbyの値を変更すれば他の並び順にも出来ます。

特定のカテゴリを除外
関数先頭行の$argsを変更。

$args = "category=-8,-15&numberposts=".$num;

除外したいカテゴリーのIDにマイナスをつけてcategoryの値として渡します。
逆にマイナスをつけなければ選択したカテゴリーだけに絞る事が出来ます。

$argsはget_posts()に渡す引数です。くわしくはこちらの記事で解説しています。

2.8以前のバージョン

No Imageが出力されないので、下記のif文に修正を加えてください。

修正前：

if(count($attachments) >= 1)

修正後：

if(is_array($attachments))

サンプルのCSS

デフォルトテーマで書いたものです。上にある画像のようになります。
足りないプロパティはテーマに合わせて追加してください。

#thumb-post-lists {
}

#thumb-post-lists li {
	float:left;
	width:100px;
	margin:10px 10px 10px 0;
	text-align:center;
	text-indent:0;
}

* html #thumb-post-lists li {
	margin-right:5px;
}

#thumb-post-lists li:before {
	display:none;
}

#thumb-post-lists li:hover {
	background-color:#efefef;
}

タイトルが2行になったりするとカラム落ちするので、そのような場合には
関数内に自動でclearを入れるようにするか、heightを一定の値に指定すれば回避出来ます。

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