【SWELL】カスタム投稿のカテゴリー（タグ）記事一覧ページ（アーカイブページ）を作成する方法

WordPressテーマ「SWELL」でカスタム投稿のカテゴリー記事一覧ページを作成する方法をご紹介します。

WordPressでカスタム投稿タイプを導入した時、カスタム投稿のカテゴリーまたは、タグ一覧ページを表示させるにはカスタマイズが必要です。

通常の投稿では、デフォルトでカテゴリー一覧ページが作成されます。

ここでは、SWELLテーマのショートコードの機能を使う場合と、function.phpにコードを追加する２通りの方法をご紹介します。

どちらもテンプレートファイルを新たに作成する必要はなく、簡単な方法です。

カテゴリーアーカイブページ（カテゴリー記事一覧）について

カテゴリーアーカイブページとは、以下の画像のようなカテゴリー別の記事一覧のことです。
以下、タグアーカイブページも同様です。

WordPressでは、カテゴリーアーカイブページのURLはデフォルトで以下のようになっています。

サイトURL/category/カテゴリースラッグ/

例えば、example.comというサイトで、セブというカテゴリー（スラッグ＝URLの末尾はcebu）
の場合、カテゴリーアーカイブページは
example.com/category/cebu　となります。

例えば、以下のような、投稿ページに表示されているカテゴリーの印をクリックすると、カテゴリーアーカイブページが開きます。

通常の投稿ページはデフォルトでカテゴリーアーカイブページに記事一覧が表示されますが、カスタム投稿では表示されないので、カスタマイズが必要になります。

カスタム投稿のカテゴリー（タグ）記事一覧ページを作成する方法

カスタム投稿のカテゴリー（タグ）一覧ページを作成するには、以下の2つの方法があります。

①の方法を行った上で、必要に応じて②の方法を使うのがおすすめです。

次に①②それぞれの方法について紹介します。

①function.phpにコードを追加する

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

SWELL以外のテーマでも使える方法です。

function.phpにコードを追加することで、カテゴリーアーカイブにカスタム投稿を含めます。

これによって、通常の投稿ページ同様、カスタム投稿のカテゴリーアーカイブページが表示されるようになります。

exampleというカスタム投稿の例です。

SWELLなどの子テーマに以下のコードを追加します。

カテゴリーアーカイブにカスタム投稿を含める

/* カテゴリーアーカイブにカスタム投稿タイプを含める	*/ 
function add_custompost_category_archive( $wp_query ) {
if ($wp_query->is_main_query() && $wp_query->is_category()) {
$wp_query->set( 'post_type', array('post','ph'));
}
}
add_action( 'pre_get_posts', 'add_custompost_category_archive' , 10 , 1);

4行目のarray('post','example')のexampleの部分にカスタム投稿のスラッグを記載します。

exampleの部分は、カテゴリーのスラッグではなく、カスタム投稿のスラッグです。

postは通常の投稿ページで、exampleというカスタム投稿を追加するという意味なので、postは外さないでください。

set_post_type　という関数を利用しています。

関数リファレンス/set post type – WordPress Codex 日本語版

また、TechMemoさんのサイトを参考にさせていただきました。

タグアーカイブにカスタム投稿を含める

/* タグアーカイブにカスタム投稿タイプを含める	*/ 
function add_custompost_tag_archive( $wp_query ) {
if ($wp_query->is_main_query() && $wp_query->is_tag()) {
$wp_query->set( 'post_type', array('post','ph'));
}
}
add_action( 'pre_get_posts', 'add_custompost_tag_archive' , 10 , 1);

カテゴリーアーカイブ同様、4行目のarray('post','example')のexampleの部分にカスタム投稿のスラッグを記載します。

exampleの部分は、タグのスラッグではなく、カスタム投稿のスラッグです。

②SWELLテーマのショートコードの機能を使う

SWELLテーマのショートコードを使って任意のページに、カスタム投稿のカテゴリーページ一覧やタグページ一覧を表示できます。
ぺージのURLも任意に設定できます。

ショートコードは、ブロックエディターのショートコードブロックに貼ります。

この方法では、様々な場所に表示できることと、属性値を変えることで、表示内容をカスタマイズできることがメリットです。

例えば、レイアウトは、リスト型、カードなど４種類を選択できます。

カテゴリーページのレイアウトの変更等は、カテゴリーページの編集画面内のSWELL設定でも可能です。

ショートコードを使う方法だけでは、カテゴリー（タグ）アーカイブページ（サイトURL/category/カテゴリースラッグ/ )では記事一覧が表示されないことに注意してください。

カスタム投稿のカテゴリーページ一覧

以下はexampleというカスタム投稿のカテゴリーページ一覧を表示するショートコードの例です。

　[post_list type="card" post_type="example" cat_id="141" count="6" col="3" col_sp="1" excerpt="on"]

post_type="example" cat_id="141" の部分は、exampleというカスタム投稿で、カテゴリーID＝141のカテゴリーの記事一覧ページを表示させるという意味です。

それ以外の部分は

• type=”投稿リストのレイアウト”
• count=”表示件数”
• col=”最大カラム数”
• col_sp=”最大カラム数（SP）”
• excerpt=”抜粋文を表示するかどうか”（’on’で抜粋文を表示）

詳しくは 投稿リストを簡単に呼び出せるショートコードの使い方（SWELL公式サイト）

実際にはこのように表示されます。 type="card" （カード型レイアウト）　の場合

type="list" （リスト型レイアウト）の場合

カスタム投稿のタグページ一覧

以下はexampleというカスタム投稿のタグページ一覧を表示するショートコードの例です。

　[post_list type="card" post_type="example" tag_id="141" count="6" col="3" col_sp="1" excerpt="on"]

post_type="example" tag_id="141" の部分は、exampleというカスタム投稿で、タグID＝141のタグの記事一覧ページを表示するという意味です。

それ以外は、カテゴリーの場合と同様です。

カスタム投稿に関するSWELLの更新情報

参考情報ですが、SWELLのアップデートで、カスタム投稿に関する改善や修正も行われています。

以下の更新情報では、カスタム投稿タイプの編集画面でも、「SWELL設定」と「カスタムCSS＆JS」カスタムフィールドを使用できるようになったなど、カスタム投稿に関する４点の更新が載っています。

SWELL – ver. 2.6.7 アップデート情報（2022年8月10日）

まとめ

一般的なブログでは、カスタム投稿タイプを使うケースは少ないと思います。

当ブログではカスタム投稿は使っていませんが、別に運営しているコーポレートサイトで使っています。

コーポレイトサイトでは、お知らせや商品ページなどで使う場面があると思いますが、そうした場合の参考になれば幸いです。