一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works
今回はサムネイルを表示します。結構面倒くさいのですが。
まずサムネイルをアップロードするときに縮小された画像を生成する必要があります。そうしないと極大画像が小さくなっただけで表示されるのでなまら重たくなってしまいます。
function.phpに「set_post_thumbnail_size( );」を記入すれば、サムネイルのサイズを指定することができます。
set_post_thumbnail_size( 200, 300 );
こんな設定にしてみました。少し大きめ。
サムネイル画像を表示するには「the_post_thumbnail」を利用します。
index.phpを編集します。
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php the_post_thumbnail();?>
<h2 class="entryTitle"><a href="<?php the_permalink('post-thumbnail', array( 'class'=>'alignright' )) ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<?php wp_link_pages(array('before' => '<div class="page-link">Pages', 'after' => '</div>')); ?>
<div class="postmetadata">
<span
class="date">update: <?php the_time('Y/m/d') ?></span><?php the_tags(__(' tags: ', 'wsc7'), ', ', ''); ?>
<?php the_category(', ') ?>
</div>
</div>
<hr/>
<?php endwhile; ?>
画像が表示されました。
これをdivなどで囲い、良い感じに調整いたします。
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="thumbnails"><!-- サムネイルを囲む-->
<?php the_post_thumbnail();?>
</div>
<div class="contents"><!-- コンテンツ部分を囲む-->
<h2 class="entryTitle"><a href="<?php the_permalink('post-thumbnail', array('class' => 'alignright')) ?>"><?php the_title(); ?></a>
</h2>
<?php the_excerpt(); ?>
<?php wp_link_pages(array('before' => '<div class="page-link">Pages', 'after' => '</div>')); ?>
<div class="postmetadata">
<span class="date">update: <?php the_time('Y/m/d') ?></span><?php the_tags(__(' tags: ', 'wsc7'), ', ', ''); ?>
| <?php the_category(', ') ?>
</div>
</div>
</div>
<hr/>
<?php endwhile; ?>
画像とその下のコンテンツ部分をそれぞれdivで囲いました。
その後CSSにより色々と手直し。
こういう感じにしてみました。オサレです。ね。
div.thumbnails{
position: absolute;
z-index: 1;
}
div.thumbnails:before{
content: "";
position: absolute;
z-index: 2;
width: 100%;
height: 500px;
background-color: rgba(255,255,255,0.8);
}
div.contents{
padding-left: 10px;
position: absolute;
z-index: 3;
}
div.post{
position: relative;
z-index: 2;
overflow: hidden;
height: 200px;
}
div.post:after{
content: ".";
clear: both;
}
cssはこんな感じにしてみました。