Widget Wordpress dev - undefined index et d'autres problèmes

Question

Je suis en train de développer mon premier thème wordpress à partir de zéro. Il comprend un widget, qui devrait essentiellement afficher une vidéo dans la barre latérale correspondante qui commence à jouer dès qu'il est en vue. J'utilise jquery.inview.js pour vérifier si la vidéo est en cours. Le widget doit fournir certaines options au lien vidéo. Je suppose qu'il est loin d'être les meilleures pratiques et le code propre mais toute aide est appréciée ici:

1. Je reçois une erreur undefined index, quand j'ajoute le widget pour la première fois, pour les deux cases à cocher. Il est parti après l'avoir sauvé la première fois. Qu'est-ce que j'oublie ici?

2. Comment implémenter <?php checked($checked, $current, $echo); ?> pour afficher correctement l'état de la case à cocher. C'est une question très générale mais je suis coincé ici.

3. Enfin, je voudrais saisir la vidéo de la médiathèque et je voudrais savoir la meilleure façon de le faire. J'ai essayé de mettre en œuvre l'exemple dans le wordpress reference mais je suis un peu perdu ici aussi.

Un grand merci, C.

PHP

<?php 
class WS_Media_Widget extends WP_Widget { 

    /** 
    * Register widget with WordPress. 
    */ 
    function __construct() { 
     parent::__construct(
      'ws_media_widget', 
      esc_html__('Featured Media', 'text_domain'), 
      array('description' => esc_html__('Mediaplay with autoplay and overlay', 'text_domain'),) 
     ); 
    } 

    /** 
    * Front-end display of widget. 
    * 
    * @see WP_Widget::widget() 
    * 
    * @param array $args  Widget arguments. 
    * @param array $instance Saved values from database. 
    */ 
    public function widget($args, $instance) { 
     extract($args); 

     $media = $instance['media']; 
     $poster = $instance['poster']; 
     $link = $instance['link']; 
     $title = $instance['title']; 
     $intro = $instance['intro']; 
     $loop = $instance['loop']; 
     $autoplay = $instance['autoplay']; 

     echo $before_widget; 
    ?> 
     <video id="hero-video" class="video" 
      <?php 
       if ($autoplay) echo "autoplay "; 
       if ($loop) echo "loop "; 
     ?>> 
      <source src="<?php echo $media ?>" type="video/mp4" /> 
      <!-- <source src="media/demo.ogv" type="video/ogg" /> 
      <source src="media/demo.webm" type="video/webm" /> --> 
     </video> 
     <div id="video-overlay"> 
      <h2><?php echo $title ?></h2> 
      <div class="video-intro"> 
       <p><?php echo $intro ?></p> 
      </div> 
      <div class="video-call"> 
       <a href="<?php echo $link ?>">Episode starten</a> 
      </div> 
     </div> 
     <div id="scrollnext" class="animated infinite fadeIn"> 
       <a href="#latest-posts"></a> 
     </div> 
    <?php 
     echo $after_widget; 
    } 

    /** 
    * Back-end widget form. 
    * 
    * @see WP_Widget::form() 
    * 
    * @param array $instance Previously saved values from database. 
    */ 
    public function form($instance) { 

     $media = ! empty($instance['media']) ? $instance['media'] : esc_html__('Media', 'text_domain'); 
     $poster = ! empty($instance['poster']) ? $instance['poster'] : esc_html__('Alternatve Poster', 'text_domain'); 
     $link = ! empty($instance['link']) ? $instance['link'] : esc_html__('Links to', 'text_domain'); 
     $title = ! empty($instance['title']) ? $instance['title'] : esc_html__('New title', 'text_domain'); 
     $intro = ! empty($instance['intro']) ? $instance['intro'] : esc_html__('Intro overlay text', 'text_domain'); 
     $loop = $instance[ 'loop' ] ? 'true' : 'false'; 
     $autoplay = $instance[ 'autoplay' ] ? 'true' : 'false'; 
     echo $loop. $autoplay; 
     ?> 
     <p> 
      <label for="<?php echo esc_attr($this->get_field_id('Media')); ?>"><?php esc_attr_e('Select video', 'text_domain'); ?></label> 
      <input class="widefat" id="<?php echo esc_attr($this->get_field_id('media')); ?>" name="<?php echo esc_attr($this->get_field_name('media')); ?>" type="text" value="<?php echo esc_attr($media); ?>"> 
     </p> 
     <p> 
      <label for="<?php echo esc_attr($this->get_field_id('Poster')); ?>"><?php esc_attr_e('Select poster', 'text_domain'); ?></label> 
      <input class="widefat" id="<?php echo esc_attr($this->get_field_id('poster')); ?>" name="<?php echo esc_attr($this->get_field_name('poster')); ?>" type="text" value="<?php echo esc_attr($poster); ?>"> 
     </p> 
     <p> 
      <label for="<?php echo esc_attr($this->get_field_id('Link')); ?>"><?php esc_attr_e('Link to', 'text_domain'); ?></label> 
      <input class="widefat" id="<?php echo esc_attr($this->get_field_id('link')); ?>" name="<?php echo esc_attr($this->get_field_name('link')); ?>" type="text" value="<?php echo esc_attr($link); ?>"> 
     </p> 
     <p> 
      <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php esc_attr_e('Title:', 'text_domain'); ?></label> 
      <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>"> 
     </p> 
     <p> 
      <label for="<?php echo esc_attr($this->get_field_id('intro')); ?>"><?php esc_attr_e('Intro text:', 'text_domain'); ?></label> 
      <textarea class="widefat" id="<?php echo esc_attr($this->get_field_id('intro')); ?>" name="<?php echo esc_attr($this->get_field_name('intro')); ?>"><?php echo esc_attr($intro); ?></textarea> 
     </p> 
     <p> 
      <input id="<?php echo esc_attr($this->get_field_id('loop')); ?>" class="checkbox" name="<?php echo esc_attr($this->get_field_name('loop')); ?>" type="checkbox" value="1" <?php checked($instance[ 'loop' ], 'on'); ?> /> 
      <label for="<?php echo esc_attr($this->get_field_id('loop')); ?>"><?php esc_attr_e('Loop video', 'text_domain'); ?></label> 
     </p> 
     <p> 
      <input id="<?php echo esc_attr($this->get_field_id('autoplay')); ?>" class="checkbox" name="<?php echo esc_attr($this->get_field_name('autoplay')); ?>" type="checkbox" value="1" <?php checked($instance[ 'autoplay' ], 'on'); ?> /> 
      <label for="<?php echo esc_attr($this->get_field_id('autoplay')); ?>"><?php esc_attr_e('Autoplay video', 'text_domain'); ?></label> 
     </p> 

     <?php 
    } 

    /** 
    * Sanitize widget form values as they are saved. 
    * 
    * @see WP_Widget::update() 
    * 
    * @param array $new_instance Values just sent to be saved. 
    * @param array $old_instance Previously saved values from database. 
    * 
    * @return array Updated safe values to be saved. 
    */ 
    public function update($new_instance, $old_instance) { 
     $instance = array(); 

     $instance['media'] = (! empty($new_instance['media'])) ? strip_tags($new_instance['media']) : ''; 
     $instance['poster'] = (! empty($new_instance['poster'])) ? strip_tags($new_instance['poster']) : ''; 
     $instance['link'] = (! empty($new_instance['link'])) ? strip_tags($new_instance['link']) : ''; 
     $instance['title'] = (! empty($new_instance['title'])) ? strip_tags($new_instance['title']) : ''; 
     $instance['intro'] = (! empty($new_instance['intro'])) ? strip_tags($new_instance['intro']) : ''; 
     $instance['loop'] = $new_instance['loop']; 
     $instance['autoplay'] = $new_instance['autoplay']; 


     return $instance; 
    } 

} 

function register_ws_media_widget() { 
    register_widget('ws_media_widget'); 
} 
add_action('widgets_init', 'register_ws_media_widget'); 
?> 

JAVASCRIPT

/*CHECK IF VIDEOS IN VIEW */ 
$('video').on('inview', function(event, isInView) { 
    if (isInView && $("video").get(0).autoplay) { 
     console.log('is in view', event); 
     $('video').trigger('play'); 
    } else { 
     console.log('out if view', event); 
     $('video').trigger('pause'); 
    } 
}); 

Answer 1

Remplacez votre code

<p> 
     <input id="<?php echo esc_attr($this->get_field_id('loop')); ?>" class="checkbox" name="<?php echo esc_attr($this->get_field_name('loop')); ?>" type="checkbox" value="1" <?php checked($instance[ 'loop' ], '1'); ?> /> 
     <label for="<?php echo esc_attr($this->get_field_id('loop')); ?>"><?php esc_attr_e('Loop video', 'text_domain'); ?></label> 
    </p> 
    <p> 
     <input id="<?php echo esc_attr($this->get_field_id('autoplay')); ?>" class="checkbox" name="<?php echo esc_attr($this->get_field_name('autoplay')); ?>" type="checkbox" value="1" <?php checked($instance[ 'autoplay' ], '1'); ?> /> 
     <label for="<?php echo esc_attr($this->get_field_id('autoplay')); ?>"><?php esc_attr_e('Autoplay video', 'text_domain'); ?></label> 
    </p>