テーマカスタマイザー上のウィジェット設定でも options にも登録できるようにする

Posted on Update by admin

main_customizer-widget

オリジナルウィジェットを作る時に、ウィジェット内で項目の設定値を他の場所で連動して使いたい時があります。その場合、項目の値を options に登録しておくと他の場所で使う時には get_option() で簡単に呼び出せますので、この方法はよく使われています。

しかし、テーマカスタマイザー上で ウィジェットを設定変更しても 通常の方法では options へは登録されません。
そのままではウィジェットでは設定されますが options が反映されていませんので 管理画面の「外観→ウィジェット」で再設定しなくてはいけません。

そこで、テーマカスタマイザー上で設定しても options に登録するようにできるコードを作ってみました。
以下のコードを ご自身のオリジナルウィジェット用に変更して ウィジェット用のコードに追加するか my-plugin.php に張り付けてみてください。

　

参考コード

オリジナルウィジェット名(Base ID)を「hogehoge」とします。
ウィジェットの項目名を「hoge_data」とします。
options に登録する項目名を「hoge_data_options」とします。

/*
 * テーマカスタマイザー  options に登録
 * @package WordPress3.9
 *
 * License: GPLv2 or later
*/
function nendebcom_customize_save_after_widget_hogehoge( $wp_customize ) {

	//保存対象のデータがあるウィジェット名を取得する
	$_post_values = json_decode( wp_unslash( $_POST['customized'] ), true );
	if( $_post_values ){
		//widget_hogehoge idが付いた ウィジェット名を取得する
		foreach( $_post_values as $widget_name=>$value ){

			$pos = strpos( $widget_name, 'widget_hogehoge' );
			if( $pos !== false ){
				//ウィジェット名で更新するウィジェットの項目と値を取得
				$data = $wp_customize->get_setting( $widget_name )->post_value();

				//目的の項目があれば options に登録する
				if( isset( $data['hoge_data'] ) ){
					update_option( 'hoge_data_options', esc_attr( $data['hoge_data'] ) );
				}
			}
		}
	}
}
add_action( 'customize_save_after', 'nendebcom_customize_save_after_widget_hogehoge' );

※WordPress4.7betaでも動作確認してます。
※このアクションフックは テーマカスタマイザーの「保存して公開」ボタンを押した後に動作します。
※ウィジェット名(Base ID)が「hogehoge」の場合、strpos の所では「widget_hogehoge」で探します。
※options に登録する項目が複数ある場合は「//目的の項目があれば options に登録する」の所を options名ごとに複数置いてください。

※上記の functionコードは オリジナルウィジェットの Class内 に入れることもできます。
　その場合は add_action( ‘customize_save_after’～の所を __construct() 内に入れてください。
　例

add_filter( 'customize_save_after', array( $this, 'nendebcom_customize_save_after_widget_hogehoge' ) );

　

スポンサードリンク



　

おまけ

項目の値を options に登録するコードを　WP_Widget::update　内に書いてしまうと
「エラーが発生しました。リロードしてもう一度お試しください。」
と表示されてテーマカスタマイザー上で ウィジェット操作がができなくなります。

これを回避するためには以下のコードを試してみてください。

	/** Updates a particular instance of a widget. */
	public function update( $new_instance, $old_instance ) {

		if( !is_customize_preview() ){
			update_option( 'hoge_data_options', esc_attr( $new_instance['hoge_data'] ) );
		}

		return $new_instance;
	}

※テーマカスタマイザー上での options に登録は最初のコードでやってくれますので、テーマカスタマイザーの場合はここの部分を動作しなくします。
※is_customize_preview()は WordPress4.0以降 で動作します。
　
　

参考

do_action( ‘customize_save_after’, WP_Customize_Manager $this ) – WordPress Developer Resources
https://developer.wordpress.org/reference/hooks/customize_save_after/

テーマカスタマイズ API – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA_API

Function Reference/update option – WordPress Codex
https://codex.wordpress.org/Function_Reference/update_option

関数リファレンス/get option – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_option

Function Reference/is customize preview – WordPress Codex
https://codex.wordpress.org/Function_Reference/is_customize_preview




スポンサードリンク