Sección de imagen personalizada en Personalizador

Navega tus respuestas
9

Así que tengo esta sección personalizada en el personalizador que controla los productos principales en la página de inicio. Todos están registrados y así sucesivamente, pero el problema con el que estoy atascado es cuando el cliente carga una de las características de la imagen que no sé cómo actualizarla.

Código

functions.php con el que estoy trabajando: 

    // 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');

He configurado los 2 productos para que tengan la misma imagen predeterminada, pero cuando entro en el personalizador y actualizo Feature Product #2 , no se actualiza en absoluto.

Sé que necesito agregar algún código en la página principal dentro de la etiqueta <img> pero no sé qué: /

Tengo la sensación de que lo que tengo arriba es un camino largo y sinuoso para hacer las cosas, pero es lo que obtuve trabajando. Si hay una manera fácil, te agradecería que me indicaras en esa dirección :)

Aprecio cualquier ayuda

Nota al margen : Mi front-page.php : 

<div class="featureImg">
    <img src="What goes here?" alt="Product 1">
    <img src="What goes here?" alt="Product 1">
</div>
    
pregunta Stephen 26.01.2016 - 12:52

1 respuesta

8

Así que hice una investigación al respecto y encontré una solución. Básicamente, WordPress tiene esta característica genial donde puedes llamar a algo llamado get_theme_mod , así que lo que esencialmente hice fue agregar get_theme_mod dentro de mi <img> src .

Así que esto es a lo que cambié mi etiqueta <img> después de descubrir get_theme_mod : 

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

Básicamente, lo que hizo fue recuperar el $wp_customize->add_setting('customizer-setting-name') y luego emitir el contenido. Aunque no he encontrado ninguna manera de poner un default-image en el personalizador, pero cuando lo haga actualizaré esta publicación.

Esto es lo que parece ahora mi archivo 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');
    
respondido por el Stephen 26.01.2016 - 13:00

Lea otras preguntas en las etiquetas

¿Hay alguna forma de mostrar todas mis publicaciones en un solo mapa de Google? ¿Generar un menú que muestre páginas secundarias usando wp_list_pages () con la nueva funcionalidad de menú en WordPress 3.0?