以前書いた記事 [WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。
表示するのは、記事に投稿された画像(のサムネイル)・記事タイトル・カテゴリー名、の3つとします。
記事に関連付けられていない画像(ライブラリから引っ張った画像)は表示されません。
※上記のサンプル画像の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); ?>
関数の第1引数は表示する数です。上記例では12件出力されます。
第2引数はサムネイルのサイズです。デフォルトは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を一定の値に指定すれば回避出来ます。