インハウスWebデザイナーと制作会社Webデザイナーの違い【実体験】
kanri
空創デザインオフィス
自作WordPressテーマ『カテゴリー（投稿記事一覧）ページ』の作り方
kanri
本記事はこんな方にオススメです
- 自作（オリジナル）WordPressテーマを作成したいとお考えの方
- 自作（オリジナル）WordPressテーマにカテゴリーページ（記事一覧）を追加したい方
- WordPressを利用している or 利用予定 の方
- Webデザイナーを目指している方
今回は、自作WordPressテーマにカテゴリーページ（投稿記事一覧ページ）を追加する方法について解説します。
下記の２STEPで行います。
WordPressカテゴリーページ作成の手順【２STEP】
- 【STEP1】WordPress管理画面上でカテゴリーを作る
- 【STEP2】WordPressのカテゴリーページをコーディングする
自作WordPressテーマ作成については、下記記事でまとめてご紹介しています。ぜひあわせてご覧ください！
あわせて読みたい
自作WordPressテーマを作ろう【過去記事まとめ】
Contents
STEP1：WordPress管理画面上でカテゴリーを作る
まずは、WordPress管理画面上で、カテゴリーを作成しましょう。
1.[投稿]-[カテゴリー]をクリック
2.[未分類]をクリック
3.[名前]と[スラッグ]を入力し、[更新]をクリック
名前は日本語でも大丈夫です。
スラッグはURLになるので、半角英数字と半角ハイフン（-）のみ使用可能です。
入力例）
名前：お知らせ
スラッグ：information
※スラッグをローマ字表記の「oshirase」にしてしまうとちょっとかっこ悪いので、英語にするのがおすすめです。
ただ、英語だと文字数が多すぎる場合や、馴染みがなさすぎる単語の場合は、日本語をローマ字で表記しても良いかもしれません。
《2つ目以降のカテゴリー登録》
[投稿]-[カテゴリー]の画面左側の部分から追加します。
《カテゴリーを階層構造にしたい場合》
最初に親カテゴリーを作成し、子カテゴリー作成時に親カテゴリーを選んでください。
例）
親カテゴリー：東京都 ←こちらから先に作成する
子カテゴリー：豊島区 ←子カテゴリー作成時に親カテゴリー「東京都」を選択
STEP2：WordPressのカテゴリーページをコーディングする
次に、カテゴリーページをコーディングしていきます。
今回は、例としてお知らせページを作成したいと思います。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(); ?>上記２～１０行目はサイトによって変わります。あくまで一例です。
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＞の部分だけ抜き出して解説していきます。
上記例では４つあった＜li＞～＜/li＞の部分を、PHPを使って繰り返し表示させるようにしてみましょう。
whileを使うことで、繰り返し表示させることができます。
４つあった＜li＞～＜/li＞を１つにし、２行目と４行目を追加しています。
記事表示数は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を使って、もし記事があったら記事を表示する、なかったら「準備中」を表示する、という条件を追加してみましょう。
上記例では、１行目・７～９行目に追記しています。
１行目…もし記事があったら、２～６行目を表示する
７～９行目…記事がなかったら、「ただいま準備中です。」を表示する
という意味です。
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のコードに差し替えています。（上記５・６行目）
リンクは、the_permalink();
投稿日は、echo get_the_date();
で出力できます。
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のコードに差し替えています。（７～１４行目）
タイトルが31文字以上あったら、30文字まで表示して最後に「…」を表示、
30文字以下だったら、そのまま表示
という意味です。
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();」を追加しています。（２２行目）
プラグイン『WP-PageNavi』を使う場合は、下記記事をあわせてご覧ください。
あわせて読みたい
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画像を表示する
という意味です。
※画像サイズの設定方法は、下記をご参照ください。
《画像サイズの設定方法》
画像サイズは[設定]-[メディア]で設定できます。
下記のように記載すると、それぞれのサイズの画像を出力することができます。
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テーマを作ろう【過去記事まとめ】
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
