テーマ制作【基礎７】「他の記事の一覧ページを作る」

他にもフルーツとフラワーの2ページがあるので、その一覧ページを作ります。

ニュースの一覧を表示するときのテンプレート「category.php」に手を加えて、他の２ページも表示させるようにします。

各ページの一覧表示部分をファイルに分ける

「parts」フォルダーを作成して、その中にニュース、フルーツ、フラワーページの一覧表示部分をパーツとして別ファイルに保存します。

ニュース

<h3><?php the_title(); ?></h3>
<?php the_content(); ?>

フルーツとフラワー

フルーツもしくはフラワーで商品情報を表示している部分を１つコピーして、中身を書き換えます。

<div class="item clearfix">
      <h3><?php the_title(); ?></h3>
      <p class="item-photo"><?php the_post_thumbnail(); ?></p>
      <div class="item-text">
        <h4>商品情報</h4>
        <?php the_content(); ?>
        <p><a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/btn_single.gif" alt="商品の詳細はこちら" width="320" height="60"></a></p>
      </div>
</div>

記事のアイキャッチ画像を表示するコードがこちらです。

<?php the_post_thumbnail(); ?>

条件分岐で読み込むパーツを変える

if-else文を使って、表示している一覧のカテゴリーごとに読み込むパーツを変えます。

if(条件式):
	//実行する処理
else:
	//実行する処理
endif;

「is_category()」で今表示されているページがカテゴリーページかをチェックします。

さらに「()」の中に「’news’」を入れることで、表示されているページがニュースカテゴリーの一覧ページかをチェックできます。

条件に合っているなら「TRUE」を合っていないなら「FALSE」を返します。

if(is_category('news')):
	//実行する処理
else:
	//実行する処理
endif;

include文を使ってパーツを読み込みます。

パスはシングルクォーテーションで囲む必要があります。

include '読み込むファイルまでのパス'

<?php get_header(); ?>

  <!--メインここから-->
  <div class="main">
    <h2><?php single_cat_title(); ?></h2>

    <?php if (have_posts()): ?>
    	<?php while (have_posts()): ?>
			<?php the_post(); ?>

    		<?php if(is_category('news')) : ?>
			<?php include 'parts/news.php'; ?>
        
		<?php else: ?>
			<?php include 'parts/goods.php'; ?>
        
		<?php endif; ?>
        <?php endwhile; ?>
    <?php endif; ?>
  </div>
  <!--メインここまで--> 

<?php get_footer(); ?>

header.phpのリンクを修正

header.phpのグローバルナビゲーションのリンクを修正します。

「news.html」を「category/news/」に、「fruit.html」を「category/fruit/」に、「flower.html」を「category/flower/」に変えます。

  <ul class="nav">
    <li><a href="<?php echo home_url(); ?>">ホーム</a></li>
    <li><a href="<?php echo home_url(); ?>/category/news/">ニュース</a></li>
    <li><a href="<?php echo home_url(); ?>/category/fruit/">フルーツ</a></li>
    <li><a href="<?php echo home_url(); ?>/category/flower/">フラワー</a></li>
    <li><a href="<?php echo home_url(); ?>/company/">店舗情報</a></li>
    <li><a href="<?php echo home_url(); ?>/contact/">お問い合わせ</a></li>
  </ul>

上書き保存したら、リンクをクリックしたら固定ページに飛ぶか確認してみましょう。

以上で終わりです。
お疲れ様でした！

コピーできました！