Mode KIKU- モードキク

モードキクは伊太利屋ブランドを中心に販売している大阪のブティックです。

お問い合わせ:06-6954-6636

未分類

WordPress 固定ページに記事一覧表示

投稿日:2015年9月15日 更新日:

WordPress 固定ページに記事一覧表示方法

 

PHP情報はこちら

<div id="feed">
<dl>
<?php query_posts('post_type=post&showposts=3'); ?>
<?php if(have_posts()) : while (have_posts()) : the_post(); ?>

  <dt><span><?php the_category(', ') ?></span> <!-- カテゴリ名表示 --><date><?php echo get_the_date(); ?></date></dt>
<dd><a href="<?php the_permalink();?>"><b><?php the_title(); ?></b></a>
     <br /><?php the_excerpt(); ?>
<a href="<?php the_permalink();?>">続きを読む</a>
</dd>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</dl>
</div>

ついでに

CSS、装飾の情報を記載いたします。

<style type="text/css">
#feed {
    width: 100%;
    margin: 0 auto;
    /* border: 1px solid #666666; */
    /* border-bottom: none; */
}
#feed dl {
    font-size: 13px;
}
/* スマホ
-------------------------------------------------- */
@media only screen and (max-width:570px) {
#feed {
    /* background-color: #EEEEEE; */
}
#feed dt, #feed dd {
   padding: 8px 20px;
}
#feed dt {
  float: none;
  background-color: #AAAAAA;
  border-top:1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
}
#feed dd {
    /* border-top: 1px solid #666666; */
    /* border-bottom: 1px solid #666666; */
}
}
/* PC
-------------------------------------------------- */
@media only screen and (min-width: 571px) {
#feed {
    /* background-color: #EEEEEE; */
     background-image: url(<?php bloginfo('stylesheet_directory');?>/images/bg.png);
     background-repeat: repeat-y;
     background-position: -180px 0;
/* dlで背景画像をyリピートし、dtの背景色のように見せる。positionはdtの幅に応じて調整 */
}
#feed dt, #feed dd {
   padding: 10px;
}
#feed dt {
   clear: both;
   float: left;
   width: 100px; /* 幅を指定 */
    /* border-top: 1px solid #FFFFFF; */
}
#feed dd {
   padding-left: 130px; /* dtの分、左にpaddingを取る */
    /* border-top: 1px solid #FFFFFF; */
    /* border-bottom: 1px solid #666666; */
    /* border-left: 1px solid #FFFFFF; */
}
}
</style>

 

関連記事

no image

スマホTEL対応

電話でのお問い合わせはこちら header.phpやindex.phpの表示したい場所に下記を追加ください。 (電話番号はお好みの番号に変更ください。) 「電話でのお問い合わせはこちら」の部分を電話番 …

no image

テスト画像

テスト