我正在努力从头开发我的第一个wordpress主题。它包括一个小部件，它基本上应该在相应的侧边栏中显示一个视频，一旦它在视野中就开始播放。我使用jquery.inview.js来检查视频是否在视频中。小部件应该为视频链接提供一些选项。我想这远非最佳实践和干净的代码，但是在这里可以获得任何帮助：
我在第一次添加小部件时遇到undefined index错误，对于这两个复选框。它在第一次保存后消失了。我在这里想念的是什么？
如何实现<?php checked( $checked, $current, $echo ); ?>以正确显示复选框状态。这是一个非常普遍的问题，但我被困在这里。
最后，我想从媒体库中抓取视频，并希望知道最佳方法。我试图在wordpress reference中实现这个例子，但我在这里也有点迷失。
非常感谢，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');
}
});
答案 0 :(得分：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>