- Custom Field Suiteを使用した、ループの入れ子(ループの中のループ)の記述が分からない…
- 入力項目が空の時の条件分岐の書き方も知りたいな!
- ループの中身が空の場合、「Warning: Invalid argument supplied for foreach()」とエラーが発生する…
このような疑問にお答えします!
<目次>
【Custom Field Suite】ループの入れ子(ループの中のループ)を作成する方法
結論のコードは下記のとおり。
<?php $fields = CFS()->get('parent_loop'); ?>
<?php if(is_array($fields)): ?>
<!-- 繰り返し -->
<?php foreach($fields as $field): ?>
<?php echo $field['parent_title']; ?>
<?php $fields_child = $field['child_loop']; ?>
<?php if(is_array($fields_child)): ?>
<!-- 繰り返し -->
<?php foreach($fields_child as $field_child): ?>
<?php echo $field_child['child_title']; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
使い回し可能なコピペ用のコードも記載しますので、自由に使ってください!
<?php $fields = CFS()->get(''); ?>
<?php if(is_array($fields)): ?>
<!-- 繰り返し -->
<?php foreach($fields as $field): ?>
<?php echo $field['']; ?>
<?php $fields_child = $field['']; ?>
<?php if(is_array($fields_child)): ?>
<!-- 繰り返し -->
<?php foreach($fields_child as $field_child): ?>
<?php echo $field_child['']; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
詳しく知りたい方に向けて、実際の完成イメージを踏まえて順番に解説しますね!
完成イメージ(よくある質問編)
見出しごとに項目が区切られている「よくある質問ページ」を作成します。
イメージ画像は下記のとおり。
Custom Field Suiteの設定画面
Custom Field Suiteの設定画面は下記のとおり。
固定ページの編集画面
固定ページの編集画面は下記のとおり。
phpの設定画面
phpの設定画面は下記のとおり。
<div class="qa">
<div class="qa__inner">
<?php $fields = CFS()->get('qa_parent_loop'); ?>
<?php if(is_array($fields)): ?>
<!-- 繰り返し -->
<?php foreach($fields as $field): ?>
<h2 class="qa__title"><?php echo $field['qa_title']; ?></h2>
<?php $fields_child = $field['qa_child_loop']; ?>
<?php if(is_array($fields_child)): ?>
<dl class="qa__list">
<!-- 繰り返し -->
<?php foreach($fields_child as $field_child): ?>
<dt class="qa__q"><?php echo $field_child['qa_q']; ?></dt>
<dd class="qa__a"><?php echo $field_child['qa_a']; ?></dd>
<?php endforeach; ?>
<!-- / 繰り返し -->
</dl>
<?php endif; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
</div>
</div>
忙しい方の為に向けて、style.cssもご紹介します。
.qa {
padding: 80px 0;
}
.qa__inner {
width: 100%;
max-width: 1120px;
/*width: min(100%, 1120px);*/
margin: 0 auto;
padding: 0 20px;
}
.qa__title {
margin-bottom: 60px;
font-size: 24px;
letter-spacing: 0.1em;
}
.qa__title:nth-of-type(n + 2) {
margin-top: 100px;
}
.qa__list {
padding-left: 40px;
}
.qa__q {
position: relative;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #c6cacd;
font-size: 20px;
letter-spacing: 0.1em;
}
.qa__q:nth-of-type(n + 2) {
margin-top: 60px;
}
.qa__q:before {
position: absolute;
top: -8px;
left: -30px;
color: #cda066;
font-family: "Crimson Pro", serif;
font-size: 30px;
content: 'Q';
}
.qa__a {
font-size: 14px;
line-height: 2.2857;
}
入力項目が「空」の場合の条件分岐の書き方
入力項目(カスタムフィールド)の値が、「空」の場合の条件分岐の書き方は下記のとおり。
(親ループは省略しております)
<?php $fields_child = $field['qa_child_loop']; ?>
<?php if(is_array($fields_child)): ?>
<dl class="qa__list">
<!-- 繰り返し -->
<?php foreach($fields_child as $field_child): ?>
<!-- 条件分岐 -->
<?php if($field_child['qa_q']): ?>
<dt class="qa__q"><?php echo $field_child['qa_q']; ?></dt>
<?php endif; ?>
<!-- / 条件分岐 -->
<!-- 条件分岐 -->
<?php if($field_child['qa_a']): ?>
<dd class="qa__a"><?php echo $field_child['qa_a']; ?></dd>
<?php endif; ?>
<!-- / 条件分岐 -->
<?php endforeach; ?>
<!-- / 繰り返し -->
</dl>
<?php endif; ?>
シンプルにif文を使用して、条件分岐させます。
「Warning: Invalid argument supplied for foreach()」のエラーへの対応
設定したループの内容が「空」だった場合、
「Warning: Invalid argument supplied for foreach()」
というエラーが発生します。
エラーが発生する理由は、
phpのforeach文で配列データを取り出そうとした場合に、配列のデータが入っていなかったです。
そのために、
<?php $fields_child = $field['']; ?>
<?php if(is_array($fields_child)): ?>
<!-- 繰り返し -->
<?php foreach($fields_child as $field_child): ?>
<?php echo $field_child['']; ?>
<?php endforeach; ?>
<!-- / 繰り返し -->
<?php endif; ?>
このように、「is_array()関数」を使用して、配列のデータが入っていない(空)場合は、処理を行わないように条件分岐をさせてあげます。