WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

WP_Query()でのループ取得からページネーション実装までの解説と、よく使うパラメーター、テンプレートタグのまとめ

タグ:

ワードプレスでループを表示させるには大きく分けて二つあります。

  • WP_Query()
  • get_posts()

どちらも投稿でループを取得する際によく出てくるものですが大きな違いは取得できる情報です。

WP_Query() 投稿(記事)、カテゴリ、タグ、固定ページの情報が取得できる
get_posts() 投稿(記事)に関する情報のみが取得できる。

取得したい情報に合わせて使い分ける必要がありますね。
投稿のループに限定すると、get_posts()の方が情報の取得量が少ないため処理が早いと言えます。
ただ、通常のWebサイトであれば大きな違いはなく体感できるほどではないのでまずはどちらか片方を覚えておくといいでしょう。

WP_Query()でのループ取得からページネーション実装までの解説と、よく使うパラメーター、テンプレートタグをまとめます。

ループ表示からページネーション出力までのコード

まずは本記事のタイトルにあるループ表示からページネーション出力までのコードを紹介します。

<?php
/* ページネーション用の変数設定 */
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
/* パラメーター設定 */
$args = array(
    'post_status'=> 'publish', // 公開状態を選択
    'post_type' => 'post', // デフォルトの投稿の場合は'post'、カスタム投稿タイプは'投稿タイプ名'
    'posts_per_page' => 3, // 1ページあたりの表示件数
    'paged' => $paged // ページネーション用設定(現在のページ番号が代入されます。)
);
// パラメーターを渡して情報を取得
$the_query = new WP_Query($args);
// 投稿があるかを確認
if ( $the_query->have_posts() ) {
    echo '<ul>';
// while ( $the_query->have_posts() ) {}でループさせます。
    while ( $the_query->have_posts() ) {
// $the_query->the_post()でループ内の情報をセット
        $the_query->the_post();
        //ここに処理を書く
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
}else{
    echo '投稿はありません。';
}

/* ページネーションがあるかどうかを確認 */
if ($the_query->max_num_pages > 1){
    /* ページネーションを表示 */
    $big = 999999999999; 
    echo paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))), // ベースURLをセットします。
        'format' => '?paged=%#%', // ページ番号のフォーマット
        'current' => max(1, get_query_var('paged')), // 現在のページ番号
        'total' => $the_query->max_num_pages // 総ページ数
    ));
}
//投稿データをリセット
wp_reset_postdata();
?>

投稿ループの解説

ループの処理は以下で行なっています。

<?php
/* ページネーション用の変数設定 */
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
/* パラメーター設定 */
$args = array(
    'post_status'=> 'publish', // 公開状態を選択
    'post_type' => 'post', // デフォルトの投稿の場合は'post'、カスタム投稿タイプは'投稿タイプ名'
    'posts_per_page' => 3, // 1ページあたりの表示件数
    'paged' => $paged // ページネーション用設定(現在のページ番号が代入されます。)
);
// パラメーターを渡して情報を取得
$the_query = new WP_Query($args);
// 投稿があるかを確認
if ( $the_query->have_posts() ) {
    echo '<ul>';
// while ( $the_query->have_posts() ) {}でループさせます。
    while ( $the_query->have_posts() ) {
// $the_query->the_post()でループ内の情報をセット
        $the_query->the_post();
        //ここに処理を書く
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
}else{
    echo '投稿はありません。';
}
?>

ページネーションを表示する際には自分のいるページの情報が必要です。
ここで1ページ名にいる場合は『1』、2ページ名にいる場合は『2』という情報を取得しています。

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

次にパラメーター(どんな情報を取得したいのか?といった情報)をセットして配列で変数に格納します。

$args = array(
    'post_type' => 'post', // デフォルトの投稿の場合は'post'、カスタム投稿タイプは'投稿タイプ名'
    'posts_per_page' => 8, // 1ページあたりに表示する投稿の件数
    'paged' => $paged // 現在のページ番号を挿入
);

『’post_type’ => ‘post’』でデフォルトの投稿を指定しています。カスタム投稿を取得したい場合は投稿タイプのスラッグを指定するとその投稿が取得できます。
『’posts_per_page’ => 8』で1ページあたりに表示したい投稿の件数を指定できます。
『’paged’ => $paged』では自分がいるページの番号を指定しています。

次に『$the_query = new WP_Query($args);』で設定したパラメーターを渡してループを回していきます。WP_Queryはパラメーターを渡してデータベースの中から一致した情報を取得してくれます。情報を絞り込むといった感じですね。

$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) {
    echo '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        //ここに処理を書く
        echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    echo '</ul>';
}else{
    echo '投稿はありません。';
}

『if ( $the_query->have_posts() ) {}else{}』ではWP_Queryで取得した情報にループが存在するかどうかを確認します。もしデータがあれば『while ( $the_query->have_posts() ) {}』でループを回します。この中に処理を書いていきますが、『$the_query->the_post();』が必ず必要になります。『$the_query->the_post();』では現在のループの情報をセットしたり、ループの回数をカウントアップしたりする大事な役割を担っています。ループ内ではさまざまなテンプレートタグが用意されていて簡単に投稿情報の中から値を取り出してくれます。

よく使うパラメーター

投稿タイプで絞り込む

『’post_type’ => ‘post’』を使用します。

post_type' => 'post'

複数の条件を指定する場合は配列で以下のように指定します。

'post_type' => array(
    'post',
    'page',
    'custom_post_slug'
)

主に使用するのは以下のようなものでしょう。

デフォルトの投稿を取得 post
固定ページを取得 page
投稿タイプを取得 投稿タイプのスラッグ名、もしくはID名を指定
特定のカテゴリーを絞り込む

カテゴリーを絞り込んで表示させたい場合は以下のように指定します。

カテゴリーのIDで指定する
'cat' => 3,

複数指定したい場合は以下のようにカンマ区切りで指定します。

'cat' => '3 , 4',
カテゴリーのスラッグ名で指定する
'category_name' => 'fruits'

複数指定したい場合は以下のようにカンマ区切りで指定します。

'category_name' => 'fruits , vegetables'
特定のカテゴリーを除外する場合

特定のカテゴリーを投稿に表示したくない場合は『category__not_in』で、カテゴリーのID名で除外することができます。

'category__not_in' => 3

複数指定したい場合はカンマ区切りで指定します。

'category__not_in' => '3 , 4'
特定のタグを絞り込む

タグを絞り込んで表示させたい場合は以下のように指定します。

タグのIDで指定する
'tag_id' => 3

複数指定したい場合は『tag__and』を使用します。

'tag__and' => array( 3, 4 )
タグのスラッグ名で指定する
'tag' => 'fashion'

複数指定したい場合は『tag_slug__and』を使用します。

'tag_slug__and' => array( 'fashion , lifestyle'),
特定のタグを除外する場合

特定のタグを投稿に表示したくない場合は『tag__not_in』、カテゴリーのID名で除外することができます。

'tag__not_in' => 3

複数指定したい場合は配列で指定します。

'tag__not_in' => array( 3, 4 )
カスタムタクソノミーで絞り込み

カスタムタクソノミーを絞り込んで表示させたい場合は『tax_query』を使用します。

'tax_query' => array ( 
    array ( 
        'taxonomy' => 'area',
        'field' => 'slug',
        'terms' => array('tokyo', 'fukuoka'),
        'operator' => 'AND'
    )
)

配列でパラメーターを渡します。
『’taxonomy’ => ‘area’』でカスタムタクソノミーのスラッグ名を指定します。
『’field’ => ‘slug’』ではタームをスラッグで指定するかIDで指定するか選択します。
『’terms’ => ‘tokyo’』でターム名を指定します。
『’operator’ => ‘AND’』では、上で設定した項目を含む、含まないなどを指定します。
上に設定した『両方を取得する場合』は’AND’、『どちらかが含まれている場合は』’IN’どちらか / 『どちらも含まれない場合は』’NOT IN’を設定します。

複数のタクソノミーを指定する場合は以下のように配列で渡します。

'tax_query' => array (
    'relation' => 'OR',
    array (
        'taxonomy' => 'area',
        'field' => 'slug',
        'terms' => array('tokyo', 'fukuoka'),
        'operator' => 'AND'
    ),
    array(
        'taxonomy' => 'type',
        'field' => 'slug',
        'terms' => array('new', 'used'),
        'operator' => 'AND'
    )
)

『’relation’ => ‘AND’』配列で渡した情報の両方を含む場合、『’relation’ => ‘OR’』でいずれかを含むものを指定できます。

カスタムフィールドで絞り込み

カスタムフィールで絞り込みたい場合は『’meta_query’ => ”』を使用します。

'meta_query' => array(
    'relation' => 'AND',
    array(
        'key' => 'prefecture', //フィールド名
        'value' => '東京都', //フィールドに入力されている値
        'compare' => '=' //値と一致する
    ),
    array(
        'key' => 'city', //フィールド名
        'value' => array('中央区','墨田区') //フィールドに入力されている値
        'compare' => 'IN' //いずれかを含む
    ),
)

『’relation’ => ‘AND’』で条件を指定します。
『key’ => ”』でフィールド名を指定します。プラグインのAdvancedCustomFieldを使用している場合はフィールド名ではなく名前と書かれている場合があります。
『’value’ => ”』で指定する値を入力します。複数指定する場合は配列で渡します。
『’compare’ => ”』は条件指定です。
以下に値、機能をまとめます。

記号 機能
‘=’ 値と一致する
‘!=’ 値と一致しない
‘>’ 値より大きい(数値・日時)
‘>=’ 値より大きいか、等しい(数値・日時)
‘<‘ 値より小さい(数値・日時)
‘<=’ 値より小さいか、等しい(数値・日時)
‘LIKE’ 文字列に値が含まれる
‘NOT LIKE’ 文字列に値が含まない
‘IN’ 配列で指定した値のいずれかに一致する
‘NOT IN’ 配列で指定した値のいずれにも一致しない
公開状態を指定する

『’post_status’ => ”』で公開状態を指定できます。

'post_status'=> 'publish'

配列で渡すことで複数の公開状態を指定できます。
以下、Web制作で出てくる機会のある値を紹介します。

'post_status' => array(
    'publish',  // 公開済みの投稿
    'draft',  // 下書きに保存している投稿
    'private'  // ログインしていないユーザーに見えない投稿
)
投稿の並び順を指定する

『’order’ => ”』でソート順を指定できます。

'order' => 'ASC'

ソート順を昇順にする場合はASC、降順にする場合はDESCの値を渡します。

『’orderby’ => ”』で並びの基準に何を設定するかを指定します。

'orderby' => 'date'

以下はよく使う値です。

ID 投稿 ID
author 著者
title タイトル
name スラッグ
type 投稿タイプ
date 投稿日時
modified 更新日時
rand ランダムに表示する
meta_value カスタムフィールドの値
meta_value_num カスタムフィールドの値の数値
menu_order 管理画面の並び順

よく使うテンプレート

タイトルを出力する
<?php the_title(); ?>

タイトルタグをタグで括る場合はカンマ区切りで前後の値を入れます。

<?php the_title( '<h1 class="title">', '</h1>' ); ?>

取得と出力を分ける場合は以下を使用します。

<?php 
    $title = get_the_title();
    echo $title;
?>
本文を出力する
<?php the_content(); ?>

取得と出力を分ける場合は以下を使用します。

<?php 
    $content = get_the_content();
    echo $content;
?>

テキストデータだけを取得したい場合は『strip_tags()』でHTMLタグとPHPタグを削除します。

<?php 
    $content = get_the_content();
    echo strip_tags($content);
?>
抜粋を出力する
<?php the_excerpt(); ?>

上記ではpタグで囲われて出力されます。
pタグを除去したい場合はfunstions.phpに以下を記載するか・・・

remove_filter('the_excerpt', 'wpautop');

取得と出力を分ける方法があります。

<?php
    $excerpt = get_the_excerpt();
    echo $excerpt;
?>
投稿日を出力する

『the_date()』で表示もできますが同じ日付の投稿では出力されないため、時間を取得する『the_time()』に値を渡して使用した方が便利でしょう。

<?php the_time('Y-m-d'); ?>

上記では2024-07-24と表示されます。他のフォーマットで表示したい場合は以下を参考にしてください。

<?php
    the_time('Y-m-d'); // 2024-07-24
    the_time('Y.n.j'); // 2024.7-24
    the_time('Y年n月j日'); //2024年7月24日
    the_time('Y年n月j日(l)'); //2024年7月24日(月曜日)
?>

取得と出力を分ける場合は以下です。

<?php
    $time = get_the_time('Y-m-d'); 
    echo $time;
?>

timeタグで出力する場合は以下のようになります。

<?php
    $time = get_the_time('Y-m-d'); 
?>
<time datetime="<?php echo $time ; ?>"><?php echo $time ; ?></time>
更新日を出力する
<?php the_modified_time('Y-m-d'); ?>

『the_time()』と同じく値を渡すことでフォーマットを指定することができます。
取得と出力を分ける場合は以下です。

<?php
    $modified_time = get_the_modified_time('Y-m-d');
    echo $modified_time;
?>

timeタグで出力する場合は以下のようになります。

<?php
    $modified_time = get_the_modified_time('Y-m-d');
?>
<time datetime="<?php echo $modified_time ; ?>"><?php echo $modified_time ; ?></time>
投稿へのリンクを出力する
<?php the_permalink(); ?>

取得と出力を分ける場合は以下です。

<?php 
    $link = get_the_permalink();
    echo $link;
?>
投稿IDを出力する
<?php the_ID(); ?>

取得と出力を分ける場合は以下です。

<?php 
    $post_id = get_the_ID();
    echo $post_id;
?>
カテゴリーを出力する
<?php the_category(); ?>

カテゴリーの取得・出力については【PHP8.3エラー対応済み】ワードプレス、カテゴリーの取得と出力一覧で詳しく解説しています。

タグを出力する
<?php the_tags(); ?>

タグの取得・出力については【PHP8.3エラー対応済み】ワードプレス、タグの取得と出力一覧。で詳しく解説しています。

カスタムフィールド(Advanced Custom Fields)を出力
<?php the_field(); ?>

カスタムフィールド(Advanced Custom Fields)の取得・出力については【PHP8.3対応済み】Advanced Custom Fields (ACF)でよく使う取得、出力一覧で詳しく解説しています。

ページネーションの解説

/* ページネーションがあるかどうかを確認 */
if ($the_query->max_num_pages > 1){
    /* ページネーションを表示 */
    $big = 999999999999; 
    echo paginate_links(array(
        'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))), // ベースURLをセットします。
        'format' => '?paged=%#%', // ページ番号のフォーマット
        'current' => max(1, get_query_var('paged')), // 現在のページ番号
        'total' => $the_query->max_num_pages // 総ページ数
    ));
}

『if ($the_query->max_num_pages > 1){}』でページネーションがあるかどうかを確認します。
次にページ番号リンクを取得する『get_pagenum_link()』ではループを行なっているURLを取得できます。また、大きな数値を変数に入れて渡していますが、999999999999に特に意味はなくWordpressの公式リファレンスガイドで記載されていてよく使用される数値というだけです。
『’base’ => ”』でURLが設定されます。
『’current’ => ‘max(1, get_query_var(‘paged’))’』で現在のページ番号(リンクを表示させない)ページ番号を指定、『’total’ => $the_query->max_num_pages』でそうページ数を渡しています。

『paginate_links(array()』でページネーションを生成して『echo』で出力します。

まとめ

以上、『WP_Query()でのループ取得からページネーション実装までの解説と、よく使うパラメーター、テンプレートタグのまとめ』でした。WP_Query()は取得できる情報が多いためいろんな場面で活躍することができます。初心者の方はこれを覚えておくだけで便利でしょう。

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。