SCF(Smart Custom Fields)のチェックボックスの使い方・実装例・トラブル解決方法を解説します。
カスタムフィールドを使ったWordPressのカスタマイズで、編集画面よりチェックするだけで反映されるようになります。
主な利用方法としては
- 不動産・ホテルサイトの「設備アイコン」
- 求人・ブログの「こだわりの条件」
- スタッフ紹介・ポートフォリオの「スキルセット」
などでしょうか。
繰り返し処理のしやすいSCFと組み合わせて簡単に編集できるようになります。
WordPress側の編集
WordPressの編集画面から見ていきます。
表示方向は水平が横方向、
垂直が縦方向にリストが並びます。
デフォルトは最初から入れておきたい項目。
手順、メモは管理画面上に表示させておきたい説明になります。空白でもいいですが、クライアント向けに設定しておくのも良いですね。
「選択肢」に日本語だけを書く
例)不動産サイトのステータス
「選択肢」を値 => キーと出力を変える
選択肢をそのまま書いても問題はありませんが、コード側にもそのまま出力されます。
コードの書き方
カスタムフィールドの中身を反映させるコードの書き方です。
最初にグループを繰り返し処理(foreach)して、その中でチェックボックスの内容を繰り返し処理(foreach)をします。
ばくややこしいですね…。
シンプルに出力
<div class="wrapper">
<?php
$group_data = SCF::get('group');
if (! empty($group_data)) {
foreach ($group_data as $item) {
$check_items = $item['check'];
?>
<div class="card-container">
<?php
if (is_array($check_items)) {
foreach ($check_items as $val) {
echo '<span class="tag-card">' . esc_html($val) . '</span>';
}
}
?>
</div>
<?php
}
}
?>
</div>
値を直接出力します。
値 => キーとした時
値に対応した配列を作っておきます。値を直接使う場合はその限りではないですが、日本語を入れたい場合などに使います。
<div class="wrapper">
<?php
$labels = array(
'wooden' => '木造',
'rc' => 'RC',
'parking' => '駐車場',
'separate' => 'バス・トイレ別',
);
$group_data = SCF::get('group');
if (! empty($group_data)) {
foreach ($group_data as $item) {
$check_items = $item['check'];
?>
<div class="card-container">
<?php
if (is_array($check_items)) {
foreach ($check_items as $key) {
if (isset($labels[$key])) {
$label_text = $labels[$key];
} else {
$label_text = $key;
}
echo '<span class="tag-card">' . esc_html($label_text) . '</span>';
}
}
?>
</div>
<?php
} // end foreach (group)
} // end if
?>
</div>
実用例
チェックボックスを利用すると便利になる、実用例をご紹介します。
- 不動産・ホテルサイトの「設備アイコン」
- 求人・ブログの「こだわりの条件」
- スタッフ紹介・ポートフォリオの「スキルセット」
1. 不動産・ホテルサイトの「設備アイコン表示」
一番王道の使い方です。文字だけでなく、「キー名（英語）」を画像ファイル名として利用するテクニックがよく使われます。
SCFの設定
wifi=> Wi-Fi完備parking=> 駐車場ありauto_lock=> オートロック
- やりたいこと:
- チェックが入っているものだけ、アイコン画像と文字を表示したい。
- 実用テクニック:
- 画像をあらかじめ
icon-wifi.pngicon-parking.pngのように用意しておきます。 - コードで
$key（wifiなど）を使って画像を呼び出すと、if文を大量に書かずに済みます。
- 画像をあらかじめ
// 例： <img src=".../icon-wifi.png"> Wi-Fi完備 と出力される
echo '<img src="/images/icon-' . $key . '.png">' . $label_text;2. 求人・ブログの「こだわり条件タグ（色分け）」
求人サイトの「未経験OK」「リモート可」や、記事の「カテゴリ」などで使います。
「キー名」をCSSのクラス名として利用するのがポイントです。
SCFの設定
remote=> リモート可beginner=> 未経験OKurgent=> 急募
- やりたいこと:
- 「急募」は赤色、「リモート」は青色など、タグの色を変えたい。
- 実用テクニック:
- HTMLのクラス名にキーを出力します。
- CSSで
.tag-urgent { background: red; }のように色を指定できます。
// 例： <span class="tag tag-urgent">急募</span> と出力される
echo '<span class="tag tag-' . $key . '">' . $label_text . '</span>';3. スタッフ紹介・ポートフォリオの「スキルセット」
WEB制作会社のスタッフ紹介などで、その人が使える技術を一覧にする場合です。これはシンプルなリスト表示が適しています。
SCFの設定
html=> HTML5css=> CSS3/Sassjs=> JavaScript/jQueryphp=> PHP/WordPressdesign=> Figma/XD
- やりたいこと:
- プロフィールカードの下部に、対応可能なスキルを「・」区切りやスラッシュ区切りで羅列したい。
// 例： HTML5 / CSS3 / PHP と出力される
echo '<span>' . $label_text . '</span>';トラブルの例
コードと連動させて出力をさせても、エラーコードが出たり全く出力されなかったりしますよね。
そういったトラブルの解決方法です。
最初にやりたいのは、中身を確認して、配列はどうなっているのか、そもそも出力されているのかを確認します。
中身を確認する方法
<?php var_dump( SCF::get('グループ名') ); ?>var_dump()で中身を見ることが出来ます。
Undefined variable $check_list in~
指定された変数がないから、処理できないよ！という内容です。
スペルミスや変数の間違いの可能性があるので見返してみましょう！
var_dump()を使って、変数名のスペルミス、SCF側で設定した名前と違ってた、などで起きやすいです。
foreach() argument must be of type array|object, null given in~
foreachでループさせようとした変数が存在しない、空っぽですよ！という内容です。
対応策として、if文で囲って取得できなかったら表示しないようにします。
$group_data = SCF::get('group');
if ( ! empty( $group_data ) ) {
foreach ( $group_data as $item ) {
// ... 中身の処理 ...
}
} AIに頼る
コードを丸ごと投げて、エラーコードを渡すと大体解決してくれます。
その場合、自身のやりたいことを伝えると自分が表示したい方法が出やすいです。
<?php ~ //自分のコードを貼る
Warning: Undefined variable $check_list in~
// エラーコードを貼る
SCFを使って◯◯をしたいです。
そのためにエラーの解除と◯◯ができるコードを出力してください。SCF(Smart Custom Fields)のチェックボックスについて：まとめ
SCFを使ってチェックボックスを使った設定、実用方法をご紹介しました。
プラグインで編集
- タイプ
- ラベル
- 名前
- 選択肢
コーディング
コードで出力するときはforeachを使う
グループを使っている場合は、グループのforeachの中にチェックボックスのforeachで繰り返す。
トラブル時
まずは
<?php var_dump( SCF::get('グループ名') ); ?>var_dump()をみて、中身があるのか(取得できているのか)、どの様になっているのかを確認する。
ばくチェックボックスを使う時は
狙ったカード、例えばステータスや不動産情報、スキルセットをチェックで出したい場合に便利です。
記事本文で毎回書くのも大変ですからね。
最後まで御覧いただきありがとうございました！
コメント