ワードプレスはブログ投稿を管理する上で便利なプラットフォームとなりますが、例えば不動産情報サイトや求人情報サイト、食べログのような飲食店のレビュー比較サイトなどのように、個別の情報をデータベース化したサイトとして管理する際にも重宝するシステムです。
ただ、その際には「必要な情報」を「表示したい順序」でアウトプットするカスタマイズが必要になります。
このページでは、ワードプレスのメインループ・サブループそれぞれで欲しい情報を表示させるためのカスタマイズ方法を紹介します。
目次
メインループで表示する内容をカスタマイズする
ワードプレスのメインループをざっくり説明すると、デフォルトの「投稿一覧」「投稿カテゴリー一覧などアーカイブ一覧」「サイト内検索結果一覧」など、登録されている投稿情報の一覧を表示させるための基本のループを指します。（ざっくりなので認識が間違っていればすみません）
以下のような記述を行い、デフォルトでは「公開日が新しい順序」でループ情報が表示されます。
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- ループさせる内容 -->
<?php endwhile; endif; ?>こちらのメインループで表示させる内容・順序を変更するには、pre_get_posts というアクションフックを使うと自在にコントロールすることができます。
例えば、食べログのようなレビュー比較サイトで、レビュー評点順にソートしてループ表示したい場合、functions.php に以下のような記述を行います。
// メインループにおける投稿の並び順を変更
function mainloop_change( $query ) {
if ( is_admin() || ! $query->is_main_query() ) {
return;
}
if ( $query-> is_home() . is_archive() . is_search() ) {
$query->set( 'meta_key', 'review_score' );
$query->set( 'orderby', 'meta_value_num' ); // 数値でソートする場合は 'meta_value' でなく 'meta_value_num' を使う
$query->set( 'order', 'DESC' );
}
}
add_action( 'pre_get_posts', 'mainloop_change' );コード解説
- カスタムフィールドに登録したレビュー評点を記載するフィールド
review_scoreのスコアが高い順にループ表示させる - ループを適用させる場所は、（固定ページ化していない）トップページの記事一覧、カテゴリー・タグなどのアーカイブページ、サイト内検索結果ページ
ソートさせる内容・順序のパラメーターは、下記を参照してください。
また、ページによってループ順序を変更したい場合は条件分岐タグを使うこともできます。
サブループで表示する内容をカスタマイズする
ワードプレスのメインループに対してサブループとは、サイドバーやページ下部に任意の記事を表示させたり、トップページにお知らせ一覧を表示させる際など、部分的にループ表示させる時に使用します。（ざっくりなので認識が間違っていればすみません）
また、部分的な表示だけでなく、任意の固定ページを用意して欲しい情報を表示させるといったことも可能です。
このカスタマイズには、WP Query を使うことで柔軟な設計を行うことができます。
例として下記のページは、当サイトで扱うアイテムをカスタム投稿で管理し、タームに応じて出力内容を変えています。
ループ表示させる内容は、上記のような投稿タイプ別にすることはもちろん、カテゴリー・タグ別、カスタムフィールドの値別にするなど、条件設定できる項目は多岐にわたります。
WP Query を使った基本的なループ表示
特定のカテゴリーやタグに属する記事一覧をページネーション付きで表示させたい場合など、欲しい大抵のページは下記のような記述で取り出すことができます。
<?php
$args = array(
'paged' => $paged,
'post_type' => 'post',
'category_name' => 'category_slug', // カテゴリーの場合
'tag' => 'tag_slug', // タグの場合
'posts_per_page' => 10,
'orderby' => 'date',
'order' => 'DESC',
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ): while ( $the_query->have_posts() ): $the_query->the_post(); ?>
<!-- ループ内容 -->
<?php endwhile; endif; ?>
<div class="pagenation">
<?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,
'mid_size' => 2,
'current' => ($paged ? $paged : 1),
'prev_text' => '前',
'next_text' => '次',
) );
}
wp_reset_postdata();
?>
</div><!-- pagenation -->複数のカスタムフィールドの値によってソート
先ほどのメインループの章で例とした「レビュー評点」に加え、さらにその「レビューの投稿数」の値によって並び替えたいなど、複数のカスタムフィールドの値によってソートさせたい場合は以下のような配列で指定します。
<?php
$args = array(
'paged' => $paged,
'post_type' => 'post',
'posts_per_page' => 10,
'meta_query' => array(
'relation' => 'AND',
'review_score' => array(
'key' => 'review_score',
'type' => 'NUMERIC',
),
'review_count' => array(
'key' => 'review_count',
'type' => 'NUMERIC',
),
),
'orderby' => array(
'review_score' => 'DESC',
'review_count' => 'DESC'
)
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ): while ( $the_query->have_posts() ): $the_query->the_post(); ?>
<!-- ループ内容 -->
<?php endwhile; endif; ?>
<?php wp_reset_postdata(); ?>他の関数と併用するとおもしろいループを作成できる
ワードプレスには様々な関数が用意されているため、例えば投稿 ID、タイトル、スラッグ、ターム情報、カスタムフィールドの値などを取得して変数に代入しておき、それを元にループを回すと結構おもしろいサイトを作れると思います。
以上、ワードプレスのループをカスタマイズする Tips でした。
個人的に WP Query の関数レファレンスが、Codex で見る機会が一番多いページだと思いました。
