通过我的子主题的functions.php，我向WordPress定制器添加了一些自定义设置。代码如下所示：
<?php
class Dii_Custom_TopBar{
public static function register ( $wp_customize ) {
$wp_customize->add_section('dii_topbar', array(
'title' => __( 'DiI Top-Leiste', 'MyChild' ),
'priority' => 30,
));
$wp_customize->add_setting( 'dii_topbar_activation', array(
'default' => 0,
'sanitize_callback' => 'absint',
'type' => 'theme_mod',
));
$wp_customize->add_setting( 'dii_topbar_bgcolor', array(
'default' => apply_filters( 'dii_topbar_bgcolor', '#000000' ),
'sanitize_callback' => 'sanitize_hex_color',
'type' => 'theme_mod',
'css' => array(
array(
'selector' => '.dii-topbar',
'property' => 'background-color',
),
),
));
$wp_customize->add_setting( 'dii_topbar_textcolor', array(
'default' => apply_filters( 'dii_topbar_textcolor', '#ffffff' ),
'sanitize_callback' => 'sanitize_hex_color',
'type' => 'theme_mod',
));
$wp_customize->add_setting('dii_topbar_padding_top', array(
'default' => 0,
'sanitize_callback' => 'absint',
'type' => 'theme_mod',
));
$wp_customize->add_setting('dii_topbar_padding_right', array(
'default' => 0,
'sanitize_callback' => 'absint',
'type' => 'theme_mod',
));
$wp_customize->add_setting('dii_topbar_padding_bottom', array(
'default' => 0,
'sanitize_callback' => 'absint',
'type' => 'theme_mod',
));
$wp_customize->add_setting('dii_topbar_padding_left', array(
'default' => 0,
'sanitize_callback' => 'absint',
'type' => 'theme_mod',
));
$wp_customize->add_setting('dii_topbar_content', array(
'default' => '',
'sanitize_callback' => 'wp_kses_post',
'type' => 'theme_mod',
));
$wp_customize->add_control(new WP_Customize_Control($wp_customize, 'dii_topbar_activation', array(
'label' => esc_html__( 'DiI Top-Leiste aktivieren?', 'MyChild' ),
'section' => 'dii_topbar',
'settings' => 'dii_topbar_activation',
'type'=> 'checkbox',
)));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'dii_topbar_bgcolor', array(
'label' => esc_html__( 'Hintergrundfarbe', 'MyChild' ),
'section' => 'dii_topbar',
'settings' => 'dii_topbar_bgcolor',
)));
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'dii_topbar_textcolor', array(
'label' => esc_html__( 'Textfarbe', 'MyChild' ),
'section' => 'dii_topbar',
'settings' => 'dii_topbar_textcolor',
)));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'dii_topbar_padding_top', array(
'label' => esc_html__('Innenabstand oben', 'MyChild'),
'section' => 'dii_topbar',
'description' => esc_html__( 'Eingaben in px.' ),
'settings' => 'dii_topbar_padding_top',
'priority' => 10,
'type' => 'number'
)));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'dii_topbar_padding_right', array(
'label' => esc_html__('Innenabstand rechts', 'MyChild'),
'section' => 'dii_topbar',
'description' => esc_html__( 'Eingaben in px.' ),
'settings' => 'dii_topbar_padding_right',
'priority' => 10,
'type' => 'number'
)));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'dii_topbar_padding_bottom', array(
'label' => esc_html__('Innenabstand unten', 'MyChild'),
'section' => 'dii_topbar',
'description' => esc_html__( 'Eingaben in px.' ),
'settings' => 'dii_topbar_padding_bottom',
'priority' => 10,
'type' => 'number'
)));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'dii_topbar_padding_left', array(
'label' => esc_html__('Innenabstand links', 'MyChild'),
'section' => 'dii_topbar',
'description' => esc_html__( 'Eingaben in px.' ),
'settings' => 'dii_topbar_padding_left',
'priority' => 10,
'type' => 'number'
)));
$wp_customize->add_control(new WP_Customize_Control($wp_customize,'dii_topbar_content', array(
'label' => esc_html__('Inhalt Top-Leiste', 'MyChild'),
'section' => 'dii_topbar',
'description' => esc_html__( 'HTML-Eingaben sind erlaubt.' ),
'settings' => 'dii_topbar_content',
'priority' => 10,
'type' => 'text'
)));
function dii_number_sanitation( $number, $setting ) {
$number = absint( $number );
return ( $number ? $number : $setting->default );
}
}
public static function inject_css() {
$background = get_theme_mod('dii_topbar_bgcolor');
$textcolor = get_theme_mod('dii_topbar_textcolor');
$padding_top = get_theme_mod('dii_topbar_padding_top');
$padding_right = get_theme_mod('dii_topbar_padding_right');
$padding_bottom = get_theme_mod('dii_topbar_padding_bottom');
$padding_left = get_theme_mod('dii_topbar_padding_left');
?><style>
.dii-topbar{
position:sticky;
z-index:99999;
width:100%;
background:<?php echo $background;?>;
color:<?php echo $textcolor;?>;
padding: <?php echo $padding_top;?>px <?php echo $padding_right;?>px <?php echo $padding_bottom;?>px <?php echo $padding_left;?>px;
}
</style><?php
}
public static function topbar_html( $wp_customize ){
$dii_topbar=get_theme_mod('dii_topbar_content');
if ( get_theme_mod ('dii_topbar_activation') == 1 ) {
echo '<div class="dii-flex-container"><div class="dii-topbar">' . wp_kses_post($dii_topbar) . '</div></div>';
}
}
}
add_action( 'customize_register' , array( 'Dii_Custom_TopBar' , 'register' ) );
add_action('wp_head',array( 'Dii_Custom_TopBar' , 'inject_css' ));
add_action('porto_before_header', array( 'Dii_Custom_TopBar' , 'topbar_html' ));
?>
只要打开定制器并启用实时预览，代码就会按预期工作。但是一旦定制器关闭，css delarations 就是空的，如下面的截图所示：
顺便说一句：缓存被禁用，而不是该问题的根本原因。