cssおぼえがき 「投稿の一覧をサムネイルでタイル表示」

これも必要あってプラグインを使おうかと色々と試したものの、思った通りに動かず、しょうがないのでテンプレートをいじってcssで対応。
投稿した記事のサムネイルだけをタイル上に表示して、各記事の詳細は大きなイメージで表示するって言うところがポイント。

書くと簡単そうなんだけど、意外と面倒でした・・。

ul.gallerylist{
width: 800px; margin: 0px; padding: 0px;
}
ul.gallerylist li{
float: left; width: 150px; list-style: none outside; margin: 0px; text-align: center;
}
ul.gallerylist li img{
width: 150px; height: 150px; margin: 0px 15px 10px;
}

<ul class="gallerylist">
<?php query_posts('cat=5 & showposts=50'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) :
the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php $attachments = get_children(array('post_parent' => get_the_ID(), 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
        if ( ! is_array($attachments) ) continue;
        $count = count($attachments);
        $first_attachment = array_shift($attachments); ?>
<?php echo wp_get_attachment_image($first_attachment->ID); ?></a><?php the_title(); ?></li>
	<?php endwhile; ?>
	<?php endif; ?>
</ul>

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です