ホームページ作成会社-Eネット

他のカテゴリーのレイアウトと商品表示形式にしたいカテゴリーのレイアウトは 

全く異なるわけなので、まず、商品表示形式にしたいカテゴリー用の専用のテンプレート 

を作成します。 

例として、当サイトの「ワードプレス・テーマ一覧」の作成方法を記述しておきます。 

まず、管理室で「ワードプレス・テーマ一覧」というカテゴリーを作成します。 

このページのURLは、
../wp-admin/edit-tags.php?action=edit&taxonomy=category&post_type=post&tag_ID=5
と、ページIDは ’5′ です。 

ページID=5ならば、 

category-5.php　とハイフンとカテゴリIDの数字をつけてを作成します。 

*archive.phpをそのままコピーしてファイル名をcategory-5.phpとし、アップしました。 

そのファイル「category-5.php」を商品表示形式に、以下の様にカスタマイズします。 

<?php get_header(); ?>
<div>
<div style="float:right; width:240px;">
<?php include (TEMPLATEPATH . '/sidebar1.php'); ?>
</div>

<div>

 <br><h2>ワードプレス・テーマご選択から完成までの概要</h2>
<div id="info_top">
<div>

 <!-- 上部メッセージループ開始 -->

<?php include('info.php') ?>
<!-- 上部メッセージループ終わり -->

</div>
</div>

</div>

<!-- プロダクト -->

<div id="product3">
 <h2>ワードプレス・テーマ一覧</h2>
<!-- 次ページへのナビ上 -->
<div>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
</div>
<!-- 次ページへのナビ上ここまで -->  
        <?php query_posts($query_string . "&order=ASC"); ?>
 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

  <!-- エントリータイトル -->
  <div>
  <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
  <!-- エントリーの内容 -->
　　　　　　　　　　　<div align="center">（画像をクリックで拡大）</div>
  <?php the_content('詳細...'); ?>
  </div>
<?php endwhile; ?>

</div>
<!-- 次ページへのナビ下 -->
<div>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>

<?php if ($prev_link || $next_link): ?>
<div>
 <div><?php echo $next_link; ?></div>
 <div><?php echo $prev_link; ?></div>
</div>
</div>

<?php endif; ?>
<!-- 次ページへのナビ下ここまで -->  
<?php endif; ?>
</div>
</div>

<div>
<div>
</div>
</div>
<?php get_footer(); ?>

このページのスタイルシートcssは、以下

/* 上部メッセージループ部 */
#info_top{
  width: 522px;
  height:px;
  border: 1px solid #BBB;
  background-color: #F2CCCC;
  margin: 3px 0px 3px 0px;
  line-height:150%;

}

#info_top .inner{
  padding: 0px 0px 2px 5px;
}
/* テーマ一覧ページ */

#content3 h2, #product3 h2{
  margin: 0px 8px 4px 10px;
  height: 30px;
  font-size: 117%;
  font-weight: bold;
  color: #6D8A92;
  text-indent: 5px;
  line-height: 180%;
  border: 0px solid #CCC;
  display: block;
  overflow: hidden;
  background: url("images/nav2.png") no-repeat right top;
  width:540px;
  padding-top: 3px;
}

/*Product*/
#product3 {
  clear: both;
  margin: 5px 0 5px 10px;
  width:540px;
}
#product3 .box3{
  float: left;
  width: 160px;
  height: 240px;
  overflow: hidden;
  margin: 5px 3px 5px 2px;
  padding: 5px;
  border: 1px solid #CCC;
  font-size: 12px;
  text-align: left;
  line-height: 120%;
}

#product3 .box3 p{
  margin: 5px;
  font-size: 12px;
  line-height: 120%;
}

#product3 img{
  margin: 3px 0;
  border-style: none;
  text-align: center;
  width:140px;
  height:105px;
}

.art-content {
  float:left;
  width:540px;
  margin-left:10px;
  margin-right:5px;
}
.nextpage {
  margin-top:10px;
  margin-bottom:10px;
  width:520px;
  height:10px;
  text-align:left;
  margin-left:20px;
}

*ちなみに、ページナビにはこちらのプラグインを使用しています。