更新日期: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>';
}