SCF(Smart Custom Fields)のラジオボタンの解説

SCF(Smart Custom Fields)のラジオボタンの使い方を解説します。

カスタムフィールドを使った繰り返し処理の中で、「これはテキストを大きくしたい」「カードを左右交互に出したい」等、個別に調整したい場合に使える手法です！

僕は主にクラスの付替えに使っていますが、画像の有無、要素を表示する、しないなどの選択が簡単にできる様になるため使い方をマスターしましょう！

ラジオボタンでできること

繰り返し処理の中で、個別に調整ができる。

今回はカードの色を3色コントロールするため、クラスのつけ外しをラジオボタンで操作します。コードと画像付きでわかりやすくをモットーに解説していきます。

ばく

今回やりたいこと

同じスタイルで色を変更する(色を指定したクラスをつけ外しする)

クラスをつけ変えるコード

<div class="container">
    <div class="wrapper">
        <?php
        $info_list = SCF::get('information');
        foreach ($info_list as $info) : ?>
            <div class="box">

                <?php
                // カードカラーによってクラスを決定
                $color_class = '';
                if ($info['card-color'] === 'black') {
                    $color_class = 'item--black';
                } elseif ($info['card-color'] === 'red') {
                    $color_class = 'item--red';
                } elseif ($info['card-color'] === 'gray') {
                    $color_class = 'item--gray';
                }
                ?>
                <h2 class="item <?php echo esc_attr($color_class); ?>"><?php echo esc_html($info['item']); ?></h2>
                <p class="content"><?php echo nl2br(esc_html($info['content'])); ?></p>
            </div>
        <?php endforeach; ?>
    </div>
</div>

CSS

.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;
}

.item--black {
  background-color: #333;
  color: #fff;
}

.item--red {
  background-color: red;
  color: #fff;
}

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

プラグインSmart Custom Fieldsでの設定方法

クラスのつけ外し、指定のためにラジオボタンを設定します。

まずはSmart Custom Fieldsの設定から。

グループ内でタイプ、ラジオボタンを選択します。

ラベルは自身やクライアントがわかりやすい、後々ひと目見て編集しやすい名前にしましょう。

名前はコード上で呼び出すのに必要になります。

ループ変数とはforeachでループ内で取り出した１件分の値を表す変数です。今回でいうところの$info_list as $info(←これ)となります

選択肢の欄にて、キーと値を分けます。キーがコード上で取得する文字列、値はWordpressの管理画面に表示されるテキストになります。

デフォルト、手順、メモは空欄でも問題有りません。手順の説明が必要な場合は書いておきましょう。

コードの設定

php内でラジオボタンの内容によって変化するように書きます。

if文を使い条件分岐を行います。

コード全体

    <div class="wrapper">
        <?php
        $info_list = SCF::get('information'); // グループを取得
        foreach ($info_list as $info) : ?>
            <div class="box">
                <?php
                // カードカラーによってクラスを決定
                $color_class = '';
                if ($info['card-color'] === 'black') {
                    $color_class = 'item--black';
                } elseif ($info['card-color'] === 'red') {
                    $color_class = 'item--red';
                } elseif ($info['card-color'] === 'gray') {
                    $color_class = 'item--gray';
                }
                ?>
                <h2 class="item <?php echo esc_attr($color_class); ?>">
                    <?php echo esc_html($info['item']); ?>
                </h2>
                <p class="content">
                    <?php echo nl2br(esc_html($info['content'])); ?>
                </p>
            </div>
        <?php endforeach; ?>
    </div>

上記の例だと、それぞれのキーによって対応したクラスがつくように設定しています。

ラジオボタンで何を選んだかによって、$info['card-color']の中身が変わってきます。

キーがblackだったら、item--blackというクラスをつける。
redだったら、item--redをつける。
grayだったら、item-grayをつける。

<?php
// カードカラーによってクラスを決定
$color_class = '';
if ($info['card-color'] === 'black') {
    $color_class = 'item--black';
} elseif ($info['card-color'] === 'red') {
    $color_class = 'item--red';
} elseif ($info['card-color'] === 'gray') {
    $color_class = 'item--gray';
}
?>

と言ったような条件分岐を行います。

今後もっと増えたら？

今は３つなのでまだマシですが、もっと増えたらif文でめちゃくちゃになってしまいます。そんなコード見たくないですよね。

そうならないために出力される文字列(キーで設定したテキスト)を直接クラス名に当てはめるといったこともできます。

<?php
$color = !empty($info['card-color']) ? esc_attr($info['card-color']) : 'gray';
?>
<h2 class="item item--<?php echo $color; ?>">
    <?php echo esc_html($info['item']); ?>
</h2>

上記の例は、$colorに$info['card-color']の中身があればいれる、なければgrayを入れるといった三項演算子を使って、変数の有無を確認してからクラス名に当てています。

設定後、管理画面でラジオボタンで選択

WordPressの管理画面から、記事編集を行い選択します。

開発ツール等を使って、狙い通りのクラスがついていたら完成です！

クラスがつかない、エラーが出る

ラジオボタンを設定したのに、見た目に変化がない、クラスがつかないといった場合はキーのスペルが間違っているかもしれません。うまく読み込めてなかったり、キーの設定がうまく行っていない可能性もあります。

ちゃんとキーが取得できているかを見るために以下のコードを試してください。

<pre>
    <?php print_r($設定した変数); ?>
</pre>

設定した変数の中身が見れます。キーの文字列が間違っていたり、０だったりするかもしれません。

また、空欄の行でもボタンが表示されてしまいます。こちらを選んでも０になりますので、空の行がないかを確認しましょう。

まとめ：SCFのラジオボタンで管理画面から調整する！

繰り返しフィールドが便利なSCFですが、一部少し変更を加えたい…と言った場合に便利なラジオボタンの使い方でした。

プラグイン上でラジオボタンの設定
キーと値を決める。
コード上で、キーに応じた処理をif文して指定する。

僕はクラスのつけ外しに主に使っていますが、--colorをつけて色の変化、--reverseをつけて左右の入れ替え、コンテンツのオンオフ。様々なことで応用が可能です。

クライアントにも、自分にも、使いやすいサイトづくりを目指しましょう！