WordPress小部件选择框保存时无法正确显示的选项

Question

我创建了一个Widget，它将自定义帖子类型的标题作为选项进行选择。当我点击小部件上的“保存”时，一切都消失了。但是，如果我刷新小部件页面并返回到该小部件，则所有内容都会正确显示。只是在最初的“保存”上，事情看起来很糟糕。

顺便说一句，我正在试图弄清楚如何抓取所选项目的特色图像，以便在前端显示它。难以弄清楚这一点。但是，如果我需要单独发布这个问题，那很好。

// Product Slider Widget //
add_action( 'widgets_init', function(){
register_widget( 'DNF_Product_Slider_Widget' );
});

class DNF_Product_Slider_Widget extends WP_Widget {

// Register widget //
function __construct() {
    parent::__construct(
        'dnf_product_slider_widget',
        __('DNF Product Slider', 'dnf'),
        array( 'description' => __( 'A widget to display 6 products, 2 at a time, in a slider', 'dnf' ), )
    );
}

// Displays the widget settings controls on the widget panel //
public function form($instance) {

    $defaults = array('title' => __('Product Slider'), 'product1' => '', 'product2' => '', 'product3' => '', 'product4' => '', 'product5' => '', 'product6' => '');
    $instance = wp_parse_args((array) $instance, $defaults);

    $args = array(
        'post_type' => 'dnf_simple_products'
    );

    $query = new WP_Query( $args );
    $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'dnf-cat' );
    $url = $thumb['0'];
    ?>

    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $instance['title']; ?>" />
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 1:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product1'); ?>" name="<?php echo $this->get_field_name('product1'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 2:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product2'); ?>" name="<?php echo $this->get_field_name('product2'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>


    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 3:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product3'); ?>" name="<?php echo $this->get_field_name('product3'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 4:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product4'); ?>" name="<?php echo $this->get_field_name('product4'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 5:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product5'); ?>" name="<?php echo $this->get_field_name('product5'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>

    <p>
        <label for="<?php echo $this->get_field_id('text'); ?>">Product 6:</label>
        <?php if ($query->have_posts()) {?>
        <select class='widefat' id="<?php echo $this->get_field_id('product6'); ?>" name="<?php echo $this->get_field_name('product6'); ?>" type="text">
            <option label="" disabled></option>
            <optgroup label="Select a Product">
                <?php while ( $query->have_posts() ) : $query->the_post(); ?>
                <option value='<?php the_title(); ?>'><?php the_title(); ?></option>
                <?php endwhile; ?>
            </optgroup>
        </select>
        <?php } ?>
    </p>

    <?php
}

// Save widget selections //
public function update( $new_instance, $old_instance ) {
    $instance = $old_instance;

    $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['product1'] = $new_instance['product1'];
    $instance['product2'] = $new_instance['product2'];
    $instance['product3'] = $new_instance['product3'];
    $instance['product4'] = $new_instance['product4'];
    $instance['product5'] = $new_instance['product5'];
    $instance['product6'] = $new_instance['product6'];

    return $instance;
}

// Display the widget on the frontend //
public function widget($args, $instance) {
    extract($args);

    $product1 = $instance['product1'];
    $product2 = $instance['product2'];
    $product3 = $instance['product3'];
    $product4 = $instance['product4'];
    $product5 = $instance['product5'];
    $product6 = $instance['product6'];

    $title = apply_filters('widget_title', $instance['title']);

    $title = $instance['title'];

    echo $before_widget;

    if (trim($title) != '')
        echo '<h6>' . $title . '</h6>';

        echo '<div class="well"><div id="productCarousel" class="carousel slide prods"><div class="carousel-inner">';

    if (!empty($product1))
        echo '<div class="item active"><div class="row"><div class="col-md-6"><div class="thumbnail"><img src="' . $url1 . '"><div class="caption"><h3>' . $product1 . '</h3></div></div></div>';
    if (!empty($product2))
        echo '<div class="col-md-6"><div class="thumbnail"><img src="' . $url2 . '"><div class="caption"><h3>' . $product2 . '</h3></div></div></div></div></div>';
    if (!empty($product3))
        echo '<div class="item"><div class="row"><div class="col-md-6"><div class="thumbnail"><img src="' . $url3 . '"><div class="caption"><h3>' . $product3 . '</h3></div></div></div>';
    if (!empty($product4))
        echo '<div class="col-md-6"><div class="thumbnail"><img src="' . $url4 . '"><div class="caption"><h3>' . $product4 . '</h3></div></div></div></div></div>';
    if (!empty($product5))
        echo '<div class="item"><div class="row"><div class="col-md-6"><div class="thumbnail"><img src="' . $url5 . '"><div class="caption"><h3>' . $product5 . '</h3></div></div></div>';
    if (!empty($product6))
        echo '<div class="col-md-6"><div class="thumbnail"><img src="' . $url6 . '"><div class="caption"><h3>' . $product6 . '</h3></div></div></div></div></div>';

        echo '</div>';
        echo '<a class="left carousel-control" href="#productCarousel" data-slide="prev"><i class="fa fa-chevron-left fa-2x"></i></a>';
        echo '<a class="right carousel-control" href="#productCarousel" data-slide="next"><i class="fa fa-chevron-right fa-2x"></i></a>';
        echo '</div></div>';
    echo $after_widget;
}
}