【徹底解説】Smart Custom Fields 繰り返し機能と出力方法

WordPress

こんにちは、shimamisaです。

以前、Smart Custom Fieldsの基本的な使い方をご紹介しましたが、

今回は、便利な「繰り返し機能」の使い方と、フィールドタイプの出力方法について、ご紹介していきます。実務で使用したコードで解説していきます。

私自身の備忘録も兼ねて、画像付きで分かりやすく書いていきます!

繰り返し機能とは

はじめに「繰り返し機能」とは、設定したカスタムフィールドを、必要に応じて繰り返し使える機能になります。そのままですね(><;)習うより慣れろで、実際に使ってみた方が良いですね!

投稿時に、カスタムフィールドを追加・削除・移動ができるので、表示する項目が決まっておらず、時と場合に応じて自由に増減したい!という方にはぴったりの機能だと思います。

繰り返し機能の使い方

今回は、投稿者が”自由に項目を増減できる”テーブル表を作ることを想定しています。「項目タイトル」と「項目内容」を自由に入力できるようにしていきます。

仕組みを理解すれば、他の場面にも応用できると思います!

また、当記事ではプラグインのインストール方法は割愛しています。インストール方法が不安という方は、こちらの記事を参考にしてみてください。

それでは、作成していきましょう。

カスタムフィールドグループを作成

はじめに、カスタムフィールドグループを作成します。

「新規追加」をクリックします。

そうすると、下記の画面が表示されるので、「タイトルを追加」にカスタムフィールドグループ名を入力します。

ここでは、「アパート詳細」にします。

繰り返しのカスタムフィールドを作成

つづいて、カスタムフィールドを作成します。

上記の青色の「フィールドを追加」ボタンをクリックすると、下記の画面が表示されます。

ここから、繰り返し機能を使い、投稿者が項目タイトルと項目内容を、自由に入力できるようにしていきます。「繰り返し」をクリックします。

「繰り返し」をクリックすると、下記の画面が表示されるので、グループ名を入力します。

ここでは、「free_item」にします。

繰り返しのグループ名は、出力するときに使用します。関連のある名前にすると良いと思います!


「free_item」というグループの中に、カスタムフィールドを作っていきます。
カスタムフィールドは、それぞれ下記のようにしました。

【項目タイトル用】
タイプ:テキスト
ラベル:項目タイトル
名前:add_title
【項目内容用】
タイプ:テキストエリア
ラベル:項目内容
名前:add_contents
行:3

入力後は、下記のようになります。

「free_item」というグループの中にカスタムフィールドを追加するときは、「サブフィールドを追加」をクリックします。

以上で、カスタムフィールドの作成は完了です。

投稿画面にはこんな感じで表示されます。

ここまで出来れば、あとは出力作業です!もうひとがんばりです!

出力方法

繰り返しを表示させたい箇所に下記のようなコードを書いていきます。

<?php
    $free_item = SCF::get('free_item');
    foreach ($free_item as $fields) { 
?>
    <tr>                          
        <th><?php echo $fields['add_title']; ?></th>             
        <td><?php echo nl2br($fields['add_contents']); ?></td>                           
    </tr>                                 
<?php } ?> 
ポイントは、foreach構文を使って出力することです。

下記コードをコピペし、自分で決めた名称に置き換えてみてください。

<?php
    $繰り返しのグループ名= SCF::get('繰り返しのグループ名');
    foreach ($繰り返しのグループ名 as $fields) { 
        echo $fields['カスタムフィールド名'];
    }
?>       

if文との組み合わせ

上記の書き方だと、投稿者が項目を追加しなかった時にも、空白が表示されてしまうかと思います。

追加項目がないときは、非表示にした方が見た目がスッキリすると思うのでif構文で条件分岐させましょう。

<?php
    $free_item = SCF::get('free_item');
    foreach ($free_item as $fields) { 

        if($fields['add_title'] !== "" and $fields['add_contents']!== ""){
?>
        <tr>                          
            <th><?php echo $fields['add_title']; ?></th>             
            <td><?php echo nl2br($fields['add_contents']); ?></td>                   
        </tr>                                 
<?php
        } 
    }
?> 

ちょこっと解説

foreach文の中に、if文を挿入しています。
項目タイトル(add_title)と、項目内容(add_contents’)が空(””)でなければ(つまり、入力されている時ですね!)、項目タイトルと項目内容を出力する。それ以外は出力しない。という条件になります。

検索すると、他の書き方が紹介されていたのですが、私の場合上手くいかず・・・
上記の方法だと上手くいきました。

フィールドタイプごとの出力方法

よく使うカスタムフィールドのタイプごとに出力方法をご紹介します

if文で条件分岐をさせると、様々な使い方ができるのでとても便利ですよね。

どなたかのご参考になれば嬉しいです。

テキスト

1行のテキストが入力できます。
カスタムフィールドの名前は、「text」とします。

<?php
    $text= SCF::get( 'text' );
    echo $text;
?>

<!-- pタグなどで囲むと、cssで装飾できます -->
<?php $text = SCF::get('text'); ?>
<p><?php echo $text; ?></p>

テキストエリア

複数行のテキストを入力できます。
カスタムフィールドの名前は、「textarea」とします。

<?php
    $textarea = SCF::get('textarea');
    echo ($textarea);
?>

<!-- 改行を適用させたい時 -->
<?php
    $textarea = SCF::get('textarea');
    echo nl2br($textarea);
?>

画像

画像をアップロードできます。

カスタムフィールドの名前は、「img」とします。

<?php
    $img = SCF::get('img');
    echo wp_get_attachment_image( $img , 'large' );
?>

「large」のところは、画像の大きさを表します。他に、thumbnail, medium, large, fullを使うことが出来ます。

画像の繰り返し

アップロードする画像の枚数が決まっていない時などに、繰り返し機能を使います。

テキストの繰り返し出力と同様に、foreachを使います。

繰り返しのカスタムフィールドグループ名は「imgGroup」、カスタムフィールド名を「img1」とします。

<?php
    $imgGroup = SCF::get('imgGroup');
    foreach ($imgGroup as $fields) { 
        $imgurl = wp_get_attachment_image_src($fields['img1'] , 'large');          
?>
<div>
    <!-- 画像がない時はnoImg画像を表示 -->
    <?php if($fields['img1'] === "" ) {?>
        <img src="<?php echo get_template_directory_uri(); ?>/img/noImage.jpg">
    <!-- それ以外(画像がある時)画像を表示 -->
    <?php } else { ?>
        <img src="<?php echo $imgurl[0]; ?>" >
    <?php
    }
    ?>
</div>
<?php } ?>

if文内はご自由に書き換えてみてください!

チェックボックス

選択肢から複数を選択することができます。

カスタムフィールドの名前は、「checkBox」とします。

<?php
    $checkBox = SCF::get('checkBox');
    foreach ($checkBox as $field) {
        echo $checkBox;
    }
?>

ラジオボタンの出力方法

選択肢から一つだけ選択することができます。

カスタムフィールドの名前は、「radioButton」とします。

<?php
    $radioButton = SCF::get('radioButton');
    echo $radioButton;
?>

ファイルの出力方法

PDFなどのファイルをアップロードできます。
カスタムフィールドの名前は、「file」とします。

<?php
    $file = SCF::get('file');
    $file = esc_url(wp_get_attachment_url($file));
    echo $file;
?>

まとめ

繰り返し機能についてと、フィールドタイプごとの出力方法についてご紹介しました。

フィールドタイプは他にもあり、さまざまな状況で使えると思います。

プラグインの使い過ぎは良くありませんが、 Smart Custom Fieldsは、構築する側にとっても、投稿者にとっても楽にしてくれるプラグインだなと感じました。

以上です(^^)

トップへ戻る
タイトルとURLをコピーしました