使用ajax的youtube框架的ajax加载,其中youtube id是文本输入

时间:2012-12-22 21:32:35

标签: ajax wordpress jquery youtube

我在wordpress主题中为自定义帖子类型创建了元数据。我的元字段包含文本类型。此文本类型的输入值是youtube video id。 Youtube视频预览仅在发布该帖子后才会更新。如何更新视频网址,并且无需发布该帖子即可立即查看预览。

add_action('save_post', 'my_metabox_save');
add_action( 'add_meta_boxes', 'my_metabox' );

function my_metabox () {

add_meta_box('my_metabox_id', "my metabox", 'my_metabox_cb', 'custome-post', 'normal', 'high');

}


##### MY metabox callback ########
function my_metabox_cb () {

wp_nonce_field( plugin_basename(__FILE__), 'myplugin_noncename' );


?>

//////////////////////////////////////////////////////////////////////////

<div class="my-video-id>
<h2>Enter Youtube Video ID</h2>

<input type="text" style="width: 100%;" name="my_youtube_id" value="<?php echo get_post_meta($_GET['post'], 'my_youtube_id', true); ?>" />

<?php if (get_post_meta($_GET['post'], 'my_youtube_id', true) != "") : ?>

<h2>youtube video box</h2>

<object width="600" height="400"><param name="movie" value="http://www.youtube.com/v/a6GCy_lKYo8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/<?php echo get_post_meta($_GET['post'], 'my_youtube_id', true); ?>?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed></object>

</div>

////////////////////////////////////////////////////////////////////////////////////////////////

}

function my_metabox_save ($post_id) {

 if ( !wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename(__FILE__) )) {
    return $post_id;
  }

  if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
    return $post_id;

  if ( 'page' == $_POST['post_type'] ) {
    if ( !current_user_can( 'edit_page', $post_id ) )
      return $post_id;
  } else {
    if ( !current_user_can( 'edit_post', $post_id ) )
      return $post_id;
  }

 update_post_meta($post_id, 'my_youtube_id', $_POST['my_youtube_id'],true);

1 个答案:

答案 0 :(得分:1)

我第一次误读了这个问题。要解决它,需要jQuery:从输入框中获取值并修改嵌入式视频div的HTML。一个例子:

add_action( 'add_meta_boxes', 'my_metabox' );

function my_metabox () {
    add_meta_box(
        'my_metabox_id', 
        "my metabox", 
        'my_metabox_cb', 
        'custome-post', 
        'normal', 
        'high'
    );
}

function my_metabox_cb () {
    ?>
        <div class="my-video-id">
            <h2>Enter Youtube Video ID</h2>
            <input type="text" style="width: 100%;" id="yt-id" value="" />
            <div id="yt-metabox"></div>
            <button id="yt-refresh">Refresh</button>
        </div>

        <script type="text/javascript">
        jQuery(document).ready(function($) {   
            $("#yt-refresh").click(function (e) {
                e.preventDefault();
                var yt_id = $('#yt-id').val();
                $('#yt-metabox').html('<object width="600" height="400"><param name="movie" value="http://www.youtube.com/v/a6GCy_lKYo8?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + yt_id + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="300"></embed></object>');
            });
        });
        </script>
    <?php
}