WordPressで特定のページに複数の記事を表示しつつページ送りさせる方法

WordPressで特定のページ（スラッグ）で記事を指定件数分表示して、ページ送り（ページネーション）をだす方法です。

例えば施工事例なんかで、だんだんリフォームが出来上がってきてますよ的な短めの進捗ブログをお見せするページが必要だった場合に活用できます。

仕様と完成イメージ

・「ブログ」メニューを押した時にタイトル、短めの本文、記事内の写真を５件表示させる
・アーカイブページとは違い、各々の記事にリンクを飛ばさない
・５記事分表示したらページ送り（ページネーション）があって過去のブログも５件ずつ見ていけるよ

という感じです。



CSSなどはご自由にカスタマイズくださいませ。

前提

・Wordpressの無料テーマLightningを使用していますが、Wordpressであれば応用できます。
・何かしらテーマを利用していて、そのデザインを崩したくない場合の方法です。
・固定ページの特定のURL（スラッグ）での表示です。
・カテゴリなどの条件でも絞れます。
・Wordpressの一般設定の表示件数設定に依存しないで記事数を取得できます。

スポンサーリンク

固定ページとスラッグを用意しましょう

まず固定ページとスラッグを用意します。

例えば、https://hogehoge.com/blogというページにその内容を表示させるとしましょう。

固定ページから新規作成で記事を投稿してください。その時のパーマリンクをblogに指定してください。

本文はなくてOKです。これで保存します。

スポンサーリンク

page-XXX.phpを用意しましょう。

次にpage-XXX.phpを用意しましょう。

XXXとは先ほど指定したblogのことですので、今回はpage-blog.phpというファイルを作成します。

あなたが固定ページにhttps://hogehoge.com/reportというページを作成したのであればpage-report.phpが必要です。

このファイルは何かというと何をしているかというと、

ということなのです。

「wordpress テンプレート階層」などで調べると無限に出てきますので参考にしてみてくださいね。

それではpage-XXX.phpを編集していきます。

肝となるソースはこの部分です。表示数を変えたい場合にはposts_per_pageの数字を変えてくださいね。
カテゴリで抽出したい場合には、’category_name’ => ‘XXX’　（XXXはカテゴリのスラッグ）というのを
‘post_status’ => ‘publish’の下に足せばOKですね。（カンマのつけ忘れに注意してください。）

	<?php
$paged = (int) get_query_var('paged');
$args = array(
    'posts_per_page' => 5,
    'paged' => $paged,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => 'post',
    'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
    <div class="post-frame">
        <h1 class="title"><?php the_title(); ?></h1>
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>
 
<?php
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'total' => $the_query->max_num_pages
    ));
}
?>

ここが肝なのですが、お使いのテーマのベースがあると思うので注意してください。

例えばですが、Lightningだったら親テーマにpage.phpが存在しており、
サイドバーやh1のクラス名などすでに決まっている場合があると思います。

なので、今回page-XXX.phpを作る際は

1:親テーマのpage.phpをpage-XXX.phpにコピーする

2:page.phpで、テンプレートの呼び出し部分をコメントアウト（これをコメントアウトしないと、もともとの固定ページのように記事内容が出てきます）

※Lightningだったら以下のような感じでget_template_partのところをコメントアウト

<?php // get_template_part( 'module_loop_post' ); ?>　

3:以下のコードをかくという流れになるかと思います。記述する場所は検証を使いつつ、見極めましょう。LightningだったらpostListというdiv要素の直下ですね。

	<?php
$paged = (int) get_query_var('paged');
$args = array(
    'posts_per_page' => 5,
    'paged' => $paged,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => 'post',
    'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
?>
    <div class="post-frame">
        <h1 class="title"><?php the_title(); ?></h1>
        <?php the_content(); ?>
    </div>
<?php endwhile; endif; ?>
 
<?php
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'total' => $the_query->max_num_pages
    ));
}
?>

page-XXX.phpの編集が終わったら保存をしてwp-themesフォルダ以下のご自身のテーマファイルにおきます。

子テーマを作成されている場合は子テーマにおきましょう。

最後に、https://hogehoge.com/XXXでアクセスしてみて、うまく表示されていればOKです。

どうしてもわからないことがある場合は、MENTAに無料で会員登録してメンターを探してみましょう。人気のメンターはすぐ募集が終了してしまうので、早めの利用がおすすめです。

それでは！