- 2009-06-30 (火) 14:34
- wordpress
以前書いた記事 [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++){
-
$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);//カテゴリー
-
$x = 1;
-
print "<li><a href=\"$url\" title=\"$title\">".wp_get_attachment_image($attachment->ID,$size)."</a><br />";//サムネイル出力
-
foreach($post_cats as $cat){
-
$sep = $cat_num> $x ? ",":"";
-
$x++;
-
}
-
print"</li>";
-
}else{
-
//画像が無い場合
-
foreach($post_cats as $cat){
-
$sep = $cat_num> $x ? ",":"";
-
$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文に修正を加えてください。
修正前：
修正後：
サンプルの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を一定の値に指定すれば回避出来ます。
関連記事
- Newer: [wp] Wordpressで簡単なギャラリーページを作る
- Older: [xml] RSS2.0 Feed Template
