ワードプレスで独自プラグインや設定を作る場合、よく利用するラジオボタン。
チェックされた設定を保存した後、
その設定を読み込んで「checked」を入れる方法の覚書メモ。
ラジオボタンの基本形
ラジオボタンの基本のHTML。
<input type="radio" name="test_item" value="はい" checked>はい
<input type="radio" name="test_item" value="いいえ">いいえはい いいえ
1行目に checked を入れている例。
項目名（「はい」「いいえ」）もクリックできるようにするには labelタグを使う。
書き方は2通り。
１）全体を labelタグで囲む
<label>
<input type="radio" name="test_item" value="はい" checked>はい
</label>
<label>
<input type="radio" name="test_item" value="いいえ">いいえ
</label>
２）label for を使う
<input type="radio" name="test-item" id="item1" value="はい" checked>
<label for="item1">はい</label>
<input type="radio" name="test-item" id="item2" value="いいえ">
<label for="item2">いいえ</label>
「label for」を使う場合、input要素内の id と 「label for」で指定する値を同じにすることで項目名とラジオボタンの関連付けが行われる。
値を取得して checked を付ける
ラジオボタンの選択状態を取得して、その値に基づいて checked を付ける。
やり方は以下の3通りぐらい。
その１）if で比較する
<?php
function test1() {
$item = get_option( 'item_value' );
?>
<label><input type="radio" name="test_item" value="はい" <?php if( $item == 'はい' ){ echo ' checked'; } ?>>はい</label>
<label><input type="radio" name="test_item" value="いいえ" <?php if( $item == 'いいえ' ){ echo ' checked'; } ?>>いいえ</label>
<?php
}
?>（5、6行目）
値（$item）に対して「はい」か「いいえ」かを if 文でチェックし、
同じであれば echo で「 checked」を表示する、としている。
その２）三項演算子を使う
<?php
function test2() {
$item = get_option( 'item_value' );
?>
<label><input type="radio" name="test_item" value="はい" <?php echo $item == 'はい' ? ' checked' : ''; ?>>はい</label>
<label><input type="radio" name="test_item" value="いいえ" <?php echo $item == 'いいえ' ? ' checked' : ''; ?>>いいえ</label>
<?php
}
?>（5行目、6行目）
値（$item）に対して「はい」か「いいえ」かを 三項演算子を使って判別している。
三項演算子は以下の形。
- 条件式 ? ①真の場合 : ②偽の場合
条件式が真の場合①が実行され、そうでなければ②が実行される。
echo $item == 'はい' ? ' checked' : '';この場合、$itemが"はい"に同じであれば、' checked' が表示され、
そうでなければ 「"」（空文字）を表示（つまり何も表示されない）。
言語リファレンス：三項演算子（PHPマニュアル）
※）注意：自作する場合はセキュリティ（エスケープ処理）を意識する
「その１」「その２」のように、WordPressの組み込み関数を使わずに自前で checked を出力する場合は、厳密にはセキュリティ（エスケープ処理）を意識する必要があります。
たとえば、データベースから取得した値をそのままHTMLに出力する際は、安全性のために esc_attr() などでエスケープするのが一般的。
ただ、WordPressの checked() 関数を使えば、関数自体の内部で安全に出力処理（エスケープおよび安全なHTMLフォーマットでの出力）が行われるため、セキュリティ面でも安全です。これが、WordPress開発で checked() 関数の使用が強く推奨される大きな理由の一つにもなりますね。
その３）checked関数を使う
<?php
function test3() {
$item = get_option( 'item_value' );
?>
<label><input type="radio" name="test_item" value="はい" <?php checked( $item, 'はい' ); ?>>はい</label>
<label><input type="radio" name="test_item" value="いいえ" <?php checked( $item, 'いいえ' ); ?>>いいえ</label>
<?php
}
?>ワードプレスには checked を表示するためのchecked関数が用意されている。
使い方は簡単で、基本の形は以下の通りです。
checked( $helper, $current, $echo );
- $helper（必須）：比較したい現在の値（データベースから取得した値など）
- $current（任意）：対象のラジオボタンが持つ値（デフォルトは true）
- $echo（任意）：結果をブラウザに出力（echo）するかどうか（デフォルトは true）
第3引数の $echo がデフォルトで true になっているため、関数を呼び出すだけで自動的に checked='checked' が出力されます。
5、6行目では $item と「はい」「いいえ」と比較して
同じであれば「 checked="checked"」をサクっといれる、としている。
ワードプレスで独自で設定を作る場合には、
この checked関数を使うのが簡単だしコードも分かりやすいのでおすすめ。
補足：まだ設定が保存されていない場合（初期値）の対応
プラグインを導入した直後など、データベースにまだ設定（item_value）が保存されていない状態では、どのラジオボタンもチェックされない状態になってしまいます。
もし、初期状態として「はい」にチェックを入れておきたい場合は、以下のように get_option() の第2引数にデフォルトの値を設定しておくと便利です。
<?php
function test_init() {
// データベースに値がない場合は、デフォルトで「はい」を取得する
$item = get_option( 'item_value', 'はい' );
?>
<label><input type="radio" name="test_item" value="はい" <?php checked( $item, 'はい' ); ?>>はい</label>
<label><input type="radio" name="test_item" value="いいえ" <?php checked( $item, 'いいえ' ); ?>>いいえ</label>
<?php
}
?>このように工夫することで、
ユーザーが初めて設定画面を開いたときの操作性を高めることができますね。
コメント