WordPress : Utilisez le personnalisateur pour définir l’image d’arrière-plan d’un div

J’essaie d’utiliser le personnalisateur pour définir l’image d’arrière-plan de chaque « post-bloc » comme étant celle de toute image que je choisis de télécharger. Voici mon code jusqu’à présent.

function jhwdblog_customize_register( $wp_customize ) {
    $wp_customize->add_section( 'post_box_image_section' , array(
            'title'      => __( 'Post Box Background', 'jhwdblog' ),
            'description' => 'Upload a logo to replace the post box background image',
            'priority'   => 30,
    ));

    $wp_customize->add_setting( 'post_box_image');

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'post_box_image', array(
            'label'      => __( 'Post Box Image', 'jhwdblog' ),
            'section'    => 'post_box_image_section',
            'settings'   => 'post_box_image',
    )));
}
add_action( 'customize_register', 'jhwdblog_customize_register' );

et dans ma page j’essaie de l’ajouter au style en ligne comme ça

<div class="post-block" style="background-image:url('<?php echo esc_url(get_theme_mod( 'post-box-image' )); ?> ');">

Cependant, tout ce que j’obtiens lorsque je vérifie l’inspecteur est background-image: url ((inconnu)). Qu’est-ce que j’oublie ici?

Solution n°1 trouvée

Vous avez une petite faute de frappe dans votre get_theme_mod()appel. Vous utilisez post-box-imagequand il le faut post_box_image. Alors comme ça :

<div class="post-block" style="background-image:url('<?php echo esc_url( get_theme_mod( 'post_box_image' ) ); ?>');">

De plus, lorsque vous définissez votre paramètre, vous devez spécifier un sanitize_callbackcomme ceci :

$wp_customize->add_setting( 'post_box_image', array(
    'sanitize_callback' => function( $value ) {
        if ( ! empty( $value ) ) {
            $value = esc_url_raw( $value );
            if ( empty( $value ) ) {
                return new WP_Error( 'invalid_image' );
            }
        }
        return $value;
    },
) );

Solution n°2 trouvée

J’ai compris: Tout d’abord, il y a une faute d’orthographe dans la mesure où j’utilise ‘post-box-image’ au lieu de ‘post_box_image’ …

Deuxièmement, il est préférable de le faire de cette façon dans functions.php :

function jhwd_blog_theme_customize_css()
{
?>
    <style type="text/css">
        .post-block {
            background-image:url('<?php echo get_theme_mod( 'post_box_image' );?>');
            background-color: <?php echo get_theme_mod( 'post_box_color' );?>;
        }
        .post-block>h1, .post-boxes {
            background-color: <?php echo get_theme_mod( 'post_boxes_items_color' );?>;
        }
    </style>
<?php
}
add_action( 'wp_head', 'jhwd_blog_theme_customize_css');