Sección personalizada de imágenes en el Customizer de WordPress

Question

Sección personalizada de imágenes en el Customizer de WordPress

26 ene 2016, 13:52:11

Vistas: 17.3K

Votos: 9

Tengo una Sección Personalizada en el Customizer que controla los Productos Destacados en la Página de Inicio. Todo está registrado correctamente, pero el problema con el que me encuentro es que cuando el cliente sube una de las imágenes destacadas, no sé cómo hacer que se actualice.

Código en functions.php con el que estoy trabajando:

    // Personalizador
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'           => __('Productos Destacados', 'themeRemax'),
        'description'     => __('Tus 5 imágenes destacadas en la Página de Inicio.'), 
        'priority'        => 70,
        'active_callback' => 'is_front_page',
    ));

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'feature_product_one_control', array(
        'label' => __('Producto Destacado #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' => __('Producto Destacado #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' => __('Producto Destacado #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' => __('Producto Destacado #4', 'themeRemax'),
        'section' => 'feature_images',
        'settings' => 'feature_product_four',
    )));     

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

He configurado 2 productos para que tengan la misma imagen por defecto, pero cuando voy al customizer y actualizo Producto Destacado #2, no se actualiza en absoluto.

Sé que necesito agregar algún código en el front-page dentro de la etiqueta <img> pero no sé cuál :/

Tengo la sensación de que lo que tengo arriba es una forma complicada de hacer las cosas, pero es lo que me funcionó. Si hay una manera más fácil, agradecería que me lo indicaras :)

Agradezco cualquier ayuda

Nota adicional: Mi front-page.php:

<div class="featureImg">
    <img src="¿Qué va aquí?" alt="Producto 1" title="Producto destacado 1">
    <img src="¿Qué va aquí?" alt="Producto 2" title="Producto destacado 2">
</div>

Stephen

1.3K

desarrollo de temas personalizador de temas

Todas las respuestas a la pregunta

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

Así que investigué un poco sobre el tema y encontré una solución. Básicamente WordPress tiene esta interesante característica donde puedes llamar algo llamado get_theme_mod, así que lo que esencialmente hice fue agregar get_theme_mod dentro del src de mi <img>.

Esto es lo que cambié en mi etiqueta <img> después de descubrir get_theme_mod:

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

Básicamente lo que esto hizo fue obtener el $wp_customize->add_setting('customizer-setting-name') y luego mostrar el contenido. Aunque todavía no he encontrado una manera de poner una imagen-por-defecto dentro del personalizador, pero cuando lo haga actualizaré esta publicación.

Así es como se ve ahora mi archivo customizer.php:

function themeName_customize_register( $wp_customize ) {

    // Añadir Configuraciones
    $wp_customize->add_setting('customizer_setting_one', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));
    $wp_customize->add_setting('customizer_setting_two', array(
        'transport'         => 'refresh',
        'height'         => 325,
    ));

    // Añadir Sección
    $wp_customize->add_section('slideshow', array(
        'title'             => __('Imágenes del Slider', 'name-theme'), 
        'priority'          => 70,
    ));    

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