この記事にはプロモーションが含まれています。

【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する

【WordPress】カテゴリー一覧ページとカテゴリー個別ページを作成する

ケケンタ

WordPressのオリジナルテーマを作成しているけどカテゴリーのアーカイブページや個別ページの作成方法が分からない……

今回はこのようなお悩みをお持ちの方に向けて、WordPressで

  • カテゴリーアーカイブページ
  • カテゴリー個別ページ

を作成する方法を解説します。

この記事を読むと分かること
  • カテゴリーのアーカイブページを作成する方法
  • カテゴリーの個別ページを作成する方法
  • 作成した各ページをリンクで繋ぐ方法
  • 特定のカテゴリー専用のアーカイブページを作成する方法
目次

Web制作を仕事にしたいなら

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

 ̄ ̄ ̄

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

 Amazon Prime 

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る 
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

  • Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
  • 会員の自動更新を解除しておく=期限が来たら自動解約
  • 1~3ヶ月ぐらいするとAmazonのカート画面再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも3回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

作業全体の流れ

カテゴリーのアーカイブページと個別ページを作成する流れ
  • カテゴリーのアーカイブページ用のファイルを用意する
  • カテゴリーの個別ページ用のファイルを用意する
ケケンタ

それでは順番に解説していきます。

【手順①】カテゴリーのアーカイブページ用のファイルを用意する

早速ですが、ここから実際に必要なファイルの作成を行っていきます。

掲載するディレクトリはローカル上でのものになりますが、実際にファイル配置する際にはご自身の環境(本番サーバー)で作業をお進めください。

ケケンタ

それでは実際にファイルを作成する手順をご説明します。

STEP
テーマディレクトリ直下に「category.php」を作成する

テーマディレクトリ直下にカテゴリーアーカイブ用のPHPファイル(テンプレートファイル)を作成します。

このとき、ファイル名は

category.php

として下さい。

ファイルを作成した様子

category.phpを作成
category.phpを作成

category.phpを作成することで、カテゴリーアーカイブページへアクセスしようとしたとき、WordPressが自動で判断してcategory.phpを呼び出してくれます。

もしも「特定のカテゴリー専用」のアーカイブページを作成したい場合は、ファイル名を以下のようにして下さい。

category-[カテゴリーのスラッグ].php

(例)カテゴリーのスラッグが「sample」の場合

category-sample.php

こうすることで、そのカテゴリーのアーカイブページへアクセスしようとしときには、「category-[カテゴリーのスラッグ].php」が呼び出されるようになります。

STEP
作成したファイルの中にソースコードを記述する

続いて作成したファイルの中に以下のソースコードを記述します。

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
    <!-- ループを回してカテゴリーの各記事を出力 -->
    <?php while ( have_posts() ) : the_post(); ?>
        <p>
            <!-- 個別ページへのリンク -->
            <a href="<?php the_permalink(); ?>">
                <!-- 記事タイトル -->
                <?php the_title(); ?>
            </a>
        </p>
    <?php endwhile; ?>
<?php endif; ?>

<?php get_footer(); ?>

上記は「『リンク付きのタイトル』を箇条書きで出力するソースコード」です。

【手順②】カテゴリーの個別ページ用のファイルを用意する

【手順①】でカテゴリーアーカイブページが作成できました。

続いては、アーカイブページで生成している個別リンクから繋がる個別ページを作成していきます。

STEP
テーマディレクトリ直下に「single.php」を作成する

個別ページ用のPHPファイル(テンプレートファイル)を作成します。

このとき、ファイル名は

single.php

として下さい。

ファイルを作成した様子

single.phpを作成
single.phpを作成

single.phpはWordPress上では「投稿」の個別ページ用ファイルとして認識されます。
つまり、【手順①】で生成されたリンクがクリックされて個別ページへアクセスしようとすると、このsingle.phpが呼び出されます。

※すでにsingle.phpが作成済みであれば、この【手順②】の作業は不要ということになります。
(必要に応じて以下のSTEP2のソースコードに記載の「アーカイブページへのリンク」部分を既存のsingle.phpに追記してください)

STEP
作成したファイルの中にソースコードを記述する

続いて作成したファイル(single.php)の中に以下のソースコードを記述します。

<?php get_header(); ?>

<!-- タイトル -->
<?php the_title(); ?>
	
<!-- カスタム投稿本文 -->
<?php the_content(); ?>
		
<!-- アーカイブページへのリンク -->
<?php 
 	$cat = get_the_category()[0];
    $cat_id = $cat->cat_ID;
?>
<a href="<?php echo get_category_link( $cat_id ); ?>">カテゴリーアーカイブへのリンク</a>

<?php get_footer(); ?>

ハイライト行(10~14行目)がカテゴリーアーカイブページへのリンク関連の記述になっています。

ケケンタ

以上で個別ページの作成も完了です!

今回紹介したソースコードではアーカイブページと個別ページ間を行き来できるよう両方にお互いのリンクを設置しました。

まとめ

ケケンタ

以上がカテゴリーのアーカイブページと個別ページを作成する方法でした!

改めて大まかな手順を見てみましょう。

カテゴリーのアーカイブページと個別ページを作成する流れ
  • カテゴリーのアーカイブページ用のファイルを用意する
  • カテゴリーの個別ページ用のファイルを用意する

分からないときは難しく感じる作業も、このように手順が明確化するとハードルが下がります。

この記事をご覧いただき、その一助となったなら幸いです。

ケケンタ

それでは、最後までご覧いただきありがとうございました!

当ブログではWordPressやWeb制作、PHPに関するお役立ち情報を発信しています。

ご興味のある方はぜひほかの記事もご覧いただけると嬉しいです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次