wordpress ACF Group の分岐がうまくいかない

Question

前提・実現したいこと

wordpressのadvanced custom fields
のgroupをつかってます。

sp1〜sp21というサブフィールドになにも入ってなかったら非表示としたいのですが、
なぜか<h4 class="mb20">本体仕様</h4>の部分だけ表示されてしまいます。

どこが悪いのでしょうか？？

該当のソースコード

<?php if( have_rows('spec') ): ?>
<?php while( have_rows('spec') ): the_row();?>
	<h4 class="mb20">本体仕様</h4>
	<?php
	$i = 1;
	while ($i < 21) {
	    //echo $i;
	    $i++;
			if(get_sub_field("sp" . $i)){
				echo "<dl class='d-flex'>";
				$field = get_sub_field_object("sp" . $i);
				echo "<dt>". $field['label'] ."</dt><dd>";
				echo the_sub_field("sp" . $i);
				echo "</dd></dl>";
			}
	}
	endwhile;
?>
<?php else: ?>
<?php endif; ?>

Answer 1

h4がifの状態と関係ない位置にあるからです。

なので、例えば変数に保存しておいて後で出力するとか、する必要があります。

<?php if( have_rows( 'spec' ) ): while( have_rows( 'spec' ) ): the_row();
	$tmp = '';
	$i = 1;
	while ( $i < 21 ) {
		$i++;
		if ( get_sub_field( 'sp'.$i ) ) {
			$tmp .= '<dl class="d-flex">';
			$field = get_sub_field_object( 'sp'.$i );
			$tmp .= '<dt>'. $field[ 'label' ].'</dt><dd>';
			$tmp .= get_sub_field( 'sp'.$i );	// the_sub_fieldは出力してしまうため。（ echo the_sub_field("sp" . $i); はおかしい）
			$tmp .= '</dd></dl>';
		}
	}
	if ( $tmp ) {
		echo '<h4 class="mb20">本体仕様</h4>';
		echo $tmp;
	}
endwhile; endif; ?>

【ACF | the_sub_field()】
https://www.advancedcustomfields.com/resources/the_sub_field/

Comments

[Natsu9999]

とても勉強になりました！ありがとうございます。