如何在YouTube主页上自动播放WordPress视频
如何在YouTube主页上自动播放WordPress视频
提问于 2013-11-23 03:11:29
我需要在我的子主题(functions.php)中添加一个操作。
我需要它来激活和启动一个YouTube视频，并使它自动播放时，用户打开主页上的网站。
经过大量的研究，我确信我需要使用(函数引用/wp队列脚本)
*
现在，我的(header.php)文件中有javascript (如下所示)，因此它将自动加载和播放视频。
当然，这并不好，因为每次有人打开它的时候，它都会在每一个页面上播放。
这是我的测试平台：http://tonystates.com/
注意视频是如何自动加载和播放的，这正是我们想要发生的，但只适用于主页。
。。
下面是我的javascript自动打开YouTube视频和它的工作.*现在它在(header.php)文件中。
(*但这是我们不能在header.php文件中使用的代码，因为它在站点的每个页面上播放视频))。
$(document).ready(function() {
$.fancybox.open({
type: 'iframe',
href: 'http://www.youtube.com/embed/6muHD6bdDYQ?rel=0&border=&autoplay=1',
width: '70%',
height: '70%'})
$('.various').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});下面是我的母主题functions.php代码供参考。
<?php
/**
* Twenty Twelve functions and definitions
*
* Sets up the theme and provides some helper functions, which are used
* in the theme as custom template tags. Others are attached to action and
* filter hooks in WordPress to change core functionality.
*
* When using a child theme (see http://codex.wordpress.org/Theme_Development and
* http://codex.wordpress.org/Child_Themes), you can override certain functions
* (those wrapped in a function_exists() call) by defining them first in your child theme's
* functions.php file. The child theme's functions.php file is included before the parent
* theme's file, so the child theme functions would be used.
*
* Functions that are not pluggable (not wrapped in function_exists()) are instead attached
* to a filter or action hook.
*
* For more information on hooks, actions, and filters, @link http://codex.wordpress.org/Plugin_API
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
// Set up the content width value based on the theme's design and stylesheet.
if ( ! isset( $content_width ) )
$content_width = 625;
/**
* Twenty Twelve setup.
*
* Sets up theme defaults and registers the various WordPress features that
* Twenty Twelve supports.
*
* @uses load_theme_textdomain() For translation/localization support.
* @uses add_editor_style() To add a Visual Editor stylesheet.
* @uses add_theme_support() To add support for post thumbnails, automatic feed links,
* custom background, and post formats.
* @uses register_nav_menu() To add support for navigation menus.
* @uses set_post_thumbnail_size() To set a custom post thumbnail size.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_setup() {
/*
* Makes Twenty Twelve available for translation.
*
* Translations can be added to the /languages/ directory.
* If you're building a theme based on Twenty Twelve, use a find and replace
* to change 'twentytwelve' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'twentytwelve', get_template_directory() . '/languages' );
// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();
// Adds RSS feed links to <head> for posts and comments.
add_theme_support( 'automatic-feed-links' );
// This theme supports a variety of post formats.
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );
// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );
/*
* This theme supports custom background color and image,
* and here we also set up the default background color.
*/
add_theme_support( 'custom-background', array(
'default-color' => 'e6e6e6',
) );
// This theme uses a custom image size for featured images, displayed on "standard" posts.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop
}
add_action( 'after_setup_theme', 'twentytwelve_setup' );
/**
* Add support for a custom header image.
*/
require( get_template_directory() . '/inc/custom-header.php' );
/**
* Return the Google font stylesheet URL if available.
*
* The use of Open Sans by default is localized. For languages that use
* characters not supported by the font, the font can be disabled.
*
* @since Twenty Twelve 1.2
*
* @return string Font stylesheet or empty string if disabled.
*/
function twentytwelve_get_font_url() {
$font_url = '';
/* translators: If there are characters in your language that are not supported
* by Open Sans, translate this to 'off'. Do not translate into your own language.
*/
if ( 'off' !== _x( 'on', 'Open Sans font: on or off', 'twentytwelve' ) ) {
$subsets = 'latin,latin-ext';
/* translators: To add an additional Open Sans character subset specific to your language,
* translate this to 'greek', 'cyrillic' or 'vietnamese'. Do not translate into your own language.
*/
$subset = _x( 'no-subset', 'Open Sans font: add new subset (greek, cyrillic, vietnamese)', 'twentytwelve' );
if ( 'cyrillic' == $subset )
$subsets .= ',cyrillic,cyrillic-ext';
elseif ( 'greek' == $subset )
$subsets .= ',greek,greek-ext';
elseif ( 'vietnamese' == $subset )
$subsets .= ',vietnamese';
$protocol = is_ssl() ? 'https' : 'http';
$query_args = array(
'family' => 'Open+Sans:400italic,700italic,400,700',
'subset' => $subsets,
);
$font_url = add_query_arg( $query_args, "$protocol://fonts.googleapis.com/css" );
}
return $font_url;
}
/**
* Enqueue scripts and styles for front-end.
*
* @since Twenty Twelve 1.0
*
* @return void
*/
function twentytwelve_scripts_styles() {
global $wp_styles;
/*
* Adds JavaScript to pages with the comment form to support
* sites with threaded comments (when in use).
*/
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' );
// Adds JavaScript for handling the navigation menu hide-and-show behavior.
wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
$font_url = twentytwelve_get_font_url();
if ( ! empty( $font_url ) )
wp_enqueue_style( 'twentytwelve-fonts', esc_url_raw( $font_url ), array(), null );
// Loads our main stylesheet.
wp_enqueue_style( 'twentytwelve-style', get_stylesheet_uri() );
// Loads the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentytwelve-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '20121010' );
$wp_styles->add_data( 'twentytwelve-ie', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentytwelve_scripts_styles' );
/**
* Filter TinyMCE CSS path to include Google Fonts.
*
* Adds additional stylesheets to the TinyMCE editor if needed.
*
* @uses twentytwelve_get_font_url() To get the Google Font stylesheet URL.
*
* @since Twenty Twelve 1.2
*
* @param string $mce_css CSS path to load in TinyMCE.
* @return string Filtered CSS path.
*/
function twentytwelve_mce_css( $mce_css ) {
$font_url = twentytwelve_get_font_url();
if ( empty( $font_url ) )
return $mce_css;
if ( ! empty( $mce_css ) )
$mce_css .= ',';
$mce_css .= esc_url_raw( str_replace( ',', '%2C', $font_url ) );
return $mce_css;
}
add_filter( 'mce_css', 'twentytwelve_mce_css' );
/**
* Filter the page title.
*
* Creates a nicely formatted and more specific title element text
* for output in head of document, based on current view.
*
* @since Twenty Twelve 1.0
*
* @param string $title Default title text for current view.
* @param string $sep Optional separator.
* @return string Filtered title.
*/
function twentytwelve_wp_title( $title, $sep ) {
global $paged, $page;
if ( is_feed() )
return $title;
// Add the site name.
$title .= get_bloginfo( 'name' );
// Add the site description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
$title = "$title $sep $site_description";
// Add a page number if necessary.
if ( $paged >= 2 || $page >= 2 )
$title = "$title $sep " . sprintf( __( 'Page %s', 'twentytwelve' ), max( $paged, $page ) );
return $title;
}
add_filter( 'wp_title', 'twentytwelve_wp_title', 10, 2 );
/**
* Filter the page menu arguments.
*
* Makes our wp_nav_menu() fallback -- wp_page_menu() -- show a home link.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_page_menu_args( $args ) {
if ( ! isset( $args['show_home'] ) )
$args['show_home'] = true;
return $args;
}
add_filter( 'wp_page_menu_args', 'twentytwelve_page_menu_args' );
/**
* Register sidebars.
*
* Registers our main widget area and the front page widget areas.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_widgets_init() {
register_sidebar( array(
'name' => __( 'Main Sidebar', 'twentytwelve' ),
'id' => 'sidebar-1',
'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'First Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-2',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
register_sidebar( array(
'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),
'id' => 'sidebar-3',
'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'twentytwelve_widgets_init' );
if ( ! function_exists( 'twentytwelve_content_nav' ) ) :
/**
* Displays navigation to next/previous pages when applicable.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_content_nav( $html_id ) {
global $wp_query;
$html_id = esc_attr( $html_id );
if ( $wp_query->max_num_pages > 1 ) : ?>
<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentytwelve' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentytwelve' ) ); ?></div>
</nav><!-- #<?php echo $html_id; ?> .navigation -->
<?php endif;
}
endif;
if ( ! function_exists( 'twentytwelve_comment' ) ) :
/**
* Template for comments and pingbacks.
*
* To override this walker in a child theme without modifying the comments template
* simply create your own twentytwelve_comment(), and that function will be used instead.
*
* Used as a callback by wp_list_comments() for displaying the comments.
*
* @since Twenty Twelve 1.0
*
* @return void
*/
function twentytwelve_comment( $comment, $args, $depth ) {
$GLOBALS['comment'] = $comment;
switch ( $comment->comment_type ) :
case 'pingback' :
case 'trackback' :
// Display trackbacks differently than normal comments.
?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
<p><?php _e( 'Pingback:', 'twentytwelve' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?></p>
<?php
break;
default :
// Proceed with normal comments.
global $post;
?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
<article id="comment-<?php comment_ID(); ?>" class="comment">
<header class="comment-meta comment-author vcard">
<?php
echo get_avatar( $comment, 44 );
printf( '<cite><b class="fn">%1$s</b> %2$s</cite>',
get_comment_author_link(),
// If current post author is also comment author, make it known visually.
( $comment->user_id === $post->post_author ) ? '<span>' . __( 'Post author', 'twentytwelve' ) . '</span>' : ''
);
printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
esc_url( get_comment_link( $comment->comment_ID ) ),
get_comment_time( 'c' ),
/* translators: 1: date, 2: time */
sprintf( __( '%1$s at %2$s', 'twentytwelve' ), get_comment_date(), get_comment_time() )
);
?>
</header><!-- .comment-meta -->
<?php if ( '0' == $comment->comment_approved ) : ?>
<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'twentytwelve' ); ?></p>
<?php endif; ?>
<section class="comment-content comment">
<?php comment_text(); ?>
<?php edit_comment_link( __( 'Edit', 'twentytwelve' ), '<p class="edit-link">', '</p>' ); ?>
</section><!-- .comment-content -->
<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'twentytwelve' ), 'after' => ' <span>↓</span>', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div><!-- .reply -->
</article><!-- #comment-## -->
<?php
break;
endswitch; // end comment_type check
}
endif;
if ( ! function_exists( 'twentytwelve_entry_meta' ) ) :
/**
* Set up post entry meta.
*
* Prints HTML with meta information for current post: categories, tags, permalink, author, and date.
*
* Create your own twentytwelve_entry_meta() to override in a child theme.
*
* @since Twenty Twelve 1.0
*
* @return void
*/
function twentytwelve_entry_meta() {
// Translators: used between list items, there is a space after the comma.
$categories_list = get_the_category_list( __( ', ', 'twentytwelve' ) );
// Translators: used between list items, there is a space after the comma.
$tag_list = get_the_tag_list( '', __( ', ', 'twentytwelve' ) );
$date = sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><time class="entry-date" datetime="%3$s">%4$s</time></a>',
esc_url( get_permalink() ),
esc_attr( get_the_time() ),
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() )
);
$author = sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s" rel="author">%3$s</a></span>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'twentytwelve' ), get_the_author() ) ),
get_the_author()
);
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author's name.
if ( $tag_list ) {
$utility_text = __( 'This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
} elseif ( $categories_list ) {
$utility_text = __( 'This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
} else {
$utility_text = __( 'This entry was posted on %3$s<span class="by-author"> by %4$s</span>.', 'twentytwelve' );
}
printf(
$utility_text,
$categories_list,
$tag_list,
$date,
$author
);
}
endif;
/**
* Extend the default WordPress body classes.
*
* Extends the default WordPress body class to denote:
* 1. Using a full-width layout, when no active widgets in the sidebar
* or full-width template.
* 2. Front Page template: thumbnail in use and number of sidebars for
* widget areas.
* 3. White or empty background color to change the layout and spacing.
* 4. Custom fonts enabled.
* 5. Single or multiple authors.
*
* @since Twenty Twelve 1.0
*
* @param array $classes Existing class values.
* @return array Filtered class values.
*/
function twentytwelve_body_class( $classes ) {
$background_color = get_background_color();
$background_image = get_background_image();
if ( ! is_active_sidebar( 'sidebar-1' ) || is_page_template( 'page-templates/full-width.php' ) )
$classes[] = 'full-width';
if ( is_page_template( 'page-templates/front-page.php' ) ) {
$classes[] = 'template-front-page';
if ( has_post_thumbnail() )
$classes[] = 'has-post-thumbnail';
if ( is_active_sidebar( 'sidebar-2' ) && is_active_sidebar( 'sidebar-3' ) )
$classes[] = 'two-sidebars';
}
if ( empty( $background_image ) ) {
if ( empty( $background_color ) )
$classes[] = 'custom-background-empty';
elseif ( in_array( $background_color, array( 'fff', 'ffffff' ) ) )
$classes[] = 'custom-background-white';
}
// Enable custom font class only if the font CSS is queued to load.
if ( wp_style_is( 'twentytwelve-fonts', 'queue' ) )
$classes[] = 'custom-font-enabled';
if ( ! is_multi_author() )
$classes[] = 'single-author';
return $classes;
}
add_filter( 'body_class', 'twentytwelve_body_class' );
/**
* Adjust content width in certain contexts.
*
* Adjusts content_width value for full-width and single image attachment
* templates, and when there are no active widgets in the sidebar.
*
* @since Twenty Twelve 1.0
*
* @return void
*/
function twentytwelve_content_width() {
if ( is_page_template( 'page-templates/full-width.php' ) || is_attachment() || ! is_active_sidebar( 'sidebar-1' ) ) {
global $content_width;
$content_width = 960;
}
}
add_action( 'template_redirect', 'twentytwelve_content_width' );
/**
* Register postMessage support.
*
* Add postMessage support for site title and description for the Customizer.
*
* @since Twenty Twelve 1.0
*
* @param WP_Customize_Manager $wp_customize Customizer object.
* @return void
*/
function twentytwelve_customize_register( $wp_customize ) {
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
}
add_action( 'customize_register', 'twentytwelve_customize_register' );
/**
* Enqueue Javascript postMessage handlers for the Customizer.
*
* Binds JS handlers to make the Customizer preview reload changes asynchronously.
*
* @since Twenty Twelve 1.0
*
* @return void
*/
function twentytwelve_customize_preview_js() {
wp_enqueue_script( 'twentytwelve-customizer', get_template_directory_uri() . '/js/theme-customizer.js', array( 'customize-preview' ), '20130301', true );
}
add_action( 'customize_preview_init', 'twentytwelve_customize_preview_js' );下面是我的子主题functions.php代码。
(*)我认为我需要使用(Function / where脚本)添加一个操作，使其调用JavaScript并仅在主页上加载))。
<?php
/**
* Twenty Twelve child theme functions file
*
*/
function tsyoutube_autoplay_script() {
if(is_front_page()){
wp_register_script( 'fancybox_auto_open', get_stylesheet_directory_uri().'/js/fancybox_auto_open.js', array());
wp_enqueue_script( 'fancybox_auto_open' );
}
}
add_action( 'wp_enqueue_scripts', 'tsyoutube_autoplay_script' );以下是我已经研究了几个小时来做我需要做的事情的信息，但它是模糊的，我不知道如何使它工作。
。。
从WordPress代码索引页:/wp脚本，
-Description
根据脚本依赖项在正确的时间将脚本文件链接到生成的页面，如果脚本尚未包含，并且所有依赖项都已注册。您可以将脚本与以前使用wp_register_script()函数注册的句柄链接起来，也可以为该函数提供链接脚本所需的所有参数。
上面的是将JavaScript链接到WordPress生成的页面的推荐方法.
。谢谢大家的关注:)我真的很感谢大家对我的帮助:)最好的问候&谢谢你，托尼。
编辑/增列如下. 11-24-13
谢谢你的帮助，我不能把我的评论放在评论框里吗？是不是太久了？
我上传了我的脚本fancybox_auto_open.js fancybox_auto_open.js
如下所示：
$(document).ready(function() {
$.fancybox.open({
type:'iframe',
href: 'http://www.youtube.com/embed/6muHD6bdDYQ?rel=0&border=&autoplay=1',
width: '70%',
height:'70%'})
$('.various').fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});并将我的functions.php代码更改如下：
function tsyoutube_autoplay_script() {
if(is_front_page()){
wp_register_script( 'fancybox_auto_open', get_stylesheet_directory_uri().'/js/fancybox_auto_open.js', array());
wp_enqueue_script( 'fancybox_auto_open' );
}
}
add_action( 'wp_enqueue_scripts', 'tsyoutube_autoplay_script' );再次感谢您的帮助:)
诚挚的问候,
托尼
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-11-23 04:35:00
我已根据你的初步答复更新了我的答复。
首先，/plugins文件夹应该为正确格式化的Wordpress插件保留。这个链接应该让您开始使用：Wordpress插件API。我不想进去，因为这有点切线。
因此，在本练习中，我将假装您的JS文件位于主题目录中的一个名为“js”的文件夹中。确保删除JS文件中的开始和关闭脚本标记。
然后在您的functions.php中复制/粘贴以下内容：
function abc_setup_scripts() {
if(is_front_page()){
wp_register_script( 'fancybox_auto_open', get_stylesheet_directory_uri().'/js/fancybox.auto.open.js', array());
wp_enqueue_script( 'fancybox_auto_open' );
}
}
add_action( 'wp_enqueue_scripts', 'abc_setup_scripts' );第一部分：
function abc_setup_scripts() {创建一个新函数。重要的是确保您的函数的名称不会与第三方插件中的另一个函数发生冲突，所以我们在开头添加了一些独特的东西--在本例中是'abc_‘。例如，如果您的项目名为“托尼的窗口清理”，您可以使用“twc_”作为您自己编写的所有函数的前缀。
然后，我们检查是否在您指定为Wordpress头版的页面上，在“设置”>“使用这一行阅读”下：
if(is_front_page()){如果您的首页不是这样设置的，那么函数就无法运行。理想情况下，您应该这样设置它，因为Wordpress就是这样设计的。
然后，假设我们在首页上，我们的函数将运行，并通知Wordpress我们想要加载到HTML头部的脚本。注意，我将'fancybox.auto.open‘改为’fancybox_auto‘。最好使用下划线来避免奇怪的bug。
它的意思是：
get_stylesheet_directory_uri()是一个方便的Wordpress函数，它输出到活动主题文件夹的目录的路径。如果您最终将脚本移动到插件文件夹中，则需要更改这一行。请参阅下面的页面，说明要使用什么：插件URL
看看你是怎么做的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20158057
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号