ส่วนรูปภาพที่กำหนดเองใน Customizer


9

ดังนั้นฉันมีส่วนที่กำหนดเองนี้ในเครื่องมือปรับแต่งที่ควบคุมผลิตภัณฑ์คุณสมบัติในหน้าแรก มีการลงทะเบียนทั้งหมดและอื่น ๆ แต่ปัญหาที่ฉันติดอยู่คือเมื่อลูกค้าอัปโหลดหนึ่งในภาพคุณลักษณะที่ฉันไม่ทราบวิธีที่จะทำให้การปรับปรุง

รหัสfunction.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.phpของฉัน:

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

คำตอบ:


11

ดังนั้นฉันจึงทำการวิจัยเกี่ยวกับเรื่องนี้และพบวิธีแก้ปัญหา โดยทั่วไป 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');
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.