【WordPress】無理やりな動的テーブルを実装してみて

2023年12月6日

表というものは物事を整理し、見る人に情報をわかりやすく伝える手段。

なので、見る人や使う人にわかりやすい実装を心がけていますが。

横に伸びる表はドキドキします。

Contents

1. 動的なテーブル
2. 投稿を扱うのではなく投稿「データ」を扱う
3. foreachのネスト
4. CSSの方が良かった？データの問題？

動的なテーブル

表に表示する情報の量が変動する動的なテーブルの場合。

表示内容を厳選してカラムを指定し、縦に伸びるテーブルにするのが良いのかなと。

比較対象として合っているかはわかりませんが、ワードプレスのループを使用して投稿の一覧を表示する場合。

１投稿につき１行(という言い方をさせてもらいます。)で、投稿がズラっと縦に並び。

ページネーションが付く、というような感じです。

ブラウザ上に表示する場合、閲覧に使用するモニターやスマホの画面は横幅が決まっていることもあり、横に長くなるよりは縦に長くなる方が見やすいはず。

ですが、表の内容によっては横に長くせざるを得ない・・・

という事がありました。

エクセルで作成したひたすら横に長くなるような、項目の多いものではないのでまだ良いですけどね。

なので、通常のループで縦並びに表示される投稿データを無理やり横並びにする方法です。

投稿を扱うのではなく投稿「データ」を扱う

最初はループで適当にと思ってましたが、使用するデータが各投稿内のカスタムフィールドの値。

カスタムフィールド名は同じでも、投稿が違えばIDも違う。

ループで表示すると、まとめて表示したいデータが縦並びで表示されてしまう。

・・・という感じで、table設計のループに陥りました。

なのでとりあえず表示したいデータでtableを組んでみて考えた結果。

箱だけ用意して、データを入れるような設計にすれば良いのではないかと思ったわけです。

その箱を動的にするのが、該当する投稿数になるようにすればカラム数も問題ないかなと。

で、クエリで投稿数の絞り込みを行うので、各投稿に登録されているカスタムフィールドの値を配列に突っ込めればカラム数＝表示するデータ数になるかと。

プログラムは基本上から順に読み込まれるように、データの読み込みと実行も順番ですしね。

なので、WP_Queryではなくget_posts()で投稿データを取得し、カスタムフィールド毎の値をまとめることに。

ここまでのコードはこんな感じです。

<?php
$args = array(
                'post_type' => 'yokonarabi-schedule',
                'post_status' => 'publish',
                'posts_per_page' => -1,
                'meta_value' => $start_date->format( 'Y/m/d' ),
            );

$yokonarabi_schedule = get_posts( $args );
            foreach( $yokonarabi_schedule as $post ){
                setup_postdata( $post );
                if( get_field( 'monday-group', $post->ID )['mon-schedule'] != false){
                    $monday_schedules[] = get_the_ID();
                }
                if( get_field( 'tuesday-group', $post->ID )['tue-schedule'] != false){
                    $tuesday_schedules[] = get_the_ID();
                }
}
?>

実は、前回書いた自分の失敗談で紹介したスケジュール表の続きなのです。

【WordPress】目に入ってくるのは自分にとって都合の良い情報ですね。

今回は自戒の記事です。結論から言うと。「リファレンスを読むときは、自分に都合の良い情報だけでな ...

https://pirock-oq.info/post-161/

とりあえず実装したものの。

「見にくいから日付毎にまとめて、横並びにして！」

・・・とのこと。

クエリで今日の日付を取得し、同じ日付がカスタムフィールドに入力されている投稿に絞り込みます。

そして投稿データを使うので、setup_postdata()で投稿情報を呼び出し、曜日に対応するカスタムフィールドの値を曜日ごとに配列に入れます。

とりあえずは使用したいデータの収集はできました・・・

foreachのネスト

次は収集したデータを表に入れ込んで行きます。

行ごとにth要素をラベルとして配置し、配列にしたデータを横並びに表示するというのを、foreachをネストして実行します。

<table style="width: max-content;">
　　　<thead>
  　<th class="nippou-th">
   <?php
    $this_week_monday = $start_date->modify( 'Monday this week' );
    echo $this_week_monday->format( 'm/d' );
   ?>
  (月)</th>
  <?php
   foreach( $monday_schedules as $id ){
  ?>
  <th class="nippou-th">
   <?php
    echo '<a href="' . get_the_permalink( $id ) . '">' . get_field( 'schedule-title', $id )->post_title . '</a>';
   ?>
  </th>
 <?php
  }
 ?>
</thead>
 <tbody>
  <tr>
   <td class="nippou-th">内容</td>
    <?php
     foreach( $monday_schedules as $id ){
    ?>
     <td class="nippou-td">
      <?php
       foreach( get_field( 'monday-group', $id )['mon-naiyou'] as $sagyouin ){
        echo get_the_title( $sagyouin ) . "<br/>";
       }
      ?>
     </td>
    <?php
     }
    ?>
  </tr>
 </tbody>
</table>

まずはスケジュールが登録されている投稿を配列に入れた分だけ実行してもらい、箱を作ります。

その中で、スケジュールの内容を配列分実行してもらいます。

･･･という感じで、投稿数の分だけ横に伸びる表の完成です。

心配だったので何回もダミーデータで試し、ズレがなかったのでこれで良いかなと。