BLOG

自作WordPressテーマ『カテゴリー(投稿記事一覧)ページ』の作り方

kanri
本記事はこんな方にオススメです
  • 自作(オリジナル)WordPressテーマを作成したいとお考えの方
  • 自作(オリジナル)WordPressテーマにカテゴリーページ(記事一覧)を追加したい方
  • WordPressを利用している or 利用予定 の方
  • Webデザイナーを目指している方

今回は、自作WordPressテーマにカテゴリーページ(投稿記事一覧ページ)を追加する方法について解説します。

下記の2STEPで行います。

WordPressカテゴリーページ作成の手順【2STEP】
  • 【STEP1】WordPress管理画面上でカテゴリーを作る
  • 【STEP2】WordPressのカテゴリーページをコーディングする

事前に静的(HTML・CSS)にコーディングしておくことをおすすめします。

自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください!

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】

STEP1:WordPress管理画面上でカテゴリーを作る

まずは、WordPress管理画面上で、カテゴリーを作成しましょう。

1.[投稿]-[カテゴリー]をクリック

2.[未分類]をクリック

3.[名前]と[スラッグ]を入力し、[更新]をクリック

名前は日本語でも大丈夫です。

スラッグはURLになるので、半角英数字と半角ハイフン(-)のみ使用可能です。

入力例)

名前:お知らせ
スラッグ:information

※スラッグをローマ字表記の「oshirase」にしてしまうとちょっとかっこ悪いので、英語にするのがおすすめです。

えりー
えりー

ただ、英語だと文字数が多すぎる場合や、馴染みがなさすぎる単語の場合は、日本語をローマ字で表記しても良いかもしれません。

《2つ目以降のカテゴリー登録》

[投稿]-[カテゴリー]の画面左側の部分から追加します。

《カテゴリーを階層構造にしたい場合》

最初に親カテゴリーを作成し、子カテゴリー作成時に親カテゴリーを選んでください。

例)

親カテゴリー:東京都 ←こちらから先に作成する

子カテゴリー:豊島区 ←子カテゴリー作成時に親カテゴリー「東京都」を選択

STEP2:WordPressのカテゴリーページをコーディングする

次に、カテゴリーページをコーディングしていきます。

今回は、例としてお知らせページを作成したいと思います。HTML・CSSの解説は割愛していますので、予めご了承ください。

事前に静的(HTML・CSS)にコーディングしておくことをおすすめします。

1.カテゴリーページ用のファイルを用意する

カテゴリーページのファイル名は

category-slug.php

となります。

slugの部分に上記カテゴリーを作る際に決めたスラッグ名を入力してください。

例)category-information.php

WordPressのテーマフォルダ内に、PHP形式で保存します。

2.ヘッダー(get_header)とフッター(get_footer)を記載

1<?php get_header(); ?>
2<!-- ここにコンテンツを記載 -->
3<?php get_footer(); ?>

3.コンテンツを静的にコーディングし、ヘッダーとフッターの間に記載

1<?php get_header(); ?>
2<main> 
3    <h2>お知らせ</h2>
4    <ul>
5      <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
6      <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
7      <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
8      <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
9    </ul>
10</main>
11<?php get_footer(); ?>

上記2~10行目はサイトによって変わります。あくまで一例です。

4.記事を繰り返し表示するためのコードを記載

1<ul>
2<?php while ( have_posts() ): the_post(); ?>
3   <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
4<?php endwhile; ?>
5</ul>

コードが見づらくならないように、ここからは、<ul>~</ul>の部分だけ抜き出して解説していきます。

上記例では4つあった<li>~</li>の部分を、PHPを使って繰り返し表示させるようにしてみましょう。

whileを使うことで、繰り返し表示させることができます。

4つあった<li>~</li>を1つにし、2行目と4行目を追加しています。

えりー
えりー

記事表示数はWordPress管理画面上から設定できるので、ここではとりあえず、繰り返し表示するコードだけを書いておきます。

《記事表示数の変更方法》

[設定]-[表示設定]「1ページに表示する最大投稿数」を変更します。

5.「もし記事があったら表示する」という条件を追加

1<?php if ( have_posts() ) : ?>
2<ul>
3<?php while ( have_posts() ): the_post(); ?>
4 <li><a href=""><span class="date">2023/00/00</span>タイトルが入ります</a></li>
5<?php endwhile; ?>
6</ul>
7<?php else : ?>
8<p>ただいま準備中です。</p>
9<?php endif; ?>

ifを使って、もし記事があったら記事を表示する、なかったら「準備中」を表示する、という条件を追加してみましょう。

上記例では、1行目・7~9行目に追記しています。

1行目…もし記事があったら、2~6行目を表示する

7~9行目…記事がなかったら、「ただいま準備中です。」を表示する

という意味です。

6.リンクと投稿日を出力するコードを記載

1<?php if ( have_posts() ) : ?>
2<ul>
3<?php while ( have_posts() ): the_post(); ?>
4<li>
5<a href="<?php the_permalink(); ?>">
6<span class="date"><?php echo get_the_date('Y/m/d'); ?></span>
7タイトルが入ります
8</a>
9</li>
10<?php endwhile; ?>
11</ul>
12<?php else : ?>
13<p>ただいま準備中です。</p>
14<?php endif; ?>

リンクと日付の部分を、PHPのコードに差し替えています。(上記5・6行目)

リンクは、the_permalink();

投稿日は、echo get_the_date();

で出力できます。

()の中の記述で出力される形式が変わります。

echo get_the_date(); → 2023年5月16日

echo get_the_date(‘Y/m/d’); → 2023/05/16

7.タイトルを出力するコードを記載

1<?php if ( have_posts() ) : ?>
2<ul>
3<?php while ( have_posts() ): the_post(); ?>
4<li>
5<a href="<?php the_permalink(); ?>">
6<span class="date"><?php echo get_the_date('Y/m/d'); ?></span>
7<?php
8      if ( mb_strlen( $post->post_title ) > 30 ) {
9          $title = mb_substr( $post->post_title, 0, 30 );
10          echo $title . "...";
11       } else {
12          echo $post->post_title;
13       }
14 ?>
15</a>
16</li>
17<?php endwhile; ?>
18</ul>
19<?php else : ?>
20<p>ただいま準備中です。</p>
21<?php endif; ?>

タイトルの部分を、PHPのコードに差し替えています。(7~14行目)

タイトルが31文字以上あったら、30文字まで表示して最後に「…」を表示、

30文字以下だったら、そのまま表示

という意味です。

単純にタイトル全文を表示したい場合は、下記の1行だけでOK

1<?php the_title(); ?>

8.ページネーション(ページャー)の追加

1<?php if ( have_posts() ) : ?>
2<ul>
3<?php while ( have_posts() ): the_post(); ?>
4<li>
5<a href="<?php the_permalink(); ?>">
6<span class="date"><?php echo get_the_date('Y/m/d'); ?></span>
7<?php
8      if ( mb_strlen( $post->post_title ) > 30 ) {
9          $title = mb_substr( $post->post_title, 0, 30 );
10          echo $title . "...";
11       } else {
12          echo $post->post_title;
13       }
14 ?>
15</a>
16</li>
17<?php endwhile; ?>
18</ul>
19<?php else : ?>
20<p>ただいま準備中です。</p>
21<?php endif; ?>
22<?php the_posts_pagination(); ?>

endifの下に、ページネーション(ページャー)のコード「the_posts_pagination();」を追加しています。(22行目)

《プラグイン『WP-PageNavi』を使う場合》
プラグインをインストールしてから、
the_posts_pagination();の代わりに、wp_pagenavi();と記載します。

プラグイン『WP-PageNavi』を使う場合は、下記記事をあわせてご覧ください。

あわせて読みたい
WordPressプラグイン『WP-PageNavi』設定方法&CSS【コピペOK】
WordPressプラグイン『WP-PageNavi』設定方法&CSS【コピペOK】

完成版コード

完成したコードはこちらです。

1<?php get_header(); ?>
2<main> 
3    <h2>お知らせ</h2>
4<?php if ( have_posts() ) : ?>
5<ul>
6<?php while ( have_posts() ): the_post(); ?>
7<li>
8<a href="<?php the_permalink(); ?>">
9<span class="date"><?php echo get_the_date('Y/m/d'); ?></span>
10<?php
11      if ( mb_strlen( $post->post_title ) > 30 ) {
12          $title = mb_substr( $post->post_title, 0, 30 );
13          echo $title . "...";
14       } else {
15          echo $post->post_title;
16       }
17 ?>
18</a>
19</li>
20<?php endwhile; ?>
21</ul>
22<?php else : ?>
23<p>ただいま準備中です。</p>
24<?php endif; ?>
25<?php the_posts_pagination(); ?>
26</main>
27<?php get_footer(); ?>

(補足)アイキャッチ画像を出力したい場合

今回の例ではアイキャッチ(サムネイル)画像は出力していませんが、アイキャッチ(サムネイル)画像も出力したい場合は以下のように記載します。

1<?php 
2  if (has_post_thumbnail()) {
3      the_post_thumbnail('thumbnail');
4  } else {
5      echo '<img src="/img/noimage.jpg" alt="画像準備中です">';
6  }
7?>

もしアイキャッチ画像があったら、サムネイルのサイズで表示する

なかったら、noimage画像を表示する

という意味です。

※画像サイズの設定方法は、下記をご参照ください。

noimage画像を予め用意しておく必要があります。

《画像サイズの設定方法》

画像サイズは[設定]-[メディア]で設定できます。

下記のように記載すると、それぞれのサイズの画像を出力することができます。

1the_post_thumbnail( 'thumbnail' ); // サムネイル
2the_post_thumbnail( 'medium' ); // 中サイズ
3the_post_thumbnail( 'large' ); // 大サイズ
4the_post_thumbnail( 'full' ); // フルサイズ

(補足)本文を出力したい場合

今回の例では本文は出力していませんが、本文も出力したい場合は、以下のように記載します。

▼本文(全文出力)

1<?php the_content(); ?>

▼本文(一部出力)

1<?php
2   if ( mb_strlen( get_the_excerpt() ) > 39 ) {
3        $txt = mb_substr( get_the_excerpt(), 0, 39 );
4        echo $txt . "...";
5   } else {
6        echo get_the_excerpt();
7   }
8?>

本文が40文字以上あったら、39文字まで表示して最後に「…」を表示、

39文字以下だったら、そのまま表示

という意味です。

最後に:WordPressについてのご相談もお気軽にどうぞ!

空創デザインオフィスでは、ホームページ制作・リニューアル、WordPress導入、自分でホームページを作りたい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください!(お見積りは無料です)

あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
自作WordPressテーマを作ろう【過去記事まとめ】
ABOUT ME
えりー
えりー
Web・グラフィックデザイナー / ブロガー
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです!
記事URLをコピーしました