Learning site for website creation

20：カテゴリー一覧表示用テンプレート追加

公開日:2019年07月14日 更新日:2019年07月15日

グローバルメニューの「Works」「Blog」をクリックしてもテンプレート「index.php」の「最後の砦」が表示され、カテゴリー一覧が表示されない状況です。

カテゴリー一覧表示用テンプレート「category.php」を作成します。

専用テンプレート

必要に応じて専用のテンプレートを追加できます。他にも追加できるファイルがありますが主なファイルは以下です。

front-page.php フロントページ表示用テンプレート
home.php 主に固定ページの上にあるブログ投稿一覧表示用テンプレート
single.php 投稿詳細ページ表示用テンプレート
page.php 固定ページ表示用テンプレート
archive.php アーカイブ一覧全般表示用テンプレート
category.php カテゴリー一覧表示用テンプレート
tag.php タグ一覧表示用テンプレート
search.php 検索結果一覧表示用テンプレート
date.php 日付別一覧表示用テンプレート
404.php 404エラー表示用テンプレート
header.php 共通ヘッダーパーツテンプレート
footer.php 共通フッターパーツテンプレート
sidebar.php 共通サイドバーテンプレート
searchform.php 検索フォーム用テンプレート
comments.php コメント用テンプレート

テーマ内に専用テンプレートを追加

カテゴリー一覧表示用テンプレートの「category.php」を追加します。 

フォルダ構成

  • lesson01
    • imgフォルダ
    • category.php（追加）
    • front-page.php
    • functions.php
    • index.php
    • screenshot.png
    • style.css

category.php

コーディング済みHTMLから文章構造をコピーします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ブログ一覧 - ポートフォリオサイト</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->


<div class="blog">
  <div class="inner">
    <h2 class="title">Blog</h2>
    <div class="subtitle">ブログ</div>
    <div class="flex">
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item">
        <a href="single.html">
          <div class="image">
            <img src="img/thumbnail.jpg" alt="ブログタイトル">
          </div>
          <div class="item-title">HTML基本タグ</div>
          <div class="item-text">HTMLの基本構想と記述ルールについてまとめています。</div>
          <div class="item-date">2019年05月05日</div>
        </a>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .blog -->

<div class="footer">
  <div class="inner">
    <div class="copyright">
      © 2019 ポートフォリオ.
    </div><!-- .copyright -->
  </div><!-- .inner -->
</div><!-- .footer -->
</body>
</html>

ヘッダーモジュール読み込み

変更前

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>ブログ一覧 - ポートフォリオサイト</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

変更後

<?php
get_header();
?>
<div class="header">
  <div class="inner">
    <div class="flex">
      <div class="flex-item logo">
        <a href="index.html">
          <img src="img/logo.png" alt="ロゴ">
        </a>
      </div><!-- .flex-item -->
      <div class="flex-item nav">
        <ul class="flex">
          <li class="flex-item">
            <a href="#">Works</a>
          </li>
          <li class="flex-item">
            <a href="archive.html">Blog</a>
          </li>
          <li class="flex-item">
            <a href="index.html#profile">Profile</a>
          </li>
        </ul>
      </div><!-- .flex-item -->
    </div><!-- .flex -->
  </div><!-- .inner -->
</div><!-- .header -->

フッターモジュール読み込み

変更前

<div class="footer">
  <div class="inner">
    <div class="copyright">
      © 2019 ポートフォリオ.
    </div><!-- .copyright -->
  </div><!-- .inner -->
</div><!-- .footer -->
</body>
</html>

変更後

<?php
get_footer();

カテゴリー表示一覧のテンプレート優先度

優先度（高い ←　→ 低い）
category-スラッグ.php category-カテゴリーID.php category.php archive.php index.php

このページで出てくる関数

WordPress関数は「公式サイトのドキュメント」で確認しましょう。

WordPress関数

get_header() get_footer()

表示確認

以下URLにアクセスするとカテゴリー一覧が表示されます。

http://localhost/WordPressフォルダ名/category/カテゴリースラッグ/

表示テンプレートが「index.php」から専用テンプレート「category.php」に変更されていることを確認しましょう。

 

※欠席者対応：lesson11 – lesson12

 

コンテンツ一覧
同じカテゴリーのコンテンツ
MAMPにWordPressをインストール
  • PHP
  • WordPress
公開日:2024年01月10日 更新日:2024年01月12日
WordPressでメモリエラーが表示される
  • WordPress
公開日:2023年12月20日 更新日:2024年01月10日
プラグイン：カスタム投稿を表示する「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2024年01月26日
プラグイン：カスタム投稿に新しいカテゴリーを作成「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2023年10月27日
プラグイン：カスタム投稿を作成「Custom Post Type UI」
  • WordPress
公開日:2023年10月26日 更新日:2023年10月27日
XAMPP環境で画像ブロックの回転やズームが機能しない
  • WordPress
公開日:2023年03月11日
WordPressの各種設定のデフォルト値を確認
  • WordPress
公開日:2023年03月05日
WordPressのパスワードをphpMyAdminから変更
  • WordPress
公開日:2023年01月10日 更新日:2024年01月25日
別サイトにWordPress記事一覧を表示する
  • WordPress
公開日:2022年12月03日
WordPressで予約投稿が失敗するときの対応
  • WordPress
公開日:2022年11月06日 更新日:2023年11月06日
備忘録
2021年の購入したもの
備忘録一覧
はじめてレンタルサーバを利用する
コンテンツ一覧
ページトップへ戻る