WordPressの自作ウィジェットの個人的な覚書

Ads
WordPress

昨日ちょっと嵌ったのでメモ。
WordPressの自作ウィジェット
で分からなくて調べたことを
備忘録として残しておきます。
面倒だけど覚えると便利ですね。

進行中の案件で、ウィジェットによるコンテンツ管理が仕様に含まれています。その時にちょっと嵌ったことをメモ書き。完全に個人的なメモです。

尚、自作ウィジェットの作成法が分からんという方は以前の過去記事をご参照下さい。

WordPressのウィジェットを自作するためのTips

なので目新しい情報は一切無いです。

作成したウィジェット

作ったウィジェットはもうちょい要素が多いですけど構成は極めてシンプルなものです。

add_action( 'widgets_init', 'foo_bar_box' );
function foo_bar_box() {
	register_widget( 'Foo_Bar_Box' );
}

class foo_bar_box extends WP_Widget {
	function Foo_Bar_Box() {
		$widget_ops = array(  'description' => __('ウィジェットの説明文', 'foo_bar') );
		$this->WP_Widget( 'ms_clinic_box', __('ウィジェット名', 'foo_bar'), $widget_ops );
	}

	function widget( $args, $instance ) {
		extract( $args );
        $url = apply_filters( 'widget_url', $instance['url'] );
  //↓ 変数に$titleを使えばウィジェットの見出しにタイトルとしてテキストを表示させられるっぽい。知らずに嵌った
        $title = apply_filters( 'widget_title', $instance['title'] );
        $description = apply_filters( 'widget_description', $instance['description'] );
        $tel = apply_filters( 'widget_tel', $instance['tel'] );
        $checkbox = apply_filters( 'widget_checkbox', $instance['checkbox'] );
		?>

       <div class="hoge<?php if ( $checkbox == true ) { echo ' huga';}/* チェックボックスで要素にhugaというclass名を追加出来る様にした */ ?>">
	<div class="hoge-box">
	<h3><?php echo '<a href="' . $url . '">'; ?><?php echo '' . $title . ''; /*$titleは実装環境でも見出し等にすると管理画面とマッチして管理しやすい*/?><?php echo '</a>'; ?></h3>
		<p>
		<?php echo '' . $description . ''; ?>
		<?php echo '<span class="tel">' . $tel . '</span>'; ?>
		</p>
	</div>
	</div>
		<?php 
	}
	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
	$instance['url'] = strip_tags($new_instance['url']);
	$instance['title'] = trim($new_instance['title']);
	$instance['description'] = $new_instance['description'];
	$instance['tel'] = trim($new_instance['tel']);
	$instance['checkbox'] = strip_tags($new_instance['checkbox']);
		return $instance;
	}
	
	function form( $instance ) {
  //デフォルトとして予めウィジェットに何か表示させておくと管理者が何を入力すれば良いか分かりやすい。
  //でもplaceholder属性でもいいかもしれない。
		$defaults = array(
		'url' => '(例)　http://example.com/',
		'title' => '(例) タイトル名',
		'description' => '(例)　本日はマジ晴天',
		'tel' => '(例)　03-0000-0000',
		);
		$instance = wp_parse_args( (array) $instance, $defaults ); 
		?>
      <p>
<label for="<?php echo $this->get_field_id('url'); ?>">
<?php _e('WebサイトURL:', 'foo_bar'); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('url'); ?>" name="<?php echo $this->get_field_name('url'); ?>" type="text" value="<?php echo $instance['url']; ?>" />
      </p>
      <p>
<label for="<?php echo $this->get_field_id('title'); ?>">
<?php _e('見出しのタイトル:', 'foo_bar'); /*ここに入力したテキストがウィジェットの見出しに反映される*/?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $instance['title']; ?>" />
      </p>
      <p>
<label for="<?php echo $this->get_field_id('description'); ?>">
<?php _e('詳細文。ここはHTMLを使いたいのでstrip_tags関数は使わないようにする:', 'foo_bar'); ?>
</label>
<textarea class="widefat" rows="16" colls="10" id="<?php echo $this->get_field_id('description'); ?>" name="<?php echo $this->get_field_name('description'); ?>"><?php echo $instance['description']; ?></textarea>
      </p>
      <p>
<label for="<?php echo $this->get_field_id('tel'); ?>">
<?php _e('電話番号:', 'foo_bar'); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('tel'); ?>" name="<?php echo $this->get_field_name('tel'); ?>" type="text" value="<?php echo $instance['tel']; ?>" />
     </p>
     <p>
<input id="<?php echo $this->get_field_id('checkbox'); ?>" name="<?php echo $this->get_field_name('checkbox'); ?>" type="checkbox" value="1" <?php/*後述*/ checked( $instance['checkbox'], 1 ); ?>/>
<label for="<?php echo $this->get_field_id('checkbox'); ?>"><?php _e('チェックボックス', 'foo_bar'); ?></label>
     </p>
	<?php
	}
}

結局チェックボックスの部分で一番嵌った。ウィジェットでチェックボックスにチェックを入れて保存すれば実装はされるんだけど、checked="checked"が追加されず、チェックボックスにチェックが入っていない状態で保存されてしまう、という感じ。

あと、ウィジェットの見出しに反映させる方法で悩んでました。最初は$titleという変数を使わずに作ってた(実装環境ではタイトルじゃないので)けど、コアで用意してる既存変数使えばいいだけなんですね・・素直に$title使えよって話ですが。

チェックの判定はchecked関数で行える。

<input name="<?php echo $this->get_field_name('checkbox'); ?>" type="checkbox" value="1"<?php checked( $instance['checkbox'], 1 ); ?>/>

↑ 上記の例だと$instance[‘checkbox’]が1の時はchecked=”checked”を追加し、保存できる。

<?php echo ( $checkbox ) ? 'checked="checked"' : ''; ?>

↑ 最初は条件演算子で判定してて上手く保存されなかったので結構悩みました。・・・が、先ほど再度テストしたら普通に保存できた。なんか抜けてたっぽいです。悩んだ時間は一体なんなの・・という訳でどっちでもOKです。

以上メモでした。

ホーム
トップ
タイトルとURLをコピーしました