WordPressのWP-Queryでカスタムフィールドの値の配列を変数に格納してfor文で記事情報取得を繰り返しjQueryで順位付け。

WordPressのWP-Queryで記事情報のカスタムフィールドの値を配列で変数に格納し、WP-Queryのループ外でfor文を使って取得した配列の中の要素数の回数だけ指定した処理を繰り返し、表示させたHTMLをjQueryを使って意図した順番に並べ替えます。
jQueryの並べ替えは別ページで
jQueryでHTMLの要素を並べ替えて順位付けする
で詳しく解説しています。
この記事の内容はPHP56で動作します。PHP70以降では正常に動作しません。

実際のサイトの解説

WordPressのカスタムフィールドを利用してサッカーリーグのサイトを運営しています。
試合結果の投稿ページから別に設定している年間ランキングの投稿ページに年間ランキングを表示させます。

サッカーリーグサイトの試合結果ページではカスタムフィールドを設定して、対戦チームや得点や勝点等の試合結果情報を全て入力し、そのカスタムフィールドの値を取り出して、年間ランキング等の各ランキングを別ページで設定して表示させています。

カスタムフィールドはWordPressのプラグインの「Toolset Types」を使用しています。

具体的なカスタムフィールドの設定

カスタム投稿「team」というページで年間登録チームを子ページとして登録しています。
例えば2017年ランキングのページを作る場合、別に子ページで作るカスタム投稿ページ「team」に登録チームを入力し、1ページに1チームを登録していきます。
2017年ランキングページにはカスタムフィールドの「nen」に「2017」と入力します。

そして以下のプログラムで年間ランキングを表示させます。

<?php 
$hweb_query = new WP_Query(
	array(

		'post_type' => 'team',
		'posts_per_page' => -1,
		'meta_query' => 
			array(
				'key'=>'wpcf-nen',
				'value'=>get_post_meta(get_the_ID() , 'wpcf-nen' ,true),
				'compare'=>'='
			)
	)
); ?>

<?php if ( $hweb_query->have_posts() ) : ?>

<?php while ( $hweb_query->have_posts() ) : $hweb_query->the_post();?>

<?php $team_name[] = types_render_field('team_a'); ?>
<?php $team_name2[] = post_custom('wpcf-team_a'); ?>
<?php $yunihoum[] = post_custom('wpcf-yuni_a'); ?>
<?php $yusho_suu[] = post_custom('wpcf-yusho_suu'); ?>
<?php $team_rank[] = types_render_field('team_rank'); ?>
<?php $toukou_nichi[] = get_the_date('d'); ?>
<?php $touroku_team_suu++ ;?>

<?php endwhile;?>
<?php wp_reset_postdata();?>
<?php else : ?>

<?php endif;?>

<h2 class="yearly-title"><?php echo types_render_field('nen'); ?>年チームランキング</h2>

<table class="rank team">
<tbody>
<tr>
<th>順<br>位</th>
<th class="team-name-th">チーム</th>
<th>リ<br>ー<br>グ</th>
<th>優<br>勝<br>数</th>
<th>試<br>合</th>
<th>勝点</th>
<th>勝</th>
<th>分</th>
<th>負</th>
<th>得<br>点</th>
<th>失<br>点</th>
<th>得<br>失<br>点<br>差</th>
</tr>

<?php
$count = count($team_name2);
for ($i = 0; $i< $count; $i++) {
$team_name2_query = $team_name2[$i] ;

$kachi_suu =array();
$kachi_ten_a =array();
$tokuten_a =array();
$shit_ten_a =array();

$wake_suu_a =array();
$kachi_ten_aWake =array();
$tokuten_aWake =array();
$shit_ten_aWake =array();

$wake_suu_b =array();
$kachi_ten_b_wake =array();
$tokuten_b_wake =array();
$shitten_b_wake =array();

$wake_suu =array();
$kachiten_goukei =array();

$make_suu =array();
$tokuten_make =array();
$shitten_make =array();

$tokuten_goukei =array();
$shitten_goukei =array();

$shiai_suu =array();
$toku_shitten_sa =array();

include locate_template( 'nenkan-team-rank-query.php' ); 
}?>

</tbody>
</table>


<div><script>
jQuery('table.team').html(
  jQuery('table.team tr').sort(function(a, b) {
    var x = Number(jQuery(a).attr("id"));
    var y = Number(jQuery(b).attr("id"));
    return y - x;
  })
  );
</script></div>

Wp-Queryで取得して値を変数格納

4行目はWp-Queryのパラメーターでカスタム投稿ページの「team」から、そこに入力しているカスタムフィールドの情報を取得します。
7行目からはカスタムフィールドの値の取得ですが、10行目ページの「get_post_meta(get_the_ID() , ‘wpcf-nen’ ,true)」は年間ランキングページのカスタムフィールドの値です。
ややこしいです。

つまり年間ランキングページの「wpcf-nen」で設定している数値と、カスタム投稿ページの「team」の各ページで設定されている「wpcf-nen」と同じ値のページを取得するという事です。

カスタムフィールドの値の配列を変数に格納

20行目の「$team_name[] = types_render_field(‘team_a’)」から25行目の「$toukou_nichi[] = get_the_date(‘d’)」まではカスタム投稿ページの「team」の複数のページから各カスタムフィールドの値を取得して、配列にして、変数に格納しています。

記事数取得

26行目の「$touroku_team_suu++」は2-11行目までの条件に当てはまる記事数を取得して変数「$touroku_team_suu」に格納しています。

for文の繰り返し処理

54行目の「$count = count($team_name2)」からがfor文の繰り返しの処理です。
「$count = count($team_name2)」で変数「$team_name2」に格納されている要素の数を数えて、変数「$count」に格納します。

「for ($i = 0; $i< $count; $i++) 」で要素数つまりチーム名のある回数「{　}」内の処理を行います。

「$team_name2_query = $team_name2[$i]」は変数「$team_name2_query」に「$team_name2[$i]」つまり「$team_name2[0]」、「$team_name2[1]」、「$team_name2[2]」、「$team_name2[3]」…と要素の数だけfor文で繰り返し格納していきます。
つまり例えば一番最初は21行目で取得した「$team_name2[]」の配列内の「$team_name2[0]」のカスタムフィールドの値が格納されています。

変数の中身を空にする

2019年9月22日:58行目からの変数の値を無にする場合、文字を初期化にする「””」ではなく、配列を初期化する「array()」を使う。
for文で繰り返すと前に処理した値が変数の中に残っていると、その値を合わせてしまって意図した値になりません。
それで一旦「無」にしてから取得した値を変数に入れるという事です。

「get_template_part」では変数を扱えない

86行目の「include locate_template( ‘nenkan-team-rank-query.php’ )」は「get_template_part」では変数を扱えないからです。

HTMLの表

89-90行目の「</tbody>」「</table>」は36行目から始まっている「<table class=”rank team”>」のHTMLの表を閉じています。
「<tr>」は「nenkan-team-rank-query.php」の中に設定されています。

WordPressのWp-Queryでカスタムフィールドの値の配列の合計を足し算してループ外で計算
で解説しています。

jQueryで順位付け

93行目の「<div><script>」からjQueryで「<tr>」を並べ替えてランキングを順位付けしています。
簡単に説明すると「<table class=”team”>」内の「<tr>」の「id」に数値を設定して、その数値の大きい順に並べ替えるというものです。
小さい順にしたければ98行目の「return y – x;」を「return x – y;」とします。

これもカテゴリー「jQuery」の
jQueryでHTMLの要素を並べ替えて順位付けする
で解説しています。