【Custom Field Suite】ループの入れ子を作成する方法

  • 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()関数」を使用して、配列のデータが入っていない(空)場合は、処理を行わないように条件分岐をさせてあげます。

SNSでもご購読できます。

コメントを残す

前の記事

次の記事