Sezione Immagini Personalizzate nel Customizer

Question

Sezione Immagini Personalizzate nel Customizer

26 gen 2016, 13:52:11

Visualizzazioni: 17.3K

Voti: 9

Ho questa sezione personalizzata nel Customizer che gestisce i Prodotti in Evidenza nella Home Page. Tutto è registrato correttamente, ma il problema su cui sono bloccato è che quando il cliente carica una delle immagini in evidenza, non so come fare per aggiornarla.

Codice in functions.php con cui sto lavorando:

    // Customizer
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'           => __('Prodotti in Evidenza', 'themeRemax'),
        'description'     => __('Le tue 5 immagini in evidenza nella 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' => __('Prodotto in Evidenza #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' => __('Prodotto in Evidenza #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' => __('Prodotto in Evidenza #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' => __('Prodotto in Evidenza #4', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_four',
    )));     

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

Ho impostato i 2 prodotti con la stessa immagine predefinita, ma quando vado nel customizer e aggiorno Prodotto in Evidenza #2 non si aggiorna affatto.

So che devo aggiungere del codice nel front-page all'interno del tag <img> ma non so cosa :/

Ho la sensazione che quello che ho fatto sopra sia un modo troppo complesso per ottenere questo risultato, ma è l'unico che sono riuscito a far funzionare. Se c'è un modo più semplice, apprezzerei molto se me lo indicaste :)

Apprezzo qualsiasi aiuto

Nota a margine: Il mio front-page.php:

<div class="featureImg">
    <img src="Cosa va qui?" alt="Prodotto 1">
    <img src="Cosa va qui?" alt="Prodotto 1">
</div>

Stephen

1.3K

sviluppo temi personalizzatore temi

Tutte le risposte alla domanda

Stephen 1.3K · Accepted Answer · 2016-01-26T14:00:50Z

Ho fatto alcune ricerche sull'argomento e ho trovato una soluzione. Fondamentalmente WordPress ha questa interessante funzionalità dove puoi chiamare qualcosa chiamato get_theme_mod, quindi quello che ho fatto è stato aggiungere get_theme_mod all'interno del mio <img> src.

Quindi questo è come ho modificato il mio tag <img> dopo aver scoperto get_theme_mod:

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

In pratica questo ha recuperato il $wp_customize->add_setting('customizer-setting-name') e poi ha restituito il contenuto. Anche se non ho ancora trovato un modo per inserire un'default-image all'interno del customizer, ma quando lo farò aggiornerò questo post.

Questo è come appare ora il mio file customizer.php:

function themeName_customize_register( $wp_customize ) {

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

    // Aggiungi Sezione
    $wp_customize->add_section('slideshow', array(
        'title'             => __('Immagini Slider', 'name-theme'), 
        'priority'          => 70,
    ));    

    // Aggiungi Controlli
    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'customizer_setting_one_control', array(
        'label'             => __('Immagine Slider #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'             => __('Immagine Slider #2', 'name-theme'),
        'section'           => 'slideshow',
        'settings'          => 'customizer_setting_two',
    )));    
}
add_action('customize_register', 'themeName_customize_register');