web-dev-qa-db-fra.com

Section Image personnalisée dans le Customizer

J'ai donc cette section personnalisée dans le Customizer qui contrôle les produits vedettes sur la page d'accueil. Tous se sont enregistrés, etc., mais le problème sur lequel je suis coincé est lorsque le client télécharge une des images de fonctionnalité que je ne sais pas comment la mettre à jour.

functions.php code avec lequel je travaille:

    // Customiser
function themeName_customize_register( $wp_customize ) {
    $wp_customize->add_setting('feature_product_one', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_two', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_three', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_setting('feature_product_four', array(
        'default-image' => get_template_directory_uri() . '/assest/imgs/featureProducts/product1.png',
        'transport'     => 'refresh',
        'height'        => 180,
        'width'        => 160,
    ));

    $wp_customize->add_section('feature_images', array(
        'title'           => __('Featured Products', 'themeRemax'),
        'description'     => __('Your 5 Feature Images on the Home-Page.'), 
        'priority'        => 70,
        'active_callback' => 'is_front_page',
    ));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_one_control', array(
        'label' => __('Feature Product #1', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_one',
    )));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_two_control', array(
        'label' => __('Feature Product #2', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_two',
    )));  

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_three_control', array(
        'label' => __('Feature Product #3', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_three',
    )));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_four_control', array(
        'label' => __('Feature Product #4', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_four',
    )));     

}
add_action('customize_register', 'themeName_customize_register');

J'ai défini la même image par défaut pour les 2 produits, mais lorsque je vais dans le personnalisateur et que je mets à jour le Feature Product #2, il ne se met pas à jour du tout.

Je sais que je dois ajouter du code dans la page de garde à l'intérieur de la balise <img> mais je ne sais pas quoi: /

J'ai l'impression que ce que j'ai ci-dessus est une façon longue de faire les choses, mais c'est ce que j'ai réussi à faire. S'il y a un moyen facile, alors j'apprécierais que vous me dirigiez dans cette direction :)

J'apprécie toute aide

Note latérale : Mon front-page.php :

<div class="featureImg">
    <img src="What goes here?" alt="Product 1">
    <img src="What goes here?" alt="Product 1">
</div>
theme-developmenttheme-customizer
9
Stephen

J'ai donc fait des recherches sur le sujet et j'ai trouvé une solution. En gros, WordPress propose cette fonctionnalité intéressante dans laquelle vous pouvez appeler un élément appelé get_theme_mod. Ce que j’ai fait est donc essentiellement ajouté get_theme_mod dans mon <img> src.

C'est donc ce que j'ai changé pour ma balise <img> après avoir découvert get_theme_mod:

<img src="<?php echo esc_url( get_theme_mod( 'customizer-setting-name' ) ); ?>" alt="Product 1">

En gros, cela récupérait la $wp_customize->add_setting('customizer-setting-name'), puis le contenu. Bien que je n'ai pas encore trouvé le moyen de mettre un default-image dans le personnaliseur, je le mettrai à jour dès que je le ferai.

Voici à quoi ressemble mon fichier customizer.php:

function themeName_customize_register( $wp_customize ) {

    // Add Settings
    $wp_customize->add_setting('customizer_setting_one', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));
    $wp_customize->add_setting('customizer_setting_two', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));

    // Add Section
    $wp_customize->add_section('slideshow', array(
        'title'             => __('Slider Images', 'name-theme'), 
        'priority'          => 70,
    ));    

    // Add Controls
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_two_control', array(
        'label'             => __('Slider Image #1', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_one',    
    )));
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_two_control', array(
        'label'             => __('Slider Image #2', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_two',
    )));    
}
add_action('customize_register', 'themeName_customize_register');
8
Stephen