カスタムフィールドを繰り返すには、Smart Custom Fieldsプラグインが丁度良かった話

ACFを使ったカスタムフィールドで、いくつも同じものを繰り返すのはしんどいなぁ。有料版のプラグインを買うしかないでしょうか？

ちょうどいいプラグインがありますよ！

その名もSmart Custom Fields(SCF)！

無料でグループ登録、繰り返し機能が使えます。

ばく

ACFは高機能で拡張性も高く、多くの開発者に指示されている定番プラグインです。ただ、案件の規模や求める機能によっては、もう少しシンプルに使いたい場面もありますよね。

WordPressのオリジナルテーマを制作する、実際の案件でカスタムフィールドを繰り返し使用することがあったため、試してみたところ、設定、実装が簡単に行えたためご紹介します！

投稿をforeachでループ表示するときなどに便利ですので、ぜひ使ってみてください。

この記事では、Smart Custom Fields(SCF)の設定方法、実例をコード付きで解説しています。

ただ、機能が多すぎて混乱してしまうので、当記事では「テキスト」を反映させる機能に絞って解説しております。

「WordPressの管理画面でコンテンツの管理をしたい」「カード表示している項目をわかりやすく管理したい」「本文に書き込むほどの文ではないけど、管理画面から編集したい」といった用途に向いています！

Smart Custom Fields(SCF)について

Smart Custom Fieldsは、無料で繰り返しフィールド(グループループ)や多様なフィールドタイプの機能を持ち、カスタムフィールドを作成、編集する際の選択肢になると思います。

SCFは開発が終了する、といった記事もありますが、現在もサポートは続いております。

これらの情報から、SCFは現在も積極的にメンテナンスされており、最新のWordPress環境でも安心して利用できますね！

導入方法

Smart Custom Fields(SCF)の導入方法について簡単に説明させてもらいます。

ばく

管理画面のプラグイン→プラグインを追加
検索欄より「SCF」もしくは「Smart Custom Fields」と検索したら出てきます
インストールし、有効にしましょう。

プラグインを有効化したら、左側のメニューに追加されます。

使い方の流れ

具体的に制作するために、「不動産サイト」の「物件情報」を取りまとめたカスタムフィールドを制作していきましょう！

まずは作りたいイメージを固めます。以下のようなフィールドを作るとしましょう。案件や学習中の制作であればデザインカンプがあるはずなので、編集したい箇所を決めます。今回は赤い枠がカスタムフィールドで制作したい場所とします。

赤い箇所をカスタムフィールドで作成していきます。

今回は以下4Stepで制作していきます。

ばく

• SCFでフィールドグループを制作する
• SCFを反映させる記事ページを指定する
• 記事内で、SCFで制作したフィールドグループの編集を行う。
• サイト上にSCFのフィールドグループが反映されるように編集を行う。

一見するとややこしいのですが一つづつ作成していきましょう！

SCFでフィールドグループを制作する

画面上部の新規追加より新しい項目を作ります。フィールドと呼ばれます。

「タイトルを追加」より、表示するタイトルを決めます。わかり易い名前をつけましょう。今回は「不動産情報」とします。

カスタムフィールドを作成していきます。フィールドを追加を押します。

画面左上の繰り返しを押します。そうしたらグループ名が現れますので、英語で書きましょう。コード上で呼び出すときに必要になります。

編集方法

投稿ページからテキストの編集を行います。

管理画面より、Smart Custom Fieldsで設定した「表示したい投稿」の編集ページ下部に制作したカスタムフィールドがあります。

例えば、固定ページを選択した場合、固定ページすべての記事で編集することができます。編集用の記事を作成するときは、IDを指定します。

制作したカスタムフィールドから編集や、要素の増減を行います。

SCFを表示するコードを編集する

コードエディターより、SCFを呼び出すコードを書きます。

今回の条件は以下のとおりです。

グループ名：information
項目[item]と内容[content]が入っている。

これらを踏まえて、コード書いていきます。

ベースとなるコード。長いので折りたたみます。

 <div class="container">
     <div class="wrapper">
         <div class="box">
             <h2 class="item">項目</h2>
             <p class="content">2,000万</p>
         </div>
         <div class="box">
             <h2 class="item">住所</h2>
             <p class="content">〒000-0000<br>
                 東京都<br>
                 八王子市</p>
         </div>
         <div class="box">
             <h2 class="item">沿線</h2>
             <p class="content">西八王子徒歩15分</p>
         </div>
     </div>
 </div>

.container {
  padding-block: 100px;
  background-color: #fff;
}

.wrapper {
  display: grid;
  place-content: center;
  gap: 50px;
  grid-template-columns: auto auto;
}

.box {
  border-radius: 5px;
  max-width: 500px;
  min-width: 300px;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  -webkit-box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}

.item {
  padding: 12px 8px;
  font-size: 16px;
  background-color: #E2E2E2;
}

.content {
  padding: 12px 8px;
  font-size: 16px;
  background-color: #fff;
  line-height: 1.8;
}

こちらをカスタムフィールドの値を取り出して作成していきます。

出来上がったコードがこちら

 <div class="container">
     <div class="wrapper">
         <?php
            $info_list = SCF::get('information');
            foreach ($info_list as $info) : ?>
             <div class="box">
                 <h2 class="item"><?php echo esc_html($info['item']); ?></h2>
                 <p class="content"><?php echo nl2br(esc_html($info['content'])); ?></p>
             </div>
         <?php endforeach; ?>
     </div>
 </div>

コードの作り方

最初にグループを呼び出します。foreachでループさせるための設定をします。

$info_list = SCF::get('information');

smart custom fieldsの値を取得するにはSCF::get（’フィールド名');を使います

使う範囲を決めます。今回はboxを複数出したいので、wrapperの中に設定します。

 <div class="container">
     <div class="wrapper">
         <?php
            $info_list = SCF::get('information');
            foreach ($info_list as $info) : ?>
             <div class="box">
                 <h2 class="item">項目</h2>
                 <p class="content">2,000万</p>
             </div>
             <div class="box">
                 <h2 class="item">住所</h2>
                 <p class="content">〒000-0000<br>
                     東京都<br>
                     八王子市</p>
             </div>
             <div class="box">
                 <h2 class="item">沿線</h2>
                 <p class="content">西八王子徒歩15分</p>
             </div>
         <?php endforeach; ?>
     </div>
 </div>

$infoグループ内には[item][content]があります。

それぞれに対応したテキストを取得して、コードに組み込みます。

<div class="box">
 <h2 class="item"><?php echo esc_html($info['item']); ?></h2>
 <p class="content"><?php echo nl2bl(esc_html($info['content'])); ?></p>
</div>

<?php echo esc_html($info['item']); ?>

１行ならesc_htmlで良いのですが、改行を反映させたいときはnl2brを使用します。

ばく

<?php echo nl2br(esc_html($info['content'])); ?>

コードの完成形

 <div class="container">
     <?php
        $info_list = SCF::get('information');
        foreach ($info_list as $info) : ?>
         <div class="wrapper">
             <div class="box">
                 <h2 class="item"><?php echo esc_html($info['item']); ?></h2>
                 <p class="content"><?php echo nl2bl(esc_html($info['content'])); ?></p>
             </div>
         </div>
     <?php endforeach; ?>
 </div>

本来なら、要素の数だけ書かないといけないのですが、最低限の構造だけですみます。

記事内でたくさん作ってもその分ループされます！↓たくさん作りました。

カスタムフィールドを作るときの注意点

多少手間ですが、構造を作り、テキストを実際に入れてみて崩れていないか、テキストをいれるだけの状態にしてから作業すると崩れが出なくて作業が早いです。

慣れてきたら最初から呼び出したテキストを入れてもいいですが、崩れるかもしれません。

コードだけなら直すのは楽なのですが、wordpressの管理画面に行ったり来たりは非常にめんどくさいので一度構築してしまいましょう！

ばく

繰り返しフィールドを作るのにSCF(Smart Custom Fields)が良かった：まとめ

同じフィールドをいくつも作る構造の際、SCFのプラグインを使い繰り返し処理を行うことで管理、編集が楽になリましたので、まとめてみました。

• 1記事内で完結するため編集画面がわかりやすく
• 管理画面から増減できる
• テキストの編集ができる
• コードもベースとなる構造を一つ用意するだけで良い

と、良いことづくめでした。

画像を利用する際はワードプレス関数を変更するだけで同じように呼び出すことができるため、画像付きのカードを複数表示したいときも使えます。

一つの記事内で完結するので管理が楽ですね！

僕は「フロントページ」「aboutページ」と分けてカスタムフィールドを組み、コードをできるだけ触らず管理できるようにしています！

ばく

最後までご覧いただきありがとうございました！