Wordpressのウィジェットdev - 未定義のインデックスやその他の問題

Question

私は最初から自分の最初のWordPressのテーマを開発しようとしています。これにはウィジェットが含まれています。ウィジェットは基本的にはサイドバーに表示されているビデオを表示してすぐに再生を開始します。私はjquery.inview.jsを使ってビデオが見られているかどうかを確認しています。ウィジェットは、ビデオリンクにいくつかのオプションを提供する必要があります。私はそれがはるかにベストプラクティスときれいなコードからだと思いますが、任意の助けはここに感謝されています

1. 私はウィジェットを最初に追加したとき、私は2つのチェックボックスのために、undefined indexエラーを取得しています。それは初めて保存した後に消えてしまいます。私はここで何が欠けていますか？

2. <?php checked($checked, $current, $echo); ?>を実装して、チェックボックスの状態を正しく表示するにはどうすればよいですか。これは非常に一般的な質問ですが、私はここで立ち往生しています。

3. 最後に、メディアライブラリからビデオを取得したいと思います。これを行うには、最良の方法を知りたいと思います。私はの例を実装しようとしましたが、ここでも少し失われています。

多くの感謝を、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

あなたのコード

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