ようこそのお運びで、厚く御礼申し上げます。
41日目です。ウィジェット、テキスト入力やセレクトボックス、ラジオボタンと来て、今回はチェックボックスです。
※今回は複数選択なので、ほんのちょっと違います。
といってもWordPressが勝手に配列に入れてくれます。
サイドバーに、チェックボックスで選択した値を表示するウィジェットを追加してみる。
まず、どこに表示するかを決めて保存します。今回は管理画面からチェックボックスを選択。
サイドバーに文字列が表示されます。
※とりあえず今まで通り、そのまま表示(echo)すると・・・。
と、配列なので、そのまま「Array」と表示されてしまいます。
ちゃんと配列を表示処理して以下の通りにします。
※後で説明しますが、今回はこの表示部分：apply_filtersで自分で作ったフィルタをフックしてみました。
まずはfunction.phpに書いてみます。
では、function.phpに以下のコードを書きました。
//1.ウィジェット生成用アクションフィルタ
add_action('widgets_init', create_function('', 'return register_widget("Paka3CheckboxWidget");'));
//2.クラス定義
//###############################
class Paka3CheckboxWidget 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フィルタがなえければそのままの値
$checkboxArr = apply_filters( 'paka3CheckBox_Wedget', empty( $instance['paka3checkbox'] ) ? '' : $instance['paka3checkbox'], $instance );
echo <<<EOS
{$before_widget}
<div class="textwidget">
{$checkboxArr}
</div>
{$after_widget}
EOS;
}
//更新時の処理
public function update($new_instance, $old_instance) {
//入力した値を更新します
return $new_instance;
}
//管理画面：ウィジェット画面
function form($instance) {
//セレクトボックスデータ
//$paka3checkbox = esc_attr($instance['paka3checkbox']);
$paka3checkbox = $instance['paka3checkbox'];
$f_checkbox_id = $this->get_field_id('paka3checkbox');
$f_checkbox_name = $this->get_field_name('paka3checkbox')."[]";
$mess_checkbox = __('今日の気分:');
$data = array(
array("よいよい","よいよい",""),
array("まあまあ","まあまあ",""),
array("ふつう","ふつう",""),
array("ちょいわる","ちょいわる",""),
array("わるい","わるい","")
);
echo <<<EOS
<p>
EOS;
foreach($data as $akey=>$d){
if($paka3checkbox && array_search($d[1],$paka3checkbox)!==false) $d[2] ="checked";
echo <<<EOS
<label for ="{$f_checkbox_id}_{$akey}" >
<input type="checkbox" name="{$f_checkbox_name}" {$d[2]} class="checkbox" id="{$f_checkbox_id}_{$akey}" value="{$d[1]}" />{$d[0]}
</label>
EOS;
}
echo <<<EOS
</p>
EOS;
}
}
//###############################
//3.表示部分のデータはフィルターフックしてみる
add_filter('paka3CheckBox_Wedget', my_view);
function my_view($data){
foreach($data as $aval){
$aval="<span style='color:red'>".$aval."</span>";
$str.=$aval."かもしれないし・・・";
}
return $str;
}
ポイントはどこ？
まずは、先に1.2の解説をします。
今回も「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); } - 画面表示ではapply_filtersでフィルター名を設定して、取得したデータを変数に入れています。フィルターがなければそのままの値を「$instance['paka3checkbox']」が変数には入ります。
//ウィジェット：画面表示 public function widget($args, $instance) { extract( $args ); //widget_textフィルタがなければそのままの値 $checkboxArr = apply_filters( 'paka3CheckBox_Wedget', empty( $instance['paka3checkbox'] ) ? '' : $instance['paka3checkbox'], $instance ); - フィルターがされていない$checkboxArrには、そのまま配列の値が入ります。なので表示は[Array]になってしまいます。
echo <<<EOS {$before_widget} <div class="textwidget">{$checkboxArr}</div> {$after_widget} EOS; } - 更新処理はそのまま入力した値を返します。
//更新時の処理 public function update($new_instance, $old_instance) { //入力した値を更新します return $new_instance; } - 管理画面：ウィジェット画面でのラジオボタンの処理
※今回は複数選択ですのでフォーム内のチェックボックスのnameには"[]"を記述する必要があります。phpを復習してみてくださいね。function form($instance) { //保存されているデータ $paka3checkbox = $instance['paka3checkbox']; $f_checkbox_id = $this->get_field_id('paka3checkbox'); //チェックボックスの名前には”[]”を書く $f_checkbox_name = $this->get_field_name('paka3checkbox')."[]"; $mess_checkbox = __('今日の気分:');こちらはいつも通りデータの設定です。これは私のやり方ですが、配列にarray(name,表示用,checked)といった形でデータを格納してforeachをして表示しています。
//表示するデータの設定 $data = array( array("よいよい","よいよい",""), array("まあまあ","まあまあ",""), array("ふつう","ふつう",""), array("ちょいわる","ちょいわる",""), array("わるい","わるい","") ); echo <<<EOS EOS;array_searchで配列をから保存されているデータを検索して、存在すればcheckedを付けます。
※その際、0番目の配列が見つかったときは「0」を、ないときは「false」の値を返します。「!=false」だとどちらも同じ「0」として条件判別されます。「!==false」としてあげると良さそうです。foreach($data as $akey=>$d){ if($paka3checkbox && array_search($d[1],$paka3checkbox)!==false) $d[2] ="checked"; echo <<<EOS <label for="{$f_checkbox_id}_{$akey}"> <input class="checkbox" id="{$f_checkbox_id}_{$akey}" type="checkbox" name="{$f_checkbox_name}" value="{$d[1]}" />{$d[0]} </label> EOS; } echo << EOS; }※idはページ内にひとつが原則なので、「id={$f_checkbox_id}_{$akey}」のようにチェックボックスのidにはforeachでまわす配列の数などを追加します。
自分で作ったフィルターをフックしてみる
今回は、apply_filtersで設定した「paka3CheckBox_Wedget」というフィルターをフックしてみます。
※function widget内に直接表示処理をしても良かったのですが、せっかくapply_filtersを設定しているので、こちらをフックしてみます。（どちらでもよいです）
- フィルターを適用していないときの表示
- フィルターフックの適用は「add_filter」で行います。
自分で作成した関数「my_view」を適用します。 - 変更できる値「$data」には、$instance['paka3checkbox']の値が渡されています。
//############################### //3.表示部分のデータはフィルターフックしてみる add_filter('paka3CheckBox_Wedget', my_view); function my_view($data){ foreach($data as $aval){ $aval="<span style='color:red'>".$aval."</span>"; $str.=$aval."かもしれないし・・・"; } return $str; } - 変更した値をreturnで返します。
- 適用されるとこうなります。
コードをプラグイン用のファイルにします
それではfunction.phpに書いたコードを消して、
「paka3_checkBoxWedget.php」というファイルを作成し、以下のコードを記入します。
このファイルを[wp-content]>「plugins」ディレクトリに入れ、管理画面で有効にして完了です。
今回のまとめ
チェックボックスも簡単に設置することができました。今回はapply_filtersをまともに使ってみましたが、簡単にフィルターを作ることができるんだなーっとあらためてビックリしました。
それって、データ処理だけのプラグインを作って、表示は後で考えよーってことができちゃうってことでしょ。すごい。