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 部分