ようこそのお運びで、厚く御礼申し上げます。
40日目です。ウィジェット、テキスト入力やセレクトボックスと来て、今回はラジオボタンです。
※セレクトボックスとあまり変わりません。
サイドバーに、ラジオボタンで選択した値を表示するウィジェットを追加してみる。
まず、どこに表示するかを決めて保存します。今回は管理画面からラジオボタンを選択。
サイドバーに文字列が表示されます
（※ここら辺は前回と同じなので省略）。
まずはfunction.phpに書いてみます。
では、function.phpに以下のコードを書きました。
//ウィジェット生成用アクションフィルタ
add_action('widgets_init', create_function('', 'return register_widget("Paka3RadioWidget");'));
class Paka3RadioWidget extends WP_Widget {
//コンストラクタ：オブジェクト生成時呼び出し
public function __construct(){
//名前
$name = "ラジオボタン入力ウィジェット";
//説明文
$widget_ops = array( 'description' => 'ラジオボタン入力ウィジェットをはじめました' );
//管理画面でのサイズ
$control_ops = array( 'width' => 400, 'height' => 200 );
parent::WP_Widget(false, $name,$widget_ops,$control_ops);
}
//ウィジェット：画面表示
public function widget($args, $instance) {
extract( $args );
//widget_textフィルタがなければそのままの値
$radio = apply_filters( 'widget_text', empty( $instance['paka3radio'] ) ? '' : $instance['paka3radio'], $instance );
echo <<<EOS
{$before_widget}
<div class="textwidget">
{$radio}
</div>
{$after_widget}
EOS;
}
//更新時の処理
public function update($new_instance, $old_instance) {
//入力した値を更新します
return $new_instance;
}
//管理画面：ウィジェット画面
function form($instance) {
//セレクトボックスデータ
$paka3radio= esc_attr($instance['paka3radio']);
$f_radio_id = $this->get_field_id('paka3radio');
$f_radio_name = $this->get_field_name('paka3radio');
$mess_radio = '今日の気分:';
$data = array(
array("よいよい","よいよい","checked"),
array("まあまあ","まあまあ",""),
array("ふつう","ふつう",""),
array("ちょいわる","ちょいわる",""),
array("わるい","わるい","")
);
echo <<<EOS
<p>
<label for="{$f_radio_id}">{$mess_radio}<br />
EOS;
foreach($data as $akey=>$d){
$d[2]= $instance['paka3radio'] ? checked( $instance['paka3radio'], $d[1] ,false) : $d[2];
echo <<<EOS
<label for ="{$f_radio_id}_{$akey}" >
<input type="radio" name="{$f_radio_name}" id="{$f_radio_id}_{$akey}" value="{$d[1]}" {$d[2]}>{$d[0]}
</label>
EOS;
}
echo <<<EOS
</p>
EOS;
}
}
ポイントはどこ？
今回も「WordPress ウィジェット API（WordPress Codex 日本語版）」と「Widgets API < WordPress Codex」を参考にして作っていきます。
直接はリンクを貼りませんが、デフォルトであるウィジェットのソースコードを参考にするとよいです。「wp-includes/default-widgets.php」。
※単一選択なのでほとんど、セレクトボックスと変わりません。
- アクションフィルタとクラス構造
今回は更新処理を追加しました。//ウィジェット生成用アクションフィルタ add_action('widgets_init', create_function('', 'return register_widget("Paka3SelectWidget");')); class Paka3SelectWidget extends WP_Widget { public function __construct(){ //コンストラクタ：オブジェクト生成時呼び出し //初期設定 } public function widget($args, $instance) { //画面表示 } //更新時の処理 public function update($new_instance, $old_instance) { //入力した値を更新します return $new_instance; } function form($instance) { //管理画面：ウィジェット画面 } } - コンストラクタで初期設定行う際、名前、説明文、画面のサイズなどを設定することがか可能です。
//コンストラクタ：オブジェクト生成時呼び出し public function __construct(){ //名前 $name = "ラジオボタン入力ウィジェット"; //説明文 $widget_ops = array( 'description' => 'ラジオボタン入力ウィジェットをはじめました' ); //管理画面でのサイズ $control_ops = array( 'width' => 400, 'height' => 200 ); parent::WP_Widget(false, $name,$widget_ops,$control_ops); } - 更新処理はそのまま入力した値を返します。
//更新時の処理 public function update($new_instance, $old_instance) { //入力した値を更新します return $new_instance; } - 管理画面：ウィジェット画面でのラジオボタンの処理
※コード内のコメントに説明を記載しています。//管理画面：ウィジェット画面 function form($instance) { //保存されているデータ $paka3radio= esc_attr($instance['paka3radio']); $f_radio_id = $this->get_field_id('paka3radio'); $f_radio_name = $this->get_field_name('paka3radio'); //表示するデータの設定 $mess_radio = '今日の気分:'; //ラジオボタンの設定 $data = array( array("よいよい","よいよい","checked"), array("まあまあ","まあまあ",""), array("ふつう","ふつう",""), array("ちょいわる","ちょいわる",""), array("わるい","わるい","") ); //フォームの表示 echo <<<EOS <p> <label for="{$f_radio_id}">{$mess_radio}<br /> EOS; //オプションの表示：設定した配列をforeachでまわす foreach($data as $akey=>$d){ //wordpressには、selected関数がある $d[2]= $instance['paka3radio'] ? checked( $instance['paka3radio'], $d[1] ,false) : $d[2]; echo <<<EOS <label for ="{$f_radio_id}_{$akey}" > <input type="radio" name="{$f_radio_name}" id="{$f_radio_id}_{$akey}" value="{$d[1]}" {$d[2]}>{$d[0]} </label> EOS; } echo <<<EOS </p> EOS; }
コードをプラグイン用のファイルにします
それではfunction.phpに書いたコードを消して、
「paka3_radioWedget.php」というファイルを作成し、以下のコードを記入します。
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
今回のまとめ
ラジオボタンのウィジェットの作り方について書いてみました。セレクトボックスとあまり変わりません。次回は複数選択のチェックボックスのウィジェットを作ってみます。