Advanced Custom Fieldsのリピーターフィールドでのrowspanに対応した表作り！

下図のように繰り返しフィールドにth列とtd列の入力欄を作成、

入力ルールはthを空欄にした場合次の行のthがつながる、それだけ！

thに入力があるかないかの条件分岐を付けて出力させます。

この時点でrowspan以外の部分は出力されますが表はガタガタになります。

<div class="TBL">
<table>
<thead>
<tr><th class="col01">見出し</th><th class="col02">内容</th></tr>
</thead>
<tbody>
<?php while(the_repeater_field('table1')): ?>
<tr>
<?php if(get_sub_field('th')): ?>
    <th class="col01"><?php the_sub_field('th'); ?></th>

<?php endif; ?>
    <td class="col02"><?php the_sub_field('td'); ?></td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>

<?php $i = 0;$count = 0; ?>
<?php while(the_repeater_field('table1')): ?>
    <?php if(get_sub_field('th')):

    $i++;
    $count = 0;
?>

    <?php else : ?>

    <?php endif; ?>

<?php 
$count++;
${"row".$i} = $count;
endwhile; ?>

$iはthを数え、$countでrowspanの数を数えます。

$countはループごとに増え、次のthが来た際にリセットするので

${“row”.$i} = $count;

で$i行目のthのrowspanの数は$countです、と値を覚えさせます。

表の出力時にrowspanの数を求めたときと同じように何個目のthか数えるようにします。

新しいループなので$iの初期値を1にします。

 ${“row”.$i}に各thのrowspanの数が格納されているのでthにrowspanとして出力させます。

<?php $i = 1; ?>
<?php while(the_repeater_field('table1')): ?>
<tr>
<?php if(get_sub_field('th')): ?>
    <th class="col01" rowspan="<?php echo ${"row".$i}; ?>"><?php the_sub_field('th'); ?></th>

<?php $i++;endif; ?>
    <td class="col02"><?php the_sub_field('td'); ?></td>
</tr>
<?php endwhile; ?>

<div class="TBL">
    <table>
        <thead>
            <tr><th class="col01">見出し</th><th class="col02">内容</th></tr>
        </thead>
        <tbody>
        <?php $i = 0;$count = 0; ?>
        <?php while(the_repeater_field('table1')): ?>
            <?php if(get_sub_field('th')):

            $i++;
            $count = 0;
        ?>

            <?php else : ?>

            <?php endif; ?>

        <?php 
        $count++;
        ${"row".$i} = $count;
        endwhile; ?>
        <?php $i = 1; ?>
        <?php while(the_repeater_field('table1')): ?>
        <tr>
        <?php if(get_sub_field('th')): ?>
            <th class="col01" rowspan="<?php echo ${"row".$i}; ?>"><?php the_sub_field('th'); ?></th>

        <?php $i++;endif; ?>
            <td class="col02"><?php the_sub_field('td'); ?></td>
        </tr>
        <?php endwhile; ?>
        </tbody>
    </table>
</div>

今回は変数のナンバリングをしてそこに値を更新していくところが肝でした。

あまり使う機会が無いようで意外と使うと思います。（どっちだよ）

他の表エディターなどを使いこなせるクライアントであれば不要ですが複雑な操作が苦手であればこれぐらいシンプルな入力欄がいいと思います。

もっと複雑にコンテンツをループさせる際などにも応用できますね。

というわけで本日はこの辺で失礼します！

次回もこの時間に（桜が咲くころですかね笑）スイッチオン！

ではサラダバー！