wordpressで自作のカスタムウィジェットを設置したいが、画像が保存されない。

Question

前提・実現したいこと

ワードプレスでカスタムウィジェットを自作で設定したい。

▼設定したい項目
・順位:テキストボックスを設置
・名前：テキストボックスを設置
・画像：メディアから画像を選択する
・URL：テキストボックスを設置

発生している問題・エラーメッセージ

画像だけが保存されず、保存するボタンを押すと
画像のみが消えてしまう（画像が未選択ですと出ます）
そのほかの入力したテキストは保存されている状態です。

該当のソースコード

・functions.php
//ウィジェットを登録する
function My_Widget_init() {

register_sidebar( array(
'name' => 'ランキング表示用（作業中）',
'id' => 'ranking_widget',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'My_Widget_init' );

class FixedWidgetItem extends WP_widget {
function __construct() {
parent::__construct(
'fixed_id001',
'月間ランキング',
array( 'description' => 'ランキング表示用です' )
);
}
public function widget($args, $instance) {
$dest_rank = !empty($instance['setting_rank']) ? $instance['setting_rank'] : "";
$dest_name = !empty($instance['setting_name']) ? $instance['setting_name'] : "";
$dest_image = !empty($instance['setting_image']) ? $instance['setting_image'] : "";
$dest_url = !empty($instance['setting_url']) ? $instance['setting_url'] : "";
echo '<div id="fixed-widget">'.$args['before_widget'];
echo $args['before_title'].$dest_title.$args['after_title'];
echo $args['after_widget'].'</div>';
}
public function form($instance) {
$dest_rank = !empty($instance['setting_rank']) ? $instance['setting_rank'] : "";
$dest_name = !empty($instance['setting_name']) ? $instance['setting_name'] : "";
$dest_image = !empty($instance['setting_image']) ? $instance['setting_image'] : "";
$dest_url = !empty($instance['setting_url']) ? $instance['setting_url'] : "";
?>
<p>
<label for="<?php echo $this->get_field_id('setting_rank'); ?>">順位</label><br>
<input id="<?php echo $this->get_field_id('setting_rank'); ?>" name="<?php echo $this->get_field_name('setting_rank'); ?>" type="text" value="<?php echo esc_attr($dest_rank); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('setting_name'); ?>">名前</label><br>
<input id="<?php echo $this->get_field_id('setting_name'); ?>" name="<?php echo $this->get_field_name('setting_name'); ?>" type="text" value="<?php echo $dest_name; ?>">
</p>

<p>
  <label for="<?php echo $this->get_field_id('setting_image'); ?>">画像</label><br>
  <?php
      $show_p = '';
      $show_img = '';
      if ( empty( $dest_img ) ) {
        $show_img = ' style="display: none;" ';
     } else {
        $show_p = ' style="display: none;" ';
      }
  ?>
  <p class="fixed-image-text" <?php echo $show_p; ?>>画像が未選択です</p>
  <p><img class="fixed-image-view" src="<?php echo $dest_img; ?>" width="260" <?php echo $show_img; ?>></p>
  <input class="fixed-image-url" id="<?php echo $this->get_field_id('setting_image'); ?>" name="<?php echo $this->get_field_name('setting_image'); ?>" type="text" value="<?php echo $dest_img; ?>">
  <button type="button" class="fixed-select-image">画像を選択</button>
  <button type="button" class="fixed-delete-image" <?php echo $show_img; ?>>画像を削除</button>
</p>
<p>
  <label for="<?php echo $this->get_field_id('setting_url'); ?>">キャストURL</label><br>
  <input id="<?php echo $this->get_field_id('setting_url'); ?>" name="<?php echo $this->get_field_name('setting_url'); ?>" type="text" value="<?php echo $dest_url; ?>">
</p>
<script>
  jQuery(document).ready(function($) {
    var frame;
    const placeholder = jQuery('.fixed-image-text');
    const imageUrl = jQuery('.fixed-image-url');
    const imageView = jQuery('.fixed-image-view');
    const deleteImage = jQuery('.fixed-delete-image');
    jQuery('.fixed-select-image').on('click', function(e){
      e.preventDefault();
      if ( frame ) {
        frame.open();
        return;
      }
      frame = wp.media({
        title: '画像を選択',
        library: {
          type: 'image'
        },
        button: {
          text: '画像を追加する'
        },
        multiple: false
      });
      frame.on('select', function(){
        var images = frame.state().get('selection');
        images.each(function(file) {
          placeholder.css('display', 'none');
          imageUrl.val(file.toJSON().url);
          imageView.attr('src', file.toJSON().url).css('display', 'block');
          deleteImage.css('display', 'inline-block');
        });
        imageUrl.trigger('change');
      });
      frame.open();
    });
    jQuery('.fixed-delete-image').off().on('click', function(e){
      e.preventDefault();
      imageUrl.val('');
      imageView.css('display', 'none');
      deleteImage.css('display', 'none');
      imageUrl.trigger('change');
    });
  });
</script>

<?php } public function update($new_instance, $old_instance) { $instance = array(); $instance['setting_rank'] = !empty($new_instance['setting_rank']) ? $new_instance['setting_rank'] : ""; $instance['setting_name'] = !empty($new_instance['setting_name']) ? $new_instance['setting_name'] : ""; $instance['setting_image'] = !empty($new_instance['setting_image']) ? $new_instance['setting_image'] : ""; $instance['setting_url'] = !empty($new_instance['setting_url']) ? $new_instance['setting_url'] : ""; return $instance; } } add_action( 'widgets_init', function(){ register_widget('FixedWidgetItem'); } ); いろいろ調べて見ましたが、 どこが間違っているのか自力では見つけられず、 皆さんの力を貸していただきたいと思い、投稿させていただきました。 よろしくお願いいたします。

Answer 1

自己解決いたしました！
原因はスペルミスでした！

//ウィジェットを登録する
function My_Widget_init() {

register_sidebar( array(
'name' => 'ランキング表示用（作業中）',
'id' => 'ranking_widget',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="rounded">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'My_Widget_init' );

class FixedWidgetItem extends WP_widget {
function __construct() {
parent::__construct(
'fixed_id001',
'月間ランキング',
array( 'description' => 'ランキング表示用です' )
);
}
public function widget($args, $instance) {
$dest_rank = !empty($instance['setting_rank']) ? $instance['setting_rank'] : "";
$dest_name = !empty($instance['setting_name']) ? $instance['setting_name'] : "";
$dest_image = !empty($instance['setting_image']) ? $instance['setting_image'] : "";
$dest_url = !empty($instance['setting_url']) ? $instance['setting_url'] : "";
echo '<div id="fixed-widget">'.$args['before_widget'];
echo $args['before_title'].$dest_title.$args['after_title'];
echo $args['after_widget'].'</div>';
}
public function form($instance) {
$dest_rank = !empty($instance['setting_rank']) ? $instance['setting_rank'] : "";
$dest_name = !empty($instance['setting_name']) ? $instance['setting_name'] : "";
$dest_image = !empty($instance['setting_image']) ? $instance['setting_image'] : "";
$dest_url = !empty($instance['setting_url']) ? $instance['setting_url'] : "";
?>
<p>
<label for="<?php echo $this->get_field_id('setting_rank'); ?>">順位</label><br>
<input id="<?php echo $this->get_field_id('setting_rank'); ?>" name="<?php echo $this->get_field_name('setting_rank'); ?>" type="text" value="<?php echo esc_attr($dest_rank); ?>">
</p>
<p>
<label for="<?php echo $this->get_field_id('setting_name'); ?>">名前</label><br>
<input id="<?php echo $this->get_field_id('setting_name'); ?>" name="<?php echo $this->get_field_name('setting_name'); ?>" type="text" value="<?php echo $dest_name; ?>">
</p>

<p>
  <label for="<?php echo $this->get_field_id('setting_image'); ?>">画像</label><br>
  <?php
      $show_p = '';
      $show_img = '';
      if ( empty( $dest_image ) ) {
        $show_img = ' style="display: none;" ';
     } else {
        $show_p = ' style="display: none;" ';
      }
  ?>
  <p class="fixed-image-text" <?php echo $show_p; ?>>画像が未選択です</p>
  <p><img class="fixed-image-view" src="<?php echo $dest_image; ?>" width="260" <?php echo $show_img; ?>></p>
  <input class="fixed-image-url" id="<?php echo $this->get_field_id('setting_image'); ?>" name="<?php echo $this->get_field_name('setting_image'); ?>" type="text" value="<?php echo $dest_image; ?>">
  <button type="button" class="fixed-select-image">画像を選択</button>
  <button type="button" class="fixed-delete-image" <?php echo $show_img; ?>>画像を削除</button>
</p>
<p>
  <label for="<?php echo $this->get_field_id('setting_url'); ?>">キャストURL</label><br>
  <input id="<?php echo $this->get_field_id('setting_url'); ?>" name="<?php echo $this->get_field_name('setting_url'); ?>" type="text" value="<?php echo $dest_url; ?>">
</p>
<script>
  jQuery(document).ready(function($) {
    var frame;
    const placeholder = jQuery('.fixed-image-text');
    const imageUrl = jQuery('.fixed-image-url');
    const imageView = jQuery('.fixed-image-view');
    const deleteImage = jQuery('.fixed-delete-image');
    jQuery('.fixed-select-image').on('click', function(e){
      e.preventDefault();
      if ( frame ) {
        frame.open();
        return;
      }
      frame = wp.media({
        title: '画像を選択',
        library: {
          type: 'image'
        },
        button: {
          text: '画像を追加する'
        },
        multiple: false
      });
      frame.on('select', function(){
        var images = frame.state().get('selection');
        images.each(function(file) {
          placeholder.css('display', 'none');
          imageUrl.val(file.toJSON().url);
          imageView.attr('src', file.toJSON().url).css('display', 'block');
          deleteImage.css('display', 'inline-block');
        });
        imageUrl.trigger('change');
      });
      frame.open();
    });
    jQuery('.fixed-delete-image').off().on('click', function(e){
      e.preventDefault();
      imageUrl.val('');
      imageView.css('display', 'none');
      deleteImage.css('display', 'none');
      imageUrl.trigger('change');
    });
  });
</script>

<?php } public function update($new_instance, $old_instance) { $instance = array(); $instance['setting_rank'] = (!empty($new_instance['setting_rank'])) ? strip_tags($new_instance['setting_rank']) : ""; $instance['setting_name'] = (!empty($new_instance['setting_name'])) ? strip_tags($new_instance['setting_name']) : ""; $instance['setting_image'] = (!empty($new_instance['setting_image'])) ? strip_tags($new_instance['setting_image']) : ""; $instance['setting_url'] = (!empty($new_instance['setting_url'])) ? strip_tags($new_instance['setting_url']) : ""; return $instance; } } add_action( 'widgets_init', function(){ register_widget('FixedWidgetItem'); } );