☰
Web-saku Web-sakuではweb作成に関する情報をお届けしていきます!

WordPressで固定ページに投稿一覧を作成する方法：完全ガイドとカスタマイズ術

WordPress

WordPressサイトのデフォルトの投稿一覧ページ（アーカイブページ）は、テーマによって見た目が決まっていたり、表示内容のカスタマイズが難しい場合があります。
しかし、固定ページを使って自由にデザインし、表示内容をコントロールできるオリジナルの投稿一覧ページを作成することが可能です。

この記事では、固定ページを利用して、すべての投稿を表示し、1ページあたりの表示件数をユーザーが変更できるようにし、ページネーションを設置・カスタマイズする方法まで、具体的なコード例を交えて詳しく解説します。

準備：子テーマの利用を強く推奨

WordPressのテーマファイルを直接編集すると、テーマのアップデート時に変更が失われる可能性があります。この記事で紹介するコードは、必ず子テーマを作成し、子テーマのディレクトリ内で編集・追加するようにしてください。

[参考]Child Themes – Theme Handbook | Developer.WordPress.org

1. 固定ページの作成

まずは、投稿一覧を表示するための固定ページをWordPress管理画面から作成します。

  1. WordPress管理画面にログインします。
  2. 「固定ページ」→「新規追加」をクリックします。
  3. タイトルに「投稿一覧」など、分かりやすい名前を入力します。
  4. 内容欄には何も入力せず、いったん「公開」ボタンをクリックしてページを保存します。

この時点では、空の固定ページが作成されただけです。次にこのページに投稿一覧を表示するためのテンプレートファイルを作成します。

2. テンプレートファイルの作成と設定

作成した固定ページに投稿一覧を表示させるには、専用のテンプレートファイルが必要です。

テンプレートファイルの作成

使用している子テーマのディレクトリ内に、新しいPHPファイルを作成します。ファイル名は、この固定ページ専用のテンプレートであることを示すために、例えば page-post-list.php のように、page-スラッグ.php の形式にすると分かりやすいです。または、任意の名前にして、ファイル内でテンプレート名を指定することもできます。

今回は、page-post-list.php という名前で作成することを前提に進めます。

ファイルの冒頭に、このファイルがWordPressのどのテンプレートとして認識されるかを定義するコメントを記述します。

PHP
<?php
/*
Template Name: 投稿一覧ページ
Template Post Type: page
*/
get_header(); // ヘッダーを読み込む
?>

<!-- ここに投稿一覧のコンテンツを記述 -->

<?php
get_footer(); // フッターを読み込む
?>

Template Name: 投稿一覧ページ の部分が、WordPress管理画面でテンプレートを選択する際に表示される名前になります。

作成した固定ページへのテンプレートの適用

WordPress管理画面に戻り、先ほど作成した「投稿一覧」固定ページを開きます。

  • 右側の「ページ属性」または「ドキュメント」セクションにある「テンプレート」ドロップダウンメニューから、先ほど指定した「投稿一覧ページ」を選択します。
  • 「更新」ボタンをクリックして変更を保存します。

これで、この固定ページを訪れると、page-post-list.php の内容が読み込まれるようになります。

3. 投稿一覧の表示ロジックの実装（WP_Queryの利用）

page-post-list.php ファイルに、投稿一覧を表示するためのWordPressループとWP_Queryクラスを記述します。

WP_Queryについて

WP_QueryはWordPressのデータベースから投稿を取得するための強力なクラスです。デフォルトのメインクエリを変更するpre_get_postsとは異なり、現在のページの内容に影響を与えずに、新しい独立した投稿のループを作成する際に非常に便利です。

page-post-list.php の get_header() と get_footer() の間に、以下のコードを追加します。

PHP
<?php
/*
Template Name: 投稿一覧ページ
Template Post Type: page
*/
get_header(); // ヘッダーを読み込む
?>

<main id="primary" class="site-main">
    <div class="container">
        <header class="page-header">
            <h1 class="page-title">投稿一覧</h1>
        </header>

        <?php
        // 1ページに表示する投稿数を設定 (後でユーザーが変更できるようにする)
        $posts_per_page = isset( $_GET['posts_per_page'] ) ? intval( $_GET['posts_per_page'] ) : 10;
        if ( $posts_per_page <= 0 ) {
            $posts_per_page = 10; // 不正な値の場合はデフォルトに戻す
        }

        // 現在のページ番号を取得
        $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

        // WP_Queryの引数を設定
        $args = array(
            'post_type'      => 'post',           // 投稿タイプを「投稿」に指定
            'posts_per_page' => $posts_per_page,  // 1ページあたりの表示件数
            'paged'          => $paged,          // 現在のページ番号
            'orderby'        => 'date',           // 日付でソート
            'order'          => 'DESC',           // 降順（新しいものが上）
            'post_status'    => 'publish',        // 公開済みの投稿のみ
        );

        // WP_Queryを実行
        $custom_query = new WP_Query( $args );

        // 投稿がある場合の処理
        if ( $custom_query->have_posts() ) :
            ?><div class="post-list-container"><?php
            while ( $custom_query->have_posts() ) : $custom_query->the_post();
                // ここに各投稿の表示内容を記述 (次のステップでカスタマイズ)
                ?>
                <article id="post-<?php the_ID(); ?>" <?php post_class('post-item'); ?>>
                    <?php if ( has_post_thumbnail() ) : ?>
                        <div class="post-thumbnail">
                            <a href="<?php the_permalink(); ?>">
                                <?php the_post_thumbnail('medium'); // アイキャッチ画像を中サイズで表示 ?>
                            </a>
                        </div>
                    <?php endif; ?>

                    <div class="post-content">
                        <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

                        <div class="post-meta">
                            <span class="post-date"><?php echo get_the_date(); ?></span>
                            <span class="post-author">投稿者: <?php the_author_posts_link(); ?></span>
                        </div>

                        <div class="post-categories">
                            <?php
                            $categories = get_the_category();
                            if ( ! empty( $categories ) ) {
                                foreach ( $categories as $category ) {
                                    echo '<a href="' . esc_url( get_category_link( $category->term_id ) ) . '" class="post-category">' . esc_html( $category->name ) . '</a>';
                                }
                            }
                            ?>
                        </div>

                        <div class="post-excerpt">
                            <?php the_excerpt(); // 抜粋を表示 ?>
                        </div>

                        <a href="<?php the_permalink(); ?>" class="read-more">続きを読む</a>
                    </div>
                </article>
                <?php
            endwhile;
            ?></div><?php

            // ページネーションの表示 (次のステップで詳しく解説)
            // この時点ではまだ機能しないが、場所を確保
            if ( $custom_query->max_num_pages > 1 ) {
                echo '<div class="pagination-container">';
                // ページネーションのコードはここに記述
                echo '</div>';
            }

        else :
            // 投稿がない場合のメッセージ
            ?><p>投稿が見つかりませんでした。</p><?php
        endif;

        // メインクエリのリセット（重要！）
        wp_reset_postdata();
        ?>
    </div>
</main>

<?php get_footer(); // フッターを読み込む ?>

このコードを保存してページを更新すると、アイキャッチ、タイトル、日付、投稿者、カテゴリー、抜粋が表示された投稿一覧が確認できるはずです。ただし、この時点ではまだページネーションは機能せず、すべての投稿が1ページに表示されます。

重要: wp_reset_postdata(); の利用

WP_Queryを使ったカスタムループの後には、必ず wp_reset_postdata(); を実行してください。これを忘れると、それ以降のテンプレートタグ（例: サイドバーのウィジェットなど）が期待通りに動作しないなど、予期せぬ問題が発生する可能性があります。

4. ページネーションの設置

投稿数が多い場合、すべての投稿を1ページに表示するとページの読み込みが重くなったり、ユーザーが目的の投稿を探しにくくなります。そこで、ページネーションを設置して複数のページに分割表示します。

先ほどの page-post-list.php の // ページネーションのコードはここに記述 の行を、以下のコードに置き換えます。

PHP
<?php
            // ページネーションの表示
            if ( $custom_query->max_num_pages > 1 ) {
                $big = 999999999; // 非常に大きな数

                echo paginate_links( array(
                    'base'    => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
                    'format'  => '?paged=%#%',
                    'current' => max( 1, get_query_var('paged') ),
                    'total'   => $custom_query->max_num_pages,
                    'prev_text' => '&laquo; 前へ',
                    'next_text' => '次へ &raquo;',
                    'type'      => 'list', // li要素でラップされたulリストを返す
                ) );
            }
?>

paginate_links() は、WordPressが提供するページネーションリンクを生成するための関数です。

  • base: ページネーションリンクのベースとなるURLを指定します。
  • format: ページ番号のフォーマットを指定します。
  • current: 現在のページ番号を指定します。
  • total: 全体のページ数を指定します。これは$custom_query->max_num_pagesで取得できます。
  • prev_text, next_text: 「前へ」「次へ」リンクのテキストを指定します。
  • type: リンクの表示形式を指定します。'list'を指定すると、ul、li構造で出力され、CSSでスタイリングしやすくなります。

5. 投稿表示内容のカスタマイズ

投稿一覧に表示される各投稿の見た目は、page-post-list.php 内の <article id="post-<?php the_ID(); ?>" ...> から /article までのHTMLとCSSで自由にカスタマイズできます。

現在のコードでは、以下の要素が表示されるように設定されています。

  • アイキャッチ画像: <?php the_post_thumbnail('medium'); ?>
  • タイトル: <h2 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  • 日付: <span class="post-date"><?php echo get_the_date(); ?></span>
  • 投稿者: <span class="post-author">投稿者: <?php the_author_posts_link(); ?></span>
  • カテゴリー: <div class="post-categories">...</div> 内でループして表示
  • 抜粋: <div class="post-excerpt"><?php the_excerpt(); ?></div>
  • 続きを読むリンク: <a href="<?php the_permalink(); ?>" class="read-more">続きを読む</a>

これらの要素は、囲んでいるdivやspanタグに適切なクラス（例: post-thumbnail, post-title, post-meta, post-category, post-excerpt など）を付与することで、後述のCSSでデザインを整えることができます。

さらに、以下のような要素も追加できます。

  • タグ: <?php the_tags('<div class="post-tags">タグ: ', ', ', '</div>'); ?>
  • カスタムフィールド: <?php echo get_post_meta( get_the_ID(), 'your_custom_field_key', true ); ?>
  • コメント数: <?php comments_popup_link('コメントなし', '1 コメント', '% コメント'); ?>

表示したい要素に合わせてHTML構造を変更し、クラス名を追加してください。

6. ページネーションの見た目をカスタマイズ

ページネーションの見た目は、CSSを使って自由にカスタマイズできます。先ほど paginate_links() の type パラメータを 'list' に設定したため、出力されるHTMLは<ul class='page-numbers'><li><a>...</a></li>...</ul> のような構造になります。

この.page-numbersクラスや、その子要素に対してCSSを適用します。CSSは、子テーマの style.css ファイルに記述してください。

CSS
/* ページネーション全体 */
.page-numbers {
    list-style: none; /* リストの点マークを消す */
    padding: 0;
    display: flex; /* 横並びにする */
    justify-content: center; /* 中央揃え */
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* 狭い画面で折り返す */
}

/* 各ページリンク/ボタン */
.page-numbers li {
    margin: 0 5px; /* 各要素間の余白 */
}

.page-numbers li a,
.page-numbers li span {
    display: block; /* リンク全体をブロック要素にする */
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 5px; /* 角を丸くする */
    text-decoration: none;
    color: #4CAF50; /* リンクの文字色 */
    background-color: #fff;
    transition: all 0.3s ease; /* ホバー時のアニメーション */
    font-size: 1em;
    min-width: 40px; /* 最小幅を設定 */
    text-align: center;
}

/* ホバー時のスタイル */
.page-numbers li a:hover {
    background-color: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
    text-decoration: none; /* ホバー時に下線を消す */
}

/* 現在のページのスタイル */
.page-numbers li span.current {
    background-color: #4CAF50;
    color: #fff;
    border-color: #4CAF50;
    font-weight: bold;
    cursor: default; /* クリック不可にする */
}

/* 省略記号（...）のスタイル */
.page-numbers li .dots {
    border: none;
    background: none;
    color: #666;
    padding: 10px 0; /* 上下のパディングを調整 */
    cursor: default;
}

/* 最初と最後のページへのリンク */
.page-numbers li:first-child a,
.page-numbers li:last-child a {
    /* 必要に応じて特別なスタイル */
}

このCSSを子テーマのstyle.cssに追加し、ブラウザでページを更新すると、ページネーションの見た目が変更されていることが確認できます。色や余白、角の丸みなど、お好みに合わせて調整してください。

まとめとSEOに関する考慮事項

ここまで、WordPressの固定ページに完全にカスタマイズされた投稿一覧ページを作成する方法を紹介してきました。

この方法のメリット:

  • デフォルトのアーカイブページでは難しい、自由なデザインとレイアウトを実現できる。
  • WP_Queryを使用することで、表示する投稿を細かくコントロールできる（特定のカテゴリーのみ、特定のカスタムフィールドを持つ投稿のみなど）。
  • 投稿一覧の表示内容や見た目をカスタマイズすることができる。

SEOに関する考慮事項:

  • 重複コンテンツの回避:
    もしこの固定ページの内容が、WordPressのデフォルトの投稿アーカイブページ（例: /blog/ や /category/uncategorized/ など）と完全に重複する場合、検索エンジンから重複コンテンツとみなされる可能性があります。

    対策として、この固定ページをメインの投稿一覧として利用し、他のアーカイブページを検索エンジンにインデックスさせない（noindexタグを使用する）、またはカノニカルURLを設定して正規のURLを明示するなどの対応を検討してください。Yoast SEOやRank MathなどのSEOプラグインで設定が可能です。

  • ページの高速化:
    表示する投稿数や画像が多い場合、ページの読み込み速度が低下する可能性があります。画像を最適化し、キャッシュプラグインを導入するなどして、ページの表示速度を向上させることが重要です。
  • セマンティックなHTML:
    記事内で提供したコード例では、article、h2などのセマンティックなHTMLタグを使用しています。これは検索エンジンがコンテンツの構造を理解するのに役立ちます。

このガイドを参考に、あなたのWordPressサイトに最適な投稿一覧ページを構築してみてください。

関連記事

WordPressで子テーマを作る方法

WordPressで子テーマを作って運用するときの子テーマを作る方法をまとめておきます。

WordPressサイトにCSSやJavaScriptのファイルを読み込ませて利用する方法

WordPressで制作したサイトで、WordPressに元々含まれていない外部のCSSやJavaScriptのファイルを読み込ませて利用する際の方法として、推奨されているやり方について紹介していきたいと思います。CDN経由でのファイル読み込み方法とサイトに設置したファイルの読み込み方法についてそれぞれ紹介します。

WordPressのカスタム投稿タイプを作成する方法

WordPressの「functions.php」にコードを追加してカスタム投稿タイプを作成する方法を紹介します。

コメントを残す





This site uses Akismet to reduce spam. Learn how your comment data is processed.

HOME > WordPress > WordPressで固定ページに投稿一覧を作成する方法：完全ガイドとカスタマイズ術