WordPressの管理画面から、簡単にステータスを変えたいなぁ
テキストを入れるカスタムフィールドじゃなくて、選択肢から選ぶようにできたら楽だなぁ
ばくそういった実装がしたいときは、プラグイン「スマートカスタムフィールド」のセレクトボックス機能を使って実装しましょう！
セレクトボックスを使って
- 選択肢がでるので間違えずに選べる
- 文言のミスがなくなる
- プラグインで実装したら面倒なコード管理が不要
管理画面から簡単に変更・設定ができるようなクライアントに優しいサイトを作成できます！
カスタムフィールドの設定
管理画面からカスタムフィールドの設定を行います。
設定項目
- 繰り返し：オンにします。
- グループ名：繰り返し処理でループ処理するために英語で設定します。
- タイプ：選択を選びます。
- ラベル：編集画面上に表示します。「カラー」「出欠」などの編集内容にあわせるとわかりやすいです。
- 名前：コード上で値を取得するために英語で設定します。
選択肢：選択肢を作成します。
- 単語のみ
- 値 => キー
の２つの書き方があります。
ばく日本語の単語のみでも動かせますが、できれば値(英語)=> キー(編集画面の表示名)がいいですね。
セレクトボックスを呼び出すコード
「選択肢」に入れた中身を取り出すコードを紹介します！
シンプルに文字だけ出すコード
<?php echo esc_html( SCF::get('フィールド名') ); ?>選択肢で文字を変えたいときに使います。
色を変えたり、広告の文言が決まったパターンのときなどに使えます。
<div class="box <?php echo esc_html( SCF::get('color_select') ); ?>">
ばく上記のような設定をすることで、クラスに色を設定することが出来ますね
空の時に変な改行ができるのを防ぐ書き方
<?php
$select_val = SCF::get('フィールド名');
if ( $select_val ) {
echo '<p class="my-select-text">' . esc_html( $select_val ) . '</p>';
}
?>if文で囲って、値があれば<p>を表示します。
値 => キーを使った管理・コード
CSSのクラスをつけることの応用です。
info => お知らせ（青色）
alert => 重要（赤色）
event => イベント（緑色）と、意味のある言葉を表示してクラスに反映させるとわかりやすいです。
<?php
$label_class = SCF::get('label_select');
if ( $label_class ) {
echo '<span class="label-badge ' . esc_attr($label_class) . '">CATEGORY</span>';
}
?>.info{
background-color: #4185F4;
}
.alert{
background-color: #f04c3a;
}
.event{
background-color: #87ed79;
}各クラスに色を当てはめて完成です
応用：文言が変わっても対応させる
apple => りんご
orange => みかん
banana => バナナ編集画面では、りんご・みかん・バナナと表示されます。コード上ではapple・orange・bananaですね。
apple・orange・bananaに対応した配列を作ります。
<?php
$fruit_key = SCF::get('fruit_select');
$labels = [
'apple' => '青森県産のりんご',
'orange' => '愛媛県産のみかん',
'banana' => 'フィリピン産のバナナ',
];
if ( $fruit_key && array_key_exists( $fruit_key, $labels ) ) {
echo '<p>本日のフルーツ：' . esc_html( $labels[$fruit_key] ) . '</p>';
}
?>
キーをセレクトボックスで選び、対応した配列を設定しておき、結果出力させる方法です！
りんごの文言が変わるときは、配列の中身を変えるだけで全部変えることができるため応用力があります。
注意点：繰り返し処理の場合
繰り返し処理をしている場合、グループ名をforeachで囲んで取り出しましょう。
// グループ全体を取得
$group_datas = SCF::get('group_name');
// ループ処理
foreach ($group_datas as $group_data) {
echo esc_html($group_data['select_name']);
}配列を使う場合、少しややこしくなります。
<?php
// 1. まず変換用の配列（ラベル）を定義しておく
$labels = [
'apple' => '青森県産のりんご',
'orange' => '愛媛県産のみかん',
'banana' => 'フィリピン産のバナナ',
];
// 2. グループ全体のデータを取得
$group_datas = SCF::get('group_name');
// 3. ループ処理開始
if ( ! empty( $group_datas ) ) { // グループ自体があるかチェック推奨
foreach ( $group_datas as $group_data ) {
// ★ここが最重要ポイント！
// ループ中のデータ($group_data)の中から、セレクトボックスのキー('fruit_select')を取り出す
$fruit_key = $group_data['fruit_select'];
// キーが存在し、かつラベル定義の中にそのキーがあるか確認
if ( $fruit_key && array_key_exists( $fruit_key, $labels ) ) {
?>
<div class="fruit-item">
<p>本日のフルーツ：<?php echo esc_html( $labels[$fruit_key] ); ?></p>
</div>
<?php
}
}
}
?>配列処理を二段階でやっているイメージですね。
▼配列処理のイメージ▼
SCF(Smart Custom Fields)の画像挿入について：まとめ
SCFを使ってセレクトボックスの設定、管理画面から変更できるメリットを紹介しました。
ばく個人的に一番のメリットは選択肢になることで管理のストレスが大きくなくなることですね。
「選択肢」を設定するときは…
選択肢は単語だけではなく
値 => キー
で設定する
シンプルに出力する(値のみ)
<?php echo esc_html( SCF::get('フィールド名') ); ?>値 => キーのとき:一例)カラーの管理
info => お知らせ（青色）
alert => 重要（赤色）
event => イベント（緑色）<?php
$label_class = SCF::get('label_select');
if ( $label_class ) {
echo '<span class="label-badge ' . esc_attr($label_class) . '">CATEGORY</span>';
}
?>.info{
background-color: #4185F4;
}
.alert{
background-color: #f04c3a;
}
.event{
background-color: #87ed79;
}配列と値を連動させる
<?php
$fruit_key = SCF::get('fruit_select');
$labels = [
'apple' => '青森県産のりんご',
'orange' => '愛媛県産のみかん',
'banana' => 'フィリピン産のバナナ',
];
if ( $fruit_key && array_key_exists( $fruit_key, $labels ) ) {
echo '<p>本日のフルーツ：' . esc_html( $labels[$fruit_key] ) . '</p>';
}
?>単純にカスタムフィールドを設置しても良いですが、ちょっと工夫すると自身も管理しやすくなるので積極的に取り入れたいですね。
ばく私はクラス名の管理をすることが多いです。
色を変えたり、左右反転したりします。
最後までご覧頂きありがとうございました！
コメント