更新日期:2023-03-07

在佈景的「自訂」項目中,原本 Woocommerce 的「商店通知」設定只有一個文字輸入框,想要更改顯示的文字顏色,或是通知條的背景色就要去改 css,對於不懂怎麼修改的人極其不方便。若能在該文字框下多了顏色的設定功能,就很方便隨時更改了。

add_action( 'customize_register', 'sig_demo_store_color' , 99 );

function sig_demo_store_color($wp_customize) {

	$wp_customize->add_setting(
		'woocommerce_demo_store_notice_color',
		array(
			'type'              => 'theme_mod',
            'capability'        => 'edit_theme_options',
            'theme_supports'    => '',
			'default'           => '#ffffff',
			'transport'         => 'refresh',
			'sanitize_callback' => 'sanitize_hex_color',
			'sanitize_js_callback'=> '',
		)
	);

	$wp_customize->add_control(
		'woocommerce_demo_store_notice_color',
		array(
			'label'       => '文字顏色',
			'section'     => 'woocommerce_store_notice',
			'settings'    => 'woocommerce_demo_store_notice_color',
			'type'        => 'color',
		)
	);

	$wp_customize->add_setting(
		'woocommerce_demo_store_notice_bgcolor',
		array(
			'type'              => 'theme_mod',
			'capability'        => 'edit_theme_options',
			'theme_supports'    => '',
			'default'           => '#a46497',
			'transport'         => 'refresh',
			'sanitize_callback' => 'sanitize_hex_color',
			'sanitize_js_callback'=> '',
		)
	);

	$wp_customize->add_control(
		'woocommerce_demo_store_notice_bgcolor',
		array(
			'label'       => '背景顏色',
			'section'     => 'woocommerce_store_notice',
			'settings'    => 'woocommerce_demo_store_notice_bgcolor',
			'type'        => 'color',
		)
	);

}

add_action( 'customize_controls_print_styles', 'sig_footer_inline_css' );
add_action( 'wp_footer', 'sig_footer_inline_css' );

function sig_footer_inline_css(){
    $notice_color   = get_theme_mod( 'woocommerce_demo_store_notice_color', '#ffffff' );
	$notice_bgcolor = get_theme_mod( 'woocommerce_demo_store_notice_bgcolor', '#a46497' );

	echo '<style type="text/css">.woocommerce-store-notice, p.demo_store {';
	echo "color:{$notice_color}; background-color:{$notice_bgcolor};";
    echo '}</style>';
}