
WordPressテーマ「SWELL」を使っていると、固定ページに新着記事などを表示したい場面がよくあります。
もちろん、SWELLには「投稿リストブロック」が標準搭載されています。
しかし、
- 「2ページ目、3ページ目と続く『ページネーション』を表示したい」
- 「ブロックの自由度を超えた、独自のHTML構造で一覧を作りたい」
- 「クライアントが編集画面で誤って消さないよう、テンプレート化したい」
といった実務的なニーズには、PHPでのカスタマイズが最適です。
今回は、固定ページを“器”として使い、特定カテゴリの記事一覧をページネーション付きで埋め込む具体的な実装例を解説します。
目次
こんな場面で役立ちます
- 特設ページやLP
下部に「関連ニュース」を10件以上並べ、ページ送りも付けたい。 - カテゴリ別の専用アーカイブ
標準のカテゴリページではなく、ヘッダーに大きな画像を入れたデザイン重視のページを「記事一覧」にしたい。 - 企業サイト
「会社情報ページ」の下に、その部署のブログ更新情報を自動で並べたい。
実装の考え方:固定ページを「器」にする
ポイントはシンプルです。
- 固定ページ本文: 管理画面から入力するテキストや画像を表示。
- 記事一覧部分: PHP(
WP_Query)で特定の投稿を呼び出して表示。
これにより、「上の説明文は管理画面からいつでも変えられるが、下の記事一覧はシステムで自動更新される」という理想的な運用が可能になります。
実装手順:専用カスタムテンプレートを作成する
全ページに影響が出ないよう、特定のページにだけ適用できる「カスタムテンプレート」方式で行います。
STEP
子テーマにPHPファイルを作成
子テーマのディレクトリに、新しいファイルを作成します。 例:page-news-list.php(名前は任意ですが、page-から始めると分かりやすいです)
STEP
以下のコードを記述
SWELLのパーツ(get_parts)を流用することで、デザインを崩さずに実装できます。
<?php
/**
* Template Name: ニュース一覧付き固定ページ
* Description: 固定ページ本文の下に特定カテゴリの記事一覧を表示します。
*/
if ( ! defined( 'ABSPATH' ) ) exit;
get_header();
// ループ開始
while ( have_posts() ) : the_post();
$the_id = get_the_ID();
$show_pr_notation = SWELL_Theme::get_pr_notation_size( $the_id, 'show_pr_notation_page' );
?>
<main id="main_content" class="l-mainContent l-article">
<div class="l-mainContent__inner">
<?php SWELL_Theme::get_parts( 'parts/page_head' ); ?>
<?php if ( $show_pr_notation ) : ?>
<?php SWELL_Theme::pluggable_parts( 'pr_notation' ); ?>
<?php endif; ?>
<div class="<?= esc_attr( apply_filters( 'swell_post_content_class', 'post_content' ) ) ?>">
<?php the_content(); ?>
</div>
<div class="p-categoryContent u-mt-60">
<h2 class="c-secTitle">新着記事一覧</h2>
<?php
$paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$args = [
'paged' => $paged,
'post_type' => 'post', // 投稿タイプ
'category_name' => 'news', // ★表示したいカテゴリースラッグを指定
'posts_per_page' => 10, // 1ページあたりの表示件数
'ignore_sticky_posts' => 1, // 「先頭に固定」を無視するかどうか
'orderby' => 'date',
'order' => 'DESC',
];
$the_query = new WP_Query( $args );
// SWELL標準のサブループ用パーツを呼び出し
SWELL_Theme::get_parts( 'parts/post_list/loop_sub', [
'query' => $the_query,
'list_args' => [ 'show_pv' => false ], // PV表示などのオプション
]);
// ページネーションの表示
SWELL_Theme::get_parts( 'parts/post_list/item/pagination', [
'pages' => $the_query->max_num_pages,
'paged' => $paged,
]);
wp_reset_postdata(); // クエリのリセットを忘れずに
?>
</div>
<?php SWELL_Theme::output_content_widget( 'page', 'bottom' ); ?>
</div>
</main>
<?php
endwhile;
get_footer();
カスタマイズのポイント
category_name
ここをニュースならnews、イベントならeventなど、管理画面で設定した「スラッグ」に書き換えてください。- カスタム投稿を表示したい場合
'post_type' => 'post'の部分を、作成したカスタム投稿名(例:worksなど)に変更すればOKです。 - 余白の調整
u-mt-60はSWELLの共通クラス(上マージン60px)です。デザインに合わせて数字を調整してください。
注意点・よくあるつまずきポイント
- テンプレートが出てこない
ファイル冒頭のTemplate Nameが正しく書かれているか確認してください。また、保存後にWordPress管理画面の「固定ページ編集」>「ページ属性」>「テンプレート」から、作成した名前を選択する必要があります。 - 表示が崩れる
SWELLのアップデートにより、get_partsで呼び出すパスが変わることが稀にあります。もし表示されない場合は、親テーマ内の/parts/post_list/フォルダを確認してみまてください。 - 404エラーになる
テンプレートを適用した直後は、一度 「設定」>「パーマリンク」 を開き、何も変更せずに「変更を保存」ボタンを押してください。これでシステム内のパスが更新され、正しく表示されるようになります。
まとめ
「固定ページ × 特定カテゴリ一覧」の実装は、Web制作の実務においてリクエストの多いカスタマイズです。
SWELLの標準機能を使用しつつ、今回のようなPHPカスタマイズを組み合わせることで、「運用しやすく、かつ自由度の高いサイト」を構築できます。ぜひ試してみてください。

