HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ポストサムネイルの表示ループ

WPでポストサムネイルと一部記事を出すループ。
<ul class="block-three">
<!-- 最新記事列 -->
<?php if (have_posts()) : ?>
<!-- Filter -->
<?php query_posts("cat=5"); ?>
<!-- / Filter -->
<!-- 投稿ループ -->
<?php while (have_posts()) : the_post(); ?>
<!-- アイテム -->
<li class="item">
<div class="item-img"><a href="<?php the_permalink(); ?>"><?php
if ( has_post_thumbnail() ) the_post_thumbnail(array(300,200));
else echo '<img src="'.get_template_directory_uri().'/images/noimage-630x420.jpg" />';
?></a></div>
<div class="item-date"><?php echo get_post_time('M j, Y'); ?></div>
<div class="item-cat"><?php the_category(' / '); ?></div>
<h2 class="item-title" id="post-<?php the_ID(); ?>"><a href="<?php the_permalink(); ?>"><?php echo mb_substr($post->post_title, 0, 27); ?></a></h2>
<p class="item-text"><?php echo mb_substr(get_the_excerpt(), 0, 69); ?><a href="<?php the_permalink(); ?>">...</a></p>
<p class="bt-dl"><a href="<?php the_permalink(); ?>">続きを読む</a></p>
</li>
<!-- / アイテム -->
<?php endwhile; ?>
<!-- / 投稿ループ -->
</ul>
<!-- お行儀よく、クエリーをリセットしておく -->
<?php wp_reset_query(); ?>
<!-- / お行儀よく、クエリーをリセットしておく -->

<style tyle="text/css">
/* ************************************************ 
*	Blocks
* ************************************************ */
.block-two,
.block-three,
.block-four,
.block-five,
.block-six {
  list-style: none;
  margin-left: -3.1914893617021276%;
  margin-bottom: 0;
}
.block-two:after,
.block-three:after,
.block-four:after,
.block-five:after,
.block-six:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.block-two > li,
.block-three > li,
.block-four > li,
.block-five > li,
.block-six > li {
  height: auto;
  float: left;
  margin-bottom: 1.5em;
  margin-left: 3.1914893617021276%;
}
.block-two > li {
  width: 46.80851063829787%;
}
.block-three > li {
  width: 30.141843971631204%;
}
.block-four > li {
  width: 21.80851063829787%;
}
.block-five > li {
  width: 16.80851063829787%;
}
.block-six > li {
  width: 13.47517730496454%;
}
/* ************************************************ 
*	item
* ************************************************ */
.item {
}
.top-2retsu {
    width: 100%;
    margin: 0 auto 0px auto;
}
.top-2retsu img {
    width: 100%;
}
.first-block {
    float: left;
    width: 50%;
    padding: 30px 0px 30px 0;
}
.last-block {
    float: right;
    width: 47%;
    font-size: 14px;
    text-align: left;
    white-space: normal;
    vertical-align: middle;
    padding: 30px 0 20px 0;
}
</style>

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー