SWELLのカスタム投稿タイプと投稿一覧の作り方7ステップ解説

Swellでサイトを運営していると、「お知らせだけをまとめたい」「ブログとは別に実績の一覧ページを作りたい」と感じるタイミングがきっと出てくると思います。

一言でまとめると、「最初に少しだけ設計してから作り始めると、あとが本当に楽になるよ」という内容です。

Swellでカスタム投稿タイプを使うメリットとカスタム投稿一覧の全体像

通常の投稿との違いとよくある活用シーン

カスタム投稿タイプは、簡単に言うと「ブログ記事とは別枠の投稿箱」です。

通常の投稿とは用途や見せ方を分けることで、管理もデザインもスッキリ整理できます。

イメージしやすいように、違いを表でまとめてみます。

項目	通常の投稿	カスタム投稿タイプ
主な用途	日々のブログ記事	お知らせ・実績・商品・イベント情報など
URL構造	/blog/○○ など	/news/○○、/works/○○ など自由に設計
一覧ページ	ブログの投稿一覧	お知らせ一覧、実績一覧など専用ページ
管理画面	「投稿」メニューに集約	「お知らせ」「実績」など別メニューで管理
デザイン	ブログ寄りのレイアウト	サイトの目的に合わせて専用レイアウト

私が制作でよく作るカスタム投稿タイプの例は、次のようなものです。

• お知らせ（news）
• 制作実績（works）
• 商品情報（products）
• セミナー・イベント情報（events）

こういった情報を通常の投稿に混ぜてしまうと、読者も自分も探しにくくなります。

Swellでカスタム投稿タイプを用意しておくと、メニューも一覧も分けられるので、サイト全体が「ちゃんとした企業サイト」の印象に近づきます。

Swellとカスタム投稿タイプの相性が良い理由

Swellは「ブログもコーポレートサイトも両方作りやすいテーマ」という性格があり、カスタム投稿タイプとの相性もかなり良いです。

具体的には、次のような点が使いやすいと感じています。

• 投稿リストブロックで、特定のカスタム投稿だけを簡単に抽出できる
• アイキャッチ付きのカード型一覧が、ブロックの設定だけでサクッと作れる
• ブログパーツ機能で、一度作った一覧をトップページやサイドバーにも流用できる

例えば「お知らせはトップページ下部に3件だけ出したい」「実績は専用ページでカード一覧にしたい」といった構成も、Swellならそこまで難しくありません。

あとは、どのカスタム投稿タイプをどの一覧ページに出すかを整理しておけば、運用もだいぶ楽になります。

Swell カスタム投稿タイプを作る前に決めておきたい3つのこと

投稿タイプ設計チェックポイント

まずは「どんなカスタム投稿タイプを作るか」をざっくり設計します。

決めておきたい項目を表にまとめると、次のようなイメージです。

項目	例	ポイント
投稿タイプ名	お知らせ、実績など	管理画面のメニューに表示される名前
スラッグ	news、works など	URLやアーカイブのベースになるので慎重に決める
用途	お知らせ、制作事例、商品情報	何を入れる箱かを一言で言語化しておく
分類（カテゴリ）	ジャンル、エリアなど	必要なら専用の分類（カスタムタクソノミー）も用意する
必要な項目	価格、住所、URLなど	カスタムフィールドで管理するかを検討

例えば「制作実績」なら、こんな感じで決めておくとスムーズです。

• 投稿タイプ名：制作実績
• スラッグ：works
• 分類：業種別カテゴリ（飲食店、美容室など）
• 必要な項目：クライアント名、URL、公開範囲など

このレベルまでイメージしてから実際の作業に入ると、Swellでカスタム投稿タイプを増やしていくときも迷いにくくなります。

プラグイン派かコード派かを決める

次に、「どうやってカスタム投稿タイプを登録するか」を決めます。

ざっくり分けると、プラグインで設定する方法と、コードを書いて登録する方法の2つです。

方法	向いている人	メリット	注意点
プラグイン（Custom Post Type UIなど）	コードはあまり触りたくない人	画面でポチポチ設定できて分かりやすい	プラグインに依存するので入れすぎに注意
コード（functions.phpなど）	子テーマで管理したい人	動作がシンプルで、テーマ移行時も把握しやすい	書き間違えると画面が真っ白になるリスク

私のおすすめは、WordPressに慣れていないうちはプラグインで登録しておき、慣れてきたらコードで管理するスタイルです。

どちらの方法を選んでも、Swellでカスタム投稿の一覧を作る流れ自体は大きく変わりません。

大事なのは、「どの投稿タイプが、どの一覧ページに出るのか」を最初に整理しておくことです。

事前にやっておきたいバックアップと子テーマ

カスタム投稿タイプの登録や一覧のカスタマイズは、テーマの動きに深く関わる作業です。もしもの時にすぐ元に戻せるよう、次の準備をしておくと安心です。

私自身も作業前には必ずバックアップをとり、「ここから先はテスト環境のつもりでやる」と決めてから手を動かすようにしています。

このひと手間があるだけで、Swell カスタム投稿タイプの設定や一覧の調整にも落ち着いて取り組めます。

Swellでカスタム投稿の一覧ページを作る3つのパターン

パターン1：カスタム投稿のアーカイブをそのまま使う

もっともシンプルなのが、カスタム投稿タイプのアーカイブURLをそのまま一覧ページとして使う方法です。

例えばスラッグをnewsにして、アーカイブを有効にしておけば、/news/ にアクセスしたときに自動で一覧が表示されます。

この方法のメリットは次のとおりです。

• 設定を済ませれば、あとは自動で一覧が出てくれる
• 記事数が増えても自動でページ送りがつく
• Swell標準のデザインが適用されるのでレイアウトが崩れにくい

その代わり、アーカイブの中身をブロックエディターで細かく装飾することは難しいです。

「一覧の上に説明文やバナーを置きたい」「途中に別のブロックを挟みたい」といった場合は、次のパターン2の方が向いています。

パターン2：固定ページ＋投稿リストブロックで一覧を作る

次によく使うのが、固定ページにSwellの投稿リストブロックを置いて、特定のカスタム投稿だけを抽出する方法です。

作業の流れを表にすると、こんな感じになります。

ステップ	内容	ポイント
1	固定ページを新規作成	タイトルを「お知らせ」など分かりやすい名前にする
2	投稿リストブロックを追加	ブロックから「投稿リスト（Swell）」を選ぶ
3	表示する投稿タイプを選択	対象のカスタム投稿タイプだけを指定する
4	表示件数や並び順を調整	新着順や表示数を好みに合わせて設定
5	レイアウトをカード型などに変更	一覧の見た目を簡単に整えられる

このパターンの良いところは、一覧の上に説明文や画像、ボタンなどを自由に配置できることです。私も「お知らせ一覧」の上に注意書きや問い合わせバナーを入れたいときに、よくこの形を使います。

1点だけ意識しておきたいのが、アーカイブURLとの関係です。

例えば、/news/ はアーカイブ、/news-list/ は固定ページの一覧、といった具合に、URLがかぶらないようにしておくとトラブルを防ぎやすくなります。

パターン3：ブログパーツでどこからでも一覧を呼び出す

3つ目のパターンは、投稿リストブロックで作った一覧をブログパーツ化して、別の場所から使い回す方法です。

例えば次のような使い方ができます。

• トップページの下部に「最新のお知らせ3件」を表示する
• サイドバーに「制作実績ピックアップ」を表示する
• フッター付近に「イベント情報」を横並びで表示する

ざっくりした流れは次のとおりです。

• ブログパーツを新規作成する
• その中で投稿リストブロックを使い、カスタム投稿タイプの一覧を作る
• 必要な件数やレイアウトを調整する
• ウィジェットや固定ページから、作ったブログパーツを呼び出す

カスタム投稿の一覧をブログパーツにしておくと、同じ一覧を複数箇所で使い回せるので、サイト全体の更新がかなり楽になります。

一覧ページのデザインとレイアウトをSwellらしく整える

カスタマイザーで記事一覧の共通デザインを整える

Swellの「外観」メニューから開けるカスタマイザーには、記事一覧の見た目をまとめて変えられる設定があります。

ここを使うと、カスタム投稿のアーカイブや投稿リストブロックにも共通の雰囲気を持たせやすくなります。

主に調整する項目を表にすると、次のような感じです。

項目	例	効果
一覧レイアウト	カード型、リスト型、テキスト型	一覧全体の雰囲気を決める
カラム数	2カラム、3カラムなど	カードを何列で並べるかを調整
サムネイルの比率	16:9、1:1など	アイキャッチ画像の形を統一
MOREボタン	ボタンの文言など	「詳しく見る」など好きな文言に変更
メタ情報の表示	日付、カテゴリなど	必要な情報だけを表示できる

ここで決めた設定は、基本的にサイト全体の一覧に影響します。

「お知らせは文字中心でシンプルに、実績はカード型で写真を大きく見せたい」といった場合は、次のように個別に調整していくイメージです。

カスタム投稿だけ一覧レイアウトを変えたいときの考え方

カスタム投稿の一覧を投稿タイプごとに変えたいときは、次のように整理しておくと分かりやすくなります。

例えば、こんな組み合わせが考えられます。

• お知らせ（news）：アーカイブはテキスト型、固定ページの一覧はリスト型
• 実績（works）：カード型で2カラム、アイキャッチを大きめに表示
• イベント（events）：日付を目立たせたリスト型＋カテゴリラベル

Swellはもともとのデザインが整っているので、まずは大枠のレイアウトだけ決めて、実際に投稿を入れながら少しずつ微調整していくと、無理なく仕上げやすいです。

一覧にカテゴリやカスタムフィールドを表示したいとき

もう一歩踏み込むと、「一覧カードの中に業種のカテゴリや価格などの情報も出したい」という場面も出てきます。

このあたりは、やり方がいくつかあります。

方法	概要	向いているケース
クエリループブロックを使う	ブロックエディターで一覧を作り、必要な項目を並べて表示する	コードを使わずに完結させたいとき
テンプレートファイルを編集	archive-投稿タイプ名.phpなどで出力内容をカスタマイズする	テーマカスタマイズに慣れているとき
専用プラグインを利用	カスタムフィールドの値を一覧に出すプラグインを使う	複雑な条件や表示が必要なとき

どの方法を選ぶかは、一覧でどこまで情報を見せたいかによって変わります。

まずはクエリループブロックでできる範囲を試してみて、「もう少し細かく制御したい」と思ったら、テンプレート編集やプラグインを検討する、という順番が安全です。

Swellのカスタム投稿一覧でつまずきやすいポイントと対処法

一覧が表示されない・404になる場合

カスタム投稿の一覧を作ったのに表示されないとき、よくある原因は次のようなものです。

• パーマリンク設定を再保存していない
• カスタム投稿タイプのスラッグと、実際のURLが合っていない
• アーカイブが無効になっている
• 固定ページとアーカイブのURLが競合している

簡単にできるチェックの順番は、こんなイメージです。

• 設定メニューからパーマリンク設定を開き、そのまま保存ボタンを押す
• カスタム投稿タイプの設定画面で、スラッグとアーカイブの有無を確認する
• /news/ なのか /news-list/ なのかなど、URLの役割を整理し直す

これだけで解決するケースも多いです。

Swellの不具合というより、WordPressの基本設定が原因になっていることがほとんどなので、落ち着いて一つずつ確認してみてください。

固定ページとアーカイブがバッティングする問題

固定ページで一覧を作りたいときに、よく起こるのがURLのバッティングです。

例えば、次のような状態になっていないかチェックしてみましょう。

• カスタム投稿タイプのスラッグ：news
• 固定ページのスラッグ：news

この場合、どちらのページを表示するかWordPressが判断しにくくなります。

基本的な対処法は、どちらかのスラッグを変えて、役割をはっきり分けてあげることです。

おすすめの整理方法を表にすると、次のようになります。

用途	おすすめURL例	ポイント
アーカイブ一覧	/news/、/works/	自動生成される基本の一覧として使う
固定ページ一覧	/news-list/、/works-list/	装飾や説明文を入れたいときに使う
トップページの一部	/（トップ内のセクション）	ブログパーツや投稿リストで表示する

こうして役割ごとにURLを分けておくと、後から見返したときも理解しやすくなります。

カスタム投稿タイプを増やす予定がある場合は、このタイミングで全体のURLルールもまとめて決めておくと安心です。

SEO的に気をつけたいポイント

最後に、カスタム投稿の一覧ページを作るときに意識しておきたいSEOのポイントを整理します。

専門的な知識がなくても、次の3つを意識するだけでだいぶ違います。

• 重複コンテンツを避ける
  アーカイブと固定ページで、ほぼ同じ内容の一覧を2つ作らないように気をつけます。どちらかをメインに使い、もう一方は役割を変えるか、必要に応じて検索エンジン向けの設定を考えましょう。
• 内部リンクを整える
  トップページやグローバルメニューから、カスタム投稿の一覧ページへしっかりリンクを張ります。検索エンジンにもユーザーにも、「このページは重要なんだな」と伝わりやすくなります。
• 一覧ページのタイトルと説明文を分かりやすくする
  「お知らせ一覧」「制作実績一覧」など、ひと目で内容が伝わるタイトルと、短い説明文を用意します。サイト内検索のときにも役立ちます。

特に、アーカイブと固定ページの両方に同じような一覧を置いていると、どちらを主役にすべきかあいまいになりがちです。

「自動生成されるアーカイブをメインにするのか」「装飾しやすい固定ページをメインにするのか」を早めに決めておくと、運用もSEOもスッキリします。

よくある質問

Q1：Swell カスタム投稿タイプの一覧はアーカイブと固定ページどっちがいいですか？

どちらにもメリットがあるので、サイトの目的で選ぶのがおすすめです。

手早く一覧を用意したいだけであれば、カスタム投稿タイプのアーカイブURLをそのまま使う方法が一番シンプルです。

一方で、一覧の上に説明文やバナーを入れたい、ほかのコンテンツと組み合わせたい、といった場合は、固定ページに投稿リストブロックを置いてカスタム投稿一覧を作る方が自由度が高いです。

私の場合は、「シンプルに済ませたい案件はアーカイブ」「導線やデザインを作り込みたい案件は固定ページ」と使い分けることが多いです。

Q2：プラグインなしでSwell カスタム投稿タイプと一覧を作っても大丈夫ですか？

コードに慣れていれば、プラグインなしでカスタム投稿タイプを登録しても問題ありません。

functions.phpやコードスニペット系のプラグインに、カスタム投稿タイプ登録のコードを書いておけば、余計なプラグインを増やさずに済みます。

ただし、書き間違えると画面が真っ白になることもあるので、少しでも不安がある場合は、まずプラグインで設定してみるのがおすすめです。

カスタム投稿の一覧ページ自体は、どちらの方法で登録しても基本的な作り方は同じなので、「自分がメンテしやすい方」を選ぶのが一番です。

Q3：実績や商品が少ないうちからSwellでカスタム投稿の一覧を作る意味はありますか？

私は、たとえ投稿が少なくても、先にカスタム投稿の一覧ページだけ作っておく方が良いと感じています。

理由はシンプルで、最初にURLやレイアウトを決めておくと、あとから中身が増えたときに慌てずに済むからです。

まだ件数が少なくても、「これから実績が増えていくんだな」という期待感をユーザーに伝えることもできます。

スカスカ感が気になる場合は、「現在準備中の実績も含まれます」といった一言を一覧の上に添えておくと、印象がかなり変わります。

まとめ

ここまでのポイントを整理します

今日からできる最初の一歩としては、「自分のサイトにどんなカスタム投稿タイプがあると便利か」を紙やメモアプリに書き出してみてください。

お知らせなのか、実績なのか、商品なのか、必要な項目やURLのイメージまで整理できたら、その設計図を片手に、Swellでのカスタム投稿一覧づくりを一つずつ進めていきましょう。