SWELL記事一覧を固定ページに作る方法|迷わない設定手順

プラグイン導入方法を表すイメージ画像 WordPress・テーマ・サイト制作

SWELLで記事一覧を固定ページにまとめたいときは、目的に合った作り方を選ぶとスムーズです。標準の投稿ページを指定する方法と、固定ページに投稿リストブロックを置く方法では、編集できる範囲やページ送りの仕組みが異なります。

説明文やカテゴリー別の案内を自由に配置したい場合は、固定ページと投稿リストブロックの組み合わせが使いやすいでしょう。一方、すべての記事を自動で並べ、番号付きのページ送りも利用したい場合は、WordPressの投稿ページとして設定する方法が向いています。

この記事では、初めてSWELLを操作する方でも判断しやすいように、2つの方法の違いから具体的な設定手順、見やすく整えるコツ、表示されないときの確認事項まで順番に解説します。ご自身のサイトに必要な形をイメージしながら進めてみてください。

SWELLの記事一覧を固定ページに表示する2つの方法

最初に、SWELLで記事一覧ページを作る代表的な方法を整理します。どちらを選ぶかによって、本文を自由に編集できるか、記事が増えたときにページ送りを使えるかが変わるため、作業前に目的を決めておくと迷いにくくなります。

投稿ページとして固定ページを指定する方法

WordPressには、作成済みの固定ページを投稿一覧の表示先として指定する仕組みがあります。管理画面で空の固定ページを作り、「設定」から「表示設定」を開き、ホームページの表示を固定ページにしたうえで投稿ページを選びます。例えば「ブログ」や「記事一覧」という名前の固定ページを用意し、そのページを投稿ページに指定する流れです。

この方法では、公開した投稿が自動的に時系列で並びます。記事を追加するたびに一覧を編集する必要がなく、記事数が増えた場合はテーマやWordPress側の仕組みに沿って次のページへ移動できます。ただし、投稿ページとして指定した固定ページは、通常の固定ページと同じ感覚で本文を自由に配置できない点に注意してください。

固定ページに投稿リストブロックを置く方法

ページ上部に説明文、画像、カテゴリーへの案内などを置きたい場合は、固定ページの本文へSWELLの投稿リストブロックを挿入する方法が便利です。固定ページを新規作成し、ブロック追加画面から「投稿リスト」を選ぶと、好きな位置に記事一覧を表示できます。

具体的には、「初めての方へ」という説明の下に新着記事を並べ、その下にカテゴリー別の一覧を追加するといった構成が可能です。表示件数や並び順、カテゴリー、タグなどを設定できるため、サービスサイトやサイト型トップページにもなじみます。一覧以外の内容も同じページで編集したい方に向いている方法です。

目的に合わせて作り方を選ぶ判断基準

すべての記事を時系列で見せるだけなら、投稿ページとして指定する方法がシンプルです。本文の編集よりも自動更新やページ送りを優先する場合に適しています。ブログの記事数が多く、訪問者に過去の記事まで順番に見てもらいたいときも扱いやすいでしょう。

一方、特定のカテゴリーだけを並べたい場合や、一覧の前後に文章やボタンを置きたい場合は投稿リストブロックが合います。例えば「在宅ワークの記事だけを集める」「初心者向けの記事を6件表示する」といったページを作れます。迷ったときは、自由な構成を優先するか、標準のページ送りを優先するかで選んでみてください。

作り方向いている目的主な特徴注意点
投稿ページに指定全記事を自動表示したい更新が自動でページ送りにも対応しやすい固定ページ本文の自由度が低い
投稿リストブロック自由な記事一覧を作りたい説明文や画像と組み合わせやすい標準の番号付きページ送りとは動作が異なる

具体例として、メニューに「ブログ」という全記事一覧を置くなら投稿ページとして指定し、トップページに「新着記事を6件だけ表示する」なら投稿リストブロックを使うと整理しやすくなります。2つを併用し、投稿リストの下に全記事一覧へのボタンを置く方法もあります。

  • 全記事を自動で並べるなら投稿ページとして指定します。
  • 文章や画像を自由に配置するなら投稿リストブロックが便利です。
  • 番号付きページ送りを優先する場合は投稿ページが向いています。
  • カテゴリー別の導線には投稿リストブロックを活用できます。

投稿リストブロックで固定ページを作る手順

2つの方法の違いがわかったところで、ここからは自由度の高い投稿リストブロックを使う手順を見ていきます。固定ページの作成、ブロックの追加、表示条件の設定という順に進めると、初めてでも設定箇所を見失いにくくなります。

記事一覧用の固定ページを新規作成する

WordPress管理画面の「固定ページ」から「新規固定ページを追加」を選びます。タイトルには「記事一覧」「ブログ」「お役立ち記事」など、訪問者が内容を想像しやすい名前を入力するとよいでしょう。パーマリンクも確認し、英数字とハイフンを使った短い文字列に整えます。

このページを投稿ページとして表示設定に登録する必要はありません。投稿リストブロックを使う場合は、通常の固定ページとして本文を編集します。ページ上部に案内文を入れるなら、「目的別に記事を探せます」「新着情報をまとめています」など、一覧の使い方が伝わる文章を置いてみてください。

SWELLの投稿リストブロックを追加する

本文編集画面でブロック追加ボタンを押し、検索欄に「投稿リスト」と入力します。SWELLの投稿リストブロックを選択すると、投稿カードが一覧で表示されます。ブロックが見つからない場合は、SWELLが有効になっているか、テーマや関連プラグインが更新されているかを確認してください。

配置後は、右側の設定パネルからリストのレイアウトや表示件数を変更できます。最初はカード型やリスト型などを切り替え、パソコンとスマートフォンの両方で読みやすい形を探すとよいでしょう。アイキャッチ画像の比率がそろっていないサイトでは、一覧にしたときの見え方もプレビューで確認します。

カテゴリーやタグで表示記事を絞り込む

投稿リストブロックでは、カテゴリーやタグなどを指定し、表示する記事を絞り込めます。例えば「WordPress」というカテゴリーの記事だけを表示したい場合は、ブロックの絞り込み設定から対象カテゴリーを選びます。複数の一覧を作り、それぞれ異なるカテゴリーを割り当てる使い方も可能です。

ただし、カテゴリーとタグを複雑に組み合わせると、条件に合う記事が少なくなり、一覧が空になることがあります。設定後は必ずプレビューを開き、想定した記事が表示されているか確認してください。新しい記事を公開するときも、該当するカテゴリーやタグを正しく付けておく必要があります。

表示件数と並び順を調整する

一覧に表示する件数は、ページ全体の長さと訪問者の探しやすさを考えて決めます。トップページや案内ページでは3〜8件程度に絞り、続きを見たい人を全記事一覧やカテゴリーアーカイブへ案内すると、画面が長くなりすぎません。専用の記事一覧ページなら、より多く表示する方法もあります。

並び順は新着順だけでなく、更新日や人気順など、利用できる設定の範囲で目的に合わせます。手順や制度を扱う記事では更新された情報を見つけやすくし、読み物中心のサイトでは人気記事を入口にするなど、読者が次に読みたい内容へ進める順序を意識するとよいでしょう。

固定ページを作成したら、投稿リストブロックを追加します。
表示件数、並び順、カテゴリーなどを右側の設定パネルで調整します。
公開前にパソコンとスマートフォンの両方で確認してください。

例えば「最新記事」「WordPress」「副業の始め方」という3つの見出しを置き、それぞれの下に条件の異なる投稿リストを配置します。各リストを4件にして、末尾にカテゴリー一覧へのボタンを置けば、情報量を抑えながら選びやすいページを作れます。

  • 固定ページは通常の本文編集ができる状態で作成します。
  • ブロック追加画面からSWELLの投稿リストを選びます。
  • カテゴリーやタグの条件は公開前に確認します。
  • 表示件数はページの役割に合わせて調整します。
  • スマートフォンのカード幅や文字量も確認します。
必要機能を追加する様子を表すイメージ画像

記事一覧を見やすく整える設定のコツ

投稿リストを表示できたら、次は訪問者が記事を選びやすい形に整えます。見た目を華やかにするだけでなく、一覧の目的、掲載情報、リンク先をそろえることが大切です。特にスマートフォンでは、情報を詰め込みすぎないように調整しましょう。

一覧の目的に合うレイアウトを選ぶ

SWELLの記事一覧には、カード型やリスト型など複数の見せ方があります。写真やデザインを重視するサイトではカード型が映えやすく、記事タイトルを素早く比較してほしい場合はリスト型が適しています。画像が少ないサイトなら、サムネイルを大きくしすぎないほうが内容を探しやすい場合もあります。

外観のカスタマイズにある記事一覧リストの設定は、トップページやアーカイブページの一覧に関係します。一方、固定ページへ配置した投稿リストブロックには、ブロック単位の設定があります。変更している場所が異なると表示に反映されないため、どの一覧を編集しているのか確認しながら操作してください。

タイトルや抜粋文の表示量をそろえる

記事タイトルが長すぎると、カードの高さがばらつき、一覧を見渡しにくくなります。タイトルを短く変更できない場合は、一覧のカラム数や表示形式を見直すと整いやすくなります。抜粋文を表示する場合も、文章量が多いとスマートフォンで画面を占有するため、必要性を考えて設定しましょう。

例えば、目的別の記事を3列のカードで並べるなら、タイトルとカテゴリーを中心に見せ、抜粋文を非表示にするとすっきりします。検索結果のように内容を比較してほしいページでは、1列のリスト型にして短い抜粋文を添える方法があります。読者が何を基準に記事を選ぶかに合わせるのがポイントです。

カテゴリー別一覧と全記事一覧をつなぐ

固定ページの投稿リストは、表示件数を限定して使う場面が多くなります。そのため、表示されていない記事へ進める導線を用意しておくと親切です。「もっと見る」ボタンのリンク先には、投稿ページとして設定した全記事一覧や、対象カテゴリーのアーカイブページを指定できます。

カテゴリーごとの固定ページを作る場合も、既存のカテゴリーアーカイブと役割が重ならないようにします。固定ページでは説明やおすすめ記事を見せ、アーカイブでは該当記事を網羅的に並べるなど、目的を分けると訪問者が迷いません。似たページを複数作るときは、メニューやパンくずリストの名称もそろえてください。

ページの目的向く表示形式掲載するとよい内容主なリンク先
新着記事の紹介カード型画像、タイトル、公開日全記事一覧
カテゴリー別案内カード型またはリスト型カテゴリー、タイトルカテゴリーアーカイブ
全記事から探すリスト型タイトル、日付、抜粋各記事

Q. 投稿リストのデザインを変えたのに反映されません。
固定ページ内の投稿リストを変えたい場合は、対象ブロックを選択し、右側のブロック設定を確認します。カスタマイザーの記事一覧設定とは対象が異なることがあります。

Q. 同じカテゴリーの記事ばかり並んでしまいます。
絞り込み条件と並び順を確認し、必要に応じて表示件数を減らします。特定の記事を入口にしたい場合は、対象記事を指定できる設定や別のリンクブロックも検討するとよいでしょう。

  • 画像重視ならカード型、比較重視ならリスト型が便利です。
  • 固定ページ内の一覧はブロック設定から調整します。
  • 抜粋文や日付は必要な情報だけ表示します。
  • 一覧の末尾に全記事やカテゴリーへの導線を置きます。

表示されない場合とページ送りの注意点

見た目を整えても記事が表示されない場合は、公開状態や絞り込み条件、設定したページの役割を順番に確認します。固定ページ内の投稿リストと、WordPressの投稿ページではページ送りの仕組みも異なるため、記事数が増えた後の運用まで考えておきましょう。

投稿が一覧に表示されないときの確認項目

最初に、表示したい記事が公開済みかを確認します。下書き、非公開、予約投稿の記事は、通常の閲覧者向け一覧に表示されません。次に、投稿リストブロックで指定したカテゴリー、タグ、投稿タイプなどの条件を見直します。記事側に対象カテゴリーが付いていなければ、条件に一致しないため表示されません。

キャッシュ機能を利用している場合は、設定変更後も以前の一覧が残ることがあります。WordPressのキャッシュ系プラグイン、サーバーのキャッシュ、ブラウザのキャッシュを順番に確認してください。更新や削除を行う前にはバックアップを取り、各サービスの公式手順に沿って操作すると安心です。

投稿ページに指定すると本文が表示されない理由

表示設定で固定ページを投稿ページに指定すると、そのページは投稿一覧を出力するための入れ物として扱われます。編集画面に入力した文章や投稿リストブロックが、通常の固定ページと同じように表示されない場合があります。これは、固定ページにブロックを置く方法とは仕組みが異なるためです。

説明文や画像を自由に見せたいときは、そのページを投稿ページに指定せず、通常の固定ページとして公開してください。反対に、自動的な全記事一覧を優先するなら、投稿ページとして指定し、デザインはSWELLのカスタマイザー側で調整します。1つのページに両方の役割を持たせようとすると混乱しやすいので注意しましょう。

投稿リストブロックのもっと見るとページ送りの違い

投稿リストブロックに設置する「もっと見る」は、指定した別ページへ移動させるリンクとして使うのが基本です。一般的な記事一覧にある「1、2、3」のような番号付きページ送りとは役割が異なります。固定ページ内の一覧だけで全記事を何ページにも分けて表示したい場合は、標準機能の範囲を確認する必要があります。

記事数が多いサイトでは、固定ページには新着記事やおすすめ記事を数件だけ表示し、続きを投稿ページやカテゴリーアーカイブへつなぐ構成が扱いやすいでしょう。独自のページ送りを追加するカスタマイズもありますが、テーマ更新との相性や保守が必要になるため、初心者の方は標準機能を組み合わせる方法から試してみてください。

更新後にレイアウトが崩れたときの対応

WordPress、SWELL、プラグインの更新後に表示が変わった場合は、まずSWELL公式マニュアルや更新情報を確認します。古い解説記事では、現在の管理画面と設定名や位置が異なる場合があります。画面が一致しないときに無理に同じ操作をせず、利用中のバージョンに合う公式情報を探してください。

法人サイトで運用している場合は、公開環境で直接変更せず、検証環境で表示を確かめる方法が安全です。個人や小規模サイトの場合も、テーマファイルを直接編集する前にバックアップを保存し、追加CSSや子テーマなど戻しやすい方法を選びましょう。原因を切り分ける際は、一度に複数の設定を変えないことも大切です。

投稿ページは全記事の自動表示とページ送りに向いています。
投稿リストブロックは自由な配置と絞り込みに向いています。
記事数が増える予定なら、固定ページから投稿ページやアーカイブへつなぐ構成が扱いやすいでしょう。

例えば、固定ページには新着6件だけを表示し、「すべての記事を見る」ボタンを投稿ページへリンクします。カテゴリーごとの一覧では4件を表示し、「WordPressの記事をもっと見る」ボタンをカテゴリーアーカイブへつなぐと、標準機能を活かしながら回遊しやすくなります。

  • 公開状態とカテゴリーなどの絞り込み条件を確認します。
  • 投稿ページに指定した固定ページは本文の扱いが異なります。
  • もっと見るボタンと番号付きページ送りは別の機能です。
  • 更新後の仕様はSWELL公式マニュアルで確認します。
  • 変更前にはバックアップを保存します。

まとめ

SWELLの記事一覧を固定ページに作るなら、自由なレイアウトには投稿リストブロック、全記事の自動表示には投稿ページの指定が向いています。

まずは固定ページを1つ作り、新着記事を数件表示する投稿リストブロックを配置して、パソコンとスマートフォンで見え方を確認してみてください。

目的に合う方法を選べば、難しいコードを使わなくても探しやすい記事一覧を整えられます。無理に機能を増やさず、標準設定から少しずつ試していきましょう。

本記事は一般的な情報提供を目的としており、起業・副業による収益や成果を保証するものではありません。税務・法務に関する判断は、国税庁や税理士など専門家・公的機関の情報を必ずご確認ください。

当ブログの主な情報源