定制器中的自定义图像部分

时间:2016-01-26 作者:Stephen

因此,我在Customizer中有一个自定义部分,用于控制主页上的功能产品。那里都注册了等等,但我一直坚持的问题是,当客户端上载一个功能图像时,我不知道如何更新它。

functions.php 我使用的代码:

    // 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\');
我已将这两个产品设置为具有相同的默认图像,但当我进入自定义程序并更新时Feature Product #2 它根本不更新。

我知道我需要在<img> 标签,但我不知道是什么:/

我有一种感觉,我上面所说的是一种冗长的做事方式,但这正是我所做的,如果有一种简单的方式,那么我将非常感谢你为我指明方向:)

谢谢你的帮助

旁注:我的front-page.php:

<div class="featureImg">
    <img src="What goes here?" alt="Product 1">
    <img src="What goes here?" alt="Product 1">
</div>

1 个回复
最合适的回答,由SO网友:Stephen 整理而成

所以我对这件事做了一些研究,找到了一个解决办法。基本上WordPress有一个很酷的功能,你可以调用get_theme_mod 所以我实际上做的是添加get_theme_mod 在我的内部<img> src.

这就是我改变的<img> 发现后标记为get_theme_mod:

<img src="<?php echo esc_url( get_theme_mod( \'customizer-option-name\' ) ); ?>" alt="Product 1">
基本上,它所做的是$wp_customize->add_setting(\'customizer-setting-name\') 然后输出内容。虽然我还没有找到办法default-image 在自定义程序中,但当我这样做时,我将更新此帖子。

这是我的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_one_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\');

相关推荐