SnowNotes
archive

Wordpressでカテゴリー毎に記事一覧を表示する

wordpressでカテゴリーごとの記事一覧を表示させるページの作成方法を解説。

category.phpのファイルを用意し、カテゴリ一毎の記事の投稿一覧ページを作成する。

ステップとしては以下のようになる。

  1. <?php the_category ?>でカテゴリーを表示
  2. category.phpのファイルを用意する
  3. category.phpで記事一覧を表示するためのコードを追加

では順を追ってみていく。

1.<?php the_category ?>でカテゴリーを表示

まずはすでに記事一覧を表示させているindex.phpに、カテゴリーを表示させる。

<?php the_category ?>というテンプレートタグを使うことによって、カテゴリーを表示させることができる。

foreach文かwhile文で記事一覧を表示させていると思うが、そのループ文の中で<?php the_category ?>を書くことで、それぞれのカテゴリーを表示できる。

例えば上記画像の例で言うと、下記のようなコードになる。

`<section class = "">
  <div class = "">
    <div class="">
      <?php
        $args = array(
          'posts_per_page' => 3 // 表示件数の指定
        );
        $posts = get_posts( $args );
        foreach ( $posts as $post ): // ループの開始
        setup_postdata( $post ); // 記事データの取得
      ?>
      <dl class="">
        <a href="<?php the_permalink(); ?>">　// 記事リンク取得
          <dt><?php the_time("Y.n.j"); ?></dt>　// 日時取得
          <dd class="">
            <span><?php the_title(); ?></span>　// タイトル取得
          </dd>
        </a>
        <?php the_category(); ?> // カテゴリー取得
      </dl>
      <?php
        endforeach; // ループの終了
        wp_reset_postdata(); // 直前のクエリを復元する
      ?>
    </div>
    <div class="">
      <a href="<?php bloginfo('url');?>/news" class="">news</a>
    </div>
  </div>
</section>`

これからcategory.phpを用意していくが、用意していない状態でカテゴリーをクリックすると、index.phpのページに戻るようになっている。

2.category.phpのファイルを用意する

次にcategory.phpのファイルを用意する。

このファイルを用意することで、「〇〇/category/カテゴリー名」というURLでページを表示させることができる。

例えば、sportsというカテゴリーを用意すれば、URLは「〇〇/category/sports」という形になる。

テスト表示させてみる

category.phpに試しに下記のようなテストコードを書いてみる。

`<?php get_header() ;?>

カテゴリーPHP


<?php get_footer() ;?>`

この状態で、上記の画像のsportsカテゴリーをクリックする。

すると、「〇〇/category/sports/」という形でURLが表示され、ページが表示されていることがわかる。

3. 記事一覧のためのPHPコードを記述

category.phpに記事一覧を表示させる。

今回の例では下記のようなテンプレートタグを使った。

  1. <?php single_cat_title() ?> … カテゴリー毎のタイトルを表示
  2. <?php the_time(“Y.n.j”); ?>… 日時を表示
  3. <?php the_title(); ?> … タイトルを表示

全体のコードを表示させると、下記のような形になる。

`<?php get_header(); ?>

<!— ニュース項目—>
<div class = "">
<div class = "">
<div class = "">
<?php single_cat_title() ?>
</div>
<div class="">
<?php if(have_posts()): while(have_posts()):the_post(); ?>
<dl class="">
<a href=”<?php the_permalink(); ?>”>
<dt><?php the_time(“Y.n.j”); ?></dt>
<dd class=“news__title”>
<span><?php the_title(); ?></span>
</dd>
</a>
</dl>
<?php endwhile;?>
</div>
　　<!— ページナビをつける場合—>
<div class="">
<?php if(function_exists(‘wp_pagenavi’)): ?>
<?php wp_pagenavi(); ?>
<?php else: ?>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>


<?php get_footer(); ?>`

以上がカテゴリー毎に記事一覧を表示する方法となる。

自作テーマの作成方法まとめてます

下記のリンクに自作テーマの作成方法をまとめた。

[st-card myclass="" id=3189 label="" pc_height="" name="" bgcolor="" color="" fontawesome="" readmore=“on”]