WordPress Customizer 中的 Custom Image 部分

问题描述

所以我在定制器中有这个自定义部分来控制主页上的功能产品。所有注册等等，但我遇到的问题是当客户端上传其中一个功能图像时，我不知道如何使其更新。

我正在使用的 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');

我设置了 2 个产品具有相同的默认图像，但是当我进入定制程序并更新 Feature Product #2 它根本不更新。

我知道我需要在<img> 标签中的 front-page 中添加一些代码，但是我不知道什么：/

我有一种感觉，我以上所说的是一个长期的方式来做事情，但它是我工作的，如果有一个简单的方法，那么我会感激你指出我的方向:)

我感谢任何帮助

侧注：我的 front-page.php：

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

最佳解决方案

所以我做了一些研究，我找到了一个解决方案。基本上 WordPress 有这个很酷的功能，您可以在其中调用名为 get_theme_mod 的内容，所以我本来做的是在<img> src 中添加 get_theme_mod 。

所以这是我发现 get_theme_mod 后，我改变了<img> 标签：

<img src="<?php%20echo%20esc_url(%20get_theme_mod(%20'customizer-setting-name'%20)%20);%20?>" 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_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');

参考文献

Custom Image section in Customizer

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress Customizer 中的 Custom Image 部分