javascript - 流YouTube视频WordPress小部件

Question

嗨，我正在尝试制作一个自定义的wordpress小部件，允许用户输入视频的标题和网址，然后在前端的 bootstrap 模式中显示该视频。

我遇到的问题是，当模态窗口关闭时关闭视频，我已经使用了这部分javascript来删除source属性，并在模态打开时替换了它(无论如何，这就是我的计划)。如果您将视频的网址粘贴到src =“youtube video”中，则该方法有效

但我想使用一个变量，以便用户可以更改url，但它只输出scipt()而不是url。我的plugin.php看起来像这样。我仍然在学习任何帮助，因此非常感谢，但我可能会错过一些愚蠢的东西。

 <?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
parent::__construct(
// Base ID of your widget
'wpb_widget', 

// Widget name will appear in UI
__('Zeezevents Videos', 'wpb_widget_domain'),

// Widget description
array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
);
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {
$videourl =  apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
echo $videourl;
// This is where you run the code and display the output  
json_encode($videourl);
echo __( '<!-- Button trigger modal -->
<a class="btn btn-default" data-toggle="modal" data-target="#myModal" id="link">
  Watch Video
</a>

<script type = "text/javascript">


  jQuery("#link").click(function () {

        var src = " <?php echo ( $videourl ); ?> "

        jQuery("#myModal iframe").attr("src", src);
    });
</script>', 'wpb_widget_domain' );
echo $args['after_widget'];
}

// Widget Backend
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];

}
else {
$title = __( 'Videos', 'wpb_widget_domain' );

}
if ( isset( $instance[ 'videourl' ] ) ){
        $videourl = $instance[ 'videourl' ];
       }
       else {  $videourl = __( 'Videos', 'wpb_widget_domain' );}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> 
<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
<label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
</p>
<?php 
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

/* Stop Adding Functions Below this Line */
?>

模态是这样的

       <!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Egypt 2 Africa 2013</h4>
      </div>
      <div class="modal-body">
       <iframe width="560" height="315" src="<?php echo ($videourl); />" frameborder="0" allowfullscreen></iframe>
      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <script type="text/javascript">

    jQuery('#myModal').on('hidden.bs.modal', 
    function () {
    jQuery('#myModal iframe').removeAttr('src');  

})

</script >

Answer 1

我想通了!! =)我从回显中删除了jquery，现在可以使用了。如您所知，我是新手，但决心学习编程。我的下一步是从用户输入的网址末尾提取视频ID，以嵌入视频。谁能指导我找到解释过程的优秀教程？感谢您的任何评论。

编辑:按照建议，我编辑的代码

<?php
/*
Plugin Name: Site Plugin for Zeezevents.co.uk
Description: Site specific code changes for Zeezevents.co.uk
*/
/* Start Adding Functions Below this Line */
// Creating the widget
class wpb_widget extends WP_Widget {

function __construct() {
    parent::__construct(
        // Base ID of your widget
        'wpb_widget', 

        // Widget name will appear in UI
        __('Zeezevents Videos', 'wpb_widget_domain'),

        // Widget description
        array( 'description' => __( 'play Youtube videos widget', 'wpb_widget_domain' ), )
        );
}

// Creating widget front-end
// This is where the action happens
public function widget( $args, $instance ) {

$videourl =  apply_filters( 'video_url', $instance['videourl'] );
$title = apply_filters( 'widget_title', $instance['title'] );
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];



// This is where you run the code and display the output  

echo __( '<div class="container-fluid"><!-- Button trigger modal -->
<a class="btn" data-toggle="modal" data-target="#myModal" id="link">
<img src="http://zeezevents.co.uk/Images/egypt2africa.jpg" class="img-thumbnail"/>
</a>

</div>', 'videourl' );
  ?>


<script type = "text/javascript">


  jQuery("#link").click(function () {

        var src = "<?php echo $videourl; ?>";

        jQuery("#myModal iframe").attr("src", src);
    });
</script>

 <?php
echo $args['after_widget'] ;

}

// Widget Backend
public function form( $instance ) {
    if ( isset( $instance[ 'title' ] ) ) {
    $title = $instance[ 'title' ];

    }
    else {
    $title = __( 'Videos', 'wpb_widget_domain' );

    }
    if ( isset( $instance[ 'videourl' ] ) ){
            $videourl = $instance[ 'videourl' ];
           }
           else {  $videourl = __( 'Videos', 'wpb_widget_domain' );
           }
    // Widget admin form
    ?>
    <p>
    <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
    <label for="<?php echo $this->get_field_id( 'videourl' ); ?>"><?php _e( 'URL:' ); ?></label>
    <input class="widefat" id="<?php echo $this->get_field_id( 'videourl' ); ?>" name="<?php echo $this->get_field_name( 'videourl' ); ?>" type="text" value="<?php echo esc_attr( $videourl ); ?>" />
    </p>
    <?php
}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';

$instance['videourl'] = ( ! empty( $new_instance['videourl'] ) ) ? strip_tags( $new_instance['videourl'] ) : '';
return $instance;
}
} // Class wpb_widget ends here

// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

/* Stop Adding Functions Below this Line */
?>

从技术上讲，它可能并不正确，并且有点困惑，但是可以。