WordPress

カスタムフィールドの値を指定した記事一覧の表示方法

ここでは、投稿で記事一覧を表示させるサブループにカスタムフィールドの値を条件として指定する方法について見ていきます。

カスタムフィールドの作り方を知らない方は、はじめにこちらをご覧ください。

結論から言うと、get_posts()の配列の中に下記を入れることで可能になります。

'meta_key' => '項目名', // カスタムフィールドの項目名
'meta_value' => '値', // カスタムフィールドの値

カスタムフィールドの値を複数指定したい場合はこうなります。

'meta_query' => array(
	'relation' => 'AND',
	array(
		'key' => '項目名1', // カスタムフィールドの項目名
		'value'=> '値1' // カスタムフィールドの値
	),
	array(
		'key' => '項目名2', // カスタムフィールドの項目名
		'value'=> '値2' // カスタムフィールドの値
	)
),

'relation' => 'AND'のところを'OR'にするといずれかの値が一致したものを一覧にすることができます。

それでは実際にコードを一式で見てみましょう。ここでは、例として表示中の投稿で設定したカスタムフィールドの値と一致する記事の一覧を自動表示させることを目的にしてみます。

カスタムフィールドの値を1つ指定した記事一覧

PHP

<?php
global $post;
$post_id = $post->ID;
$field_name = '項目名'; // カスタムフィールドの項目名
$value = post_custom( $field_name );
 
$my_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'meta_key' => $field_name, // カスタムフィールドの項目名
    'meta_value' => $value, // カスタムフィールドの値
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC', // 昇順・降順
    'exclude' => $post_id // 表示中の投稿を除外
));
$count = count($my_posts);
                       
if($count>=1): foreach($my_posts as $post): setup_postdata($post); ?>
 
<!-- ループはじめ -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_category(', ') ?></p>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<!-- ループおわり -->
 
<?php endforeach; wp_reset_postdata(); else: ?>
 
<p>記事がありません。</p>
                
<?php endif ?>

上記は、表示中の投稿に含まれるカスタムフィールドの値1つと同じ値をもつ投稿の記事一覧を作った例です。

コードの解説

説明を見たいコードの行をクリックすると説明が表示されます。

<?php
global $post;
$postというのは、WordPressに最初から入っている変数のひとつで、表示中の投稿に関するいろんな情報(配列)が入っているグローバル変数です。$postをこの後、使用するのでそれに先立ち「グローバル宣言」を行います。
$post_id = $post->ID;
$post->IDは、グローバル変数$postの中から現在の投稿のIDを取得します。これを変数$post_idに代入します。
$field_name = ‘項目名’; // カスタムフィールドの項目名
変数$field_nameにカスタムフィールドの項目名を代入します。
$value = post_custom( $field_name );
上の行で作った変数を使ってカスタムフィールドの値を取得し、変数$valueに代入しています。
 
$my_posts = get_posts(array(
get_posts()は、投稿の一覧を表示させるときに使うお決まりの関数で、取得したい記事の設定を行います。全体の骨組みは下記のようになります。

PHP

<?php
$my_posts = get_posts(array(
    // 取得する投稿の設定
));
global $post;
if($my_posts): foreach($my_posts as $post): setup_postdata($post);
?>
    // ループで設定した投稿データを出力
<?php endforeach; endif; wp_reset_postdata(); ?>

「取得する投稿の設定」のところで取得したい投稿の設定を行い、それを「ループで設定した投稿データを出力」のところで出力します。上記の骨組みは公式のようなものなので覚えてしまっても良いかもしれません。

ここでは、取得したい記事の設定を変数$my_postsに代入しています。

    ‘post_type’ => ‘post’, // 投稿タイプ
投稿タイプの指定を行います。ここでは「投稿(post)」を指定しています。
    ‘meta_key’ => $field_name, // カスタムフィールドの項目名
meta_keyには、カスタムフィールドの項目名を入れます。4行目で項目名を変数$field_nameに代入しているのでこれを指定します。
    ‘meta_value’ => $value, // カスタムフィールドの値
meta_valueには、カスタムフィールドの値を入れます。先ほど変数$valueに取得した値を格納したので、これを指定します。
    ‘posts_per_page’ => 6, // 表示件数
'posts_per_page' => 6,は投稿の表示件数の指定です。「6」のところを表示させたい投稿数に入れ替えてください。
    ‘orderby’ => ‘date’, // 表示順の基準
データをある特定の規則に従って並べ替えることを「ソートする」というのですが、orderbyでは、記事をどんな項目に沿ってソートさせるかを決めます。代表的な項目として下記があります。

順序づけパラメータ 意味
date 投稿日
modified 更新日
name スラッグ
rand ランダム
ID 投稿ID(大文字です)
title タイトル
    ‘order’ => ‘DESC’, // 昇順・降順
orderでは、orderbyで指定した項目を昇順(ACB順)で並べるのか、降順(ACB順の反対)で並べるのかを指定できます。

ASC: 昇順
DESC: 降順

ちなみに初期値は、'DESC'になっていますので、このままで良い場合は行をまるごと削除してしまってかまいません。

    ‘exclude’ => $post_id // 表示中の投稿を除外
表示中の投稿が記事一覧に表示されないよう、ここで'exclude' => $post_idとして現在の投稿IDを除外します。
));
$count = count($my_posts);
条件に合った投稿数を$countに代入します。投稿数を取得するには、配列の数を返すcount()の引数に投稿の配列変数$my_postsを入れます。
                    
if($count>=1): foreach($my_posts as $post): setup_postdata($post); ?>
if(条件): foreach(変数 as $post): setup_postdata($post);の部分は、「もし条件を満たしている場合は、グローバル変数$postへ投稿として記事を1つずつセットします」みたいな意味です。

ここでは、「条件」として該当する投稿が存在すること、つまり投稿数が1つ以上あることを条件にするので、投稿数が格納された変数$count($count>=1)という形でif文の条件に入れます。

foreach文は、

foreach(配列変数 as 変数):
  // 処理する内容
endforeach

という形で「配列変数」に格納されている投稿のまとまりを一つずつ「変数(この場合$post)」として取り出すという働きをします。

 
<!– ループはじめ –>
<h3><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h3>
<p><?php the_category(‘, ‘) ?></p>
<p><?php the_time(‘Y/m/d’) ?></p>
<p><?php the_excerpt(); ?></p>
<!– ループおわり –>
 
<?php endforeach; wp_reset_postdata(); else: ?>
endforeachでforeach文の終了、wp_reset_postdata()setup_postdata($post);のところで変更した$postの投稿に関する情報をリセットしています。

elseの下には、if($count>=1):で条件に該当しなかった(投稿が存在しなかった)場合の内容が入ります。

 
<p>記事がありません。</p>
                
<?php endif ?>
endifは、if文の終了です。

以上が、カスタムフィールドの値を1つ指定した記事一覧のサブループです。

複数のカスタムフィールドの値を指定した記事一覧

先ほどのコードを使って複数のカスタムフィールドの値を指定するとこうなります。

PHP

<?php
global $post;
$post_id = $post->ID;

$key01 = '項目名1'; // カスタムフィールドの項目名1
$key02 = '項目名2'; // カスタムフィールドの項目名2
$value01 = post_custom( $key01 ); // カスタムフィールドの値1
$value02 = post_custom( $key02 ); // カスタムフィールドの値2
 
$my_posts = get_posts(array(
    'post_type' => 'post', // 投稿タイプ
    'posts_per_page' => 6, // 表示件数
    'orderby' => 'date', // 表示順の基準
    'order' => 'DESC', // 昇順・降順
    'exclude' => $post_id, // 表示中の投稿を除外
    'meta_query' => array(
        'relation' => 'AND',
        array(
            'key' => $key01,
            'value'=> $value01
        ),
        array(
            'key' => $key02,
            'value'=> $value02
        )
    )
));
$count = count($my_posts);
                       
if($count>=1): foreach($my_posts as $post): setup_postdata($post); ?>
 
<!-- ループはじめ -->
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<p><?php the_category(', ') ?></p>
<p><?php the_time('Y/m/d') ?></p>
<p><?php the_excerpt(); ?></p>
<!-- ループおわり -->
 
<?php endforeach; wp_reset_postdata(); else: ?>
 
<p>記事がありません。</p>
                
<?php endif ?>

仕組みは、1つの場合とほとんど同じなので説明は割愛させていただきます。
以上が、カスタムフィールドの値を指定した記事一覧の表示方法でした。

最近の記事

  1. CSS

    CSS|中央寄せが効かないときは・・・
  2. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  3. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    要素の配置が簡単に決まるFlexboxの使い方
PAGE TOP