Ticket #38172: 38172.9.diff
File 38172.9.diff, 28.7 KB (added by , 7 years ago) |
---|
-
src/wp-content/themes/twentyfourteen/functions.php
434 434 $classes[] = 'group-blog'; 435 435 } 436 436 437 if ( get_header_image() ) {437 if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) { 438 438 $classes[] = 'header-image'; 439 439 } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) { 440 440 $classes[] = 'masthead-fixed'; -
src/wp-content/themes/twentyfourteen/header.php
32 32 33 33 <body <?php body_class(); ?>> 34 34 <div id="page" class="hfeed site"> 35 <?php if ( get_header_image() ) : ?> 35 <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?> 36 <div id="site-header"> 37 <?php the_custom_header(); ?> 38 </div> 39 <?php elseif ( get_header_image() ) : ?> 36 40 <div id="site-header"> 37 41 <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"> 38 42 <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"> -
src/wp-content/themes/twentyfourteen/inc/custom-header.php
40 40 'width' => 1260, 41 41 'height' => 240, 42 42 'flex-height' => true, 43 'video' => true, 43 44 'wp-head-callback' => 'twentyfourteen_header_style', 44 45 'admin-head-callback' => 'twentyfourteen_admin_header_style', 45 46 'admin-preview-callback' => 'twentyfourteen_admin_header_image', -
src/wp-content/themes/twentyfourteen/js/functions.js
103 103 104 104 if ( body.is( '.header-image' ) ) { 105 105 toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0; 106 mastheadOffset = $( '# masthead' ).offset().top- toolbarOffset;106 mastheadOffset = $( '#site-header' ).height() - toolbarOffset; 107 107 108 108 _window.on( 'scroll.twentyfourteen', function() { 109 109 if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) { … … 112 112 body.removeClass( 'masthead-fixed' ); 113 113 } 114 114 } ); 115 116 // Update masthead offset after a selective refresh. 117 if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) { 118 wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) { 119 mastheadOffset = $( '#site-header' ).height() - toolbarOffset; 120 } ); 121 } 115 122 } 116 123 } 117 124 -
src/wp-content/themes/twentyfourteen/style.css
88 88 video { 89 89 display: inline-block; 90 90 max-width: 100%; 91 height: auto; 91 92 } 92 93 93 94 html { … … 608 609 max-width: 100%; 609 610 } 610 611 612 #wp-custom-header iframe, 613 #wp-custom-header video { 614 margin-bottom: -8px; 615 } 616 611 617 p > embed, 612 618 p > iframe, 613 619 p > object, -
src/wp-content/themes/twentyseventeen/assets/css/ie8.css
37 37 38 38 /* Site Branding */ 39 39 40 .has-header-image .custom-header-image img, 41 .has-header-image .custom-header-image video { 42 left: 0; 43 top: 0; 44 } 45 40 46 .site-title { 41 47 font-weight: bolder; 42 48 } -
src/wp-content/themes/twentyseventeen/footer.php
14 14 15 15 ?> 16 16 17 </div><!-- #content -->17 </div><!-- #content --> 18 18 19 <footer id="colophon" class="site-footer" role="contentinfo">20 <div class="wrap">21 <?php22 get_template_part( 'template-parts/footer/footer', 'widgets' );19 <footer id="colophon" class="site-footer" role="contentinfo"> 20 <div class="wrap"> 21 <?php 22 get_template_part( 'template-parts/footer/footer', 'widgets' ); 23 23 24 if ( has_nav_menu( 'social' ) ) : ?>25 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">26 <?php27 wp_nav_menu( array(28 'theme_location' => 'social',29 'menu_class' => 'social-links-menu',30 'depth' => 1,31 'link_before' => '<span class="screen-reader-text">',32 'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),33 ) );34 ?>35 </nav><!-- .social-navigation -->36 <?php endif;24 if ( has_nav_menu( 'social' ) ) : ?> 25 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>"> 26 <?php 27 wp_nav_menu( array( 28 'theme_location' => 'social', 29 'menu_class' => 'social-links-menu', 30 'depth' => 1, 31 'link_before' => '<span class="screen-reader-text">', 32 'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ), 33 ) ); 34 ?> 35 </nav><!-- .social-navigation --> 36 <?php endif; 37 37 38 get_template_part( 'template-parts/footer/site', 'info' ); 39 ?> 40 </div><!-- .wrap --> 41 </footer><!-- #colophon --> 38 get_template_part( 'template-parts/footer/site', 'info' ); 39 ?> 40 </div><!-- .wrap --> 41 </footer><!-- #colophon --> 42 </div><!-- .site-content-contain --> 42 43 </div><!-- #page --> 43 44 <?php wp_footer(); ?> 44 45 -
src/wp-content/themes/twentyseventeen/header.php
49 49 endif; 50 50 ?> 51 51 52 <div id="content" class="site-content"> 52 <div class="site-content-contain"> 53 <div id="content" class="site-content"> -
src/wp-content/themes/twentyseventeen/inc/custom-header.php
39 39 'width' => 2000, 40 40 'height' => 1200, 41 41 'flex-height' => true, 42 'video' => true, 42 43 'wp-head-callback' => 'twentyseventeen_header_style', 43 44 ) ) ); 44 45 -
src/wp-content/themes/twentyseventeen/style.css
1288 1288 border-top: 1px solid #eee; 1289 1289 font-size: 16px; 1290 1290 font-size: 1rem; 1291 position: relative; 1291 1292 } 1292 1293 1293 1294 .navigation-top .wrap { … … 1529 1530 1530 1531 .site-branding { 1531 1532 padding: 1em 0; 1533 position: relative; 1532 1534 -webkit-transition: margin-bottom 0.2s; 1533 1535 transition: margin-bottom 0.2s; 1536 z-index: 3; 1534 1537 } 1535 1538 1536 1539 .site-branding a { … … 1623 1626 } 1624 1627 1625 1628 .custom-header-image { 1626 background-position: center center;1627 background-repeat: no-repeat;1628 -webkit-background-size: cover;1629 background-size: cover;1630 1629 bottom: 0; 1631 1630 left: 0; 1631 overflow: hidden; 1632 1632 position: absolute; 1633 1633 right: 0; 1634 1634 top: 0; 1635 width: 100%; 1635 1636 } 1636 1637 1637 1638 .custom-header-image:before { … … 1647 1648 left: 0; 1648 1649 position: absolute; 1649 1650 right: 0; 1651 z-index: 2; 1650 1652 } 1651 1653 1652 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { 1653 background-position: center bottom; 1654 .has-header-image .custom-header-image img, 1655 .has-header-image .custom-header-image video, 1656 .has-header-image .custom-header-image iframe { 1657 position: fixed; 1658 height: auto; 1659 left: 50%; 1660 max-width: 1000%; 1661 min-height: 100%; 1662 min-width: 100%; 1663 min-width: 100vw; /* vw prevents 1px gap on left that 100% has */ 1664 width: auto; 1665 top: 50%; 1666 -ms-transform: translateX(-50%) translateY(-50%); 1667 -moz-transform: translateX(-50%) translateY(-50%); 1668 -webkit-transform: translateX(-50%) translateY(-50%); 1669 transform: translateX(-50%) translateY(-50%); 1654 1670 } 1655 1671 1672 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img { 1673 bottom: 0; 1674 position: absolute; 1675 top: auto; 1676 -ms-transform: translateX(-50%) translateY(0); 1677 -moz-transform: translateX(-50%) translateY(0); 1678 -webkit-transform: translateX(-50%) translateY(0); 1679 transform: translateX(-50%) translateY(0); 1680 } 1681 1656 1682 body:not(.has-header-image) .custom-header-image { 1657 1683 padding: 5% 0; 1658 1684 } … … 1750 1776 ## Regular Content 1751 1777 --------------------------------------------------------------*/ 1752 1778 1779 .site-content-contain { 1780 background-color: #fff; 1781 position: relative; 1782 } 1783 1753 1784 .site-content { 1754 1785 padding: 2.5em 0 0; 1755 1786 } … … 2615 2646 # Media 2616 2647 --------------------------------------------------------------*/ 2617 2648 2618 img { 2649 img, 2650 video { 2619 2651 height: auto; /* Make sure images are scaled correctly. */ 2620 2652 max-width: 100%; /* Adhere to container width. */ 2621 2653 } … … 3259 3291 3260 3292 .has-header-image.twentyseventeen-front-page .custom-header, 3261 3293 .has-header-image.home.blog .custom-header { 3262 display: block;3263 3294 min-height: 0; 3264 3295 } 3265 3296 … … 3268 3299 position: relative; 3269 3300 } 3270 3301 3302 .twentyseventeen-front-page.has-header-image .custom-header-image, 3303 .home.blog.has-header-image .custom-header-image { 3304 height: 0; 3305 position: relative; 3306 } 3307 3271 3308 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image { 3272 3309 bottom: 0; 3273 3310 height: auto; … … 3277 3314 top: 0; 3278 3315 } 3279 3316 3280 .twentyseventeen-front-page.has-header-image .custom-header-image,3281 .home.blog.has-header-image .custom-header-image {3282 height: 0;3283 padding-top: 66%;3284 position: relative;3285 }3286 3287 3317 .custom-logo-link { 3288 3318 padding-right: 2em; 3289 3319 } … … 3555 3585 height: 1200px; 3556 3586 height: 100vh; 3557 3587 max-height: 100%; 3558 padding: 10% 0; 3588 overflow: hidden; 3589 /* padding: 10% 0; */ 3559 3590 } 3560 3591 3561 3592 .twentyseventeen-front-page.has-header-image .custom-header-image:before, … … 3902 3933 3903 3934 @media screen and ( min-width: 55em ) { 3904 3935 3905 .twentyseventeen-front-page.has-header-image .custom-header-image,3906 .home.blog.has-header-image .custom-header-image {3907 background-attachment: fixed;3908 }3909 3910 3936 .panel-image { 3911 3937 background-attachment: fixed; 3912 3938 } -
src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php
14 14 $header_image = get_header_image(); 15 15 16 16 // Check if Custom Header image has been added. 17 if ( ! empty( $header_image ) ) : ?>17 if ( ! empty( $header_image ) ) : 18 18 19 <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>20 <?php get_template_part( 'template-parts/header/site', 'branding' );?>19 // If yes, check if we're on the front page 20 if ( twentyseventeen_is_frontpage() ) : ?> 21 21 22 <?php // Output the full custom header - video and/or image fallback. ?> 23 <div class="custom-header-image"> 24 <?php the_custom_header(); ?> 25 </div> 26 <?php get_template_part( 'template-parts/header/site', 'branding' ); ?> 27 28 <?php else : ?> 29 30 <?php // If we're not on the front page, only output the header image. ?> 31 <div class="custom-header-image"> 32 <img src="<?php echo esc_url( $header_image ); ?>"> 33 </div> 34 <?php get_template_part( 'template-parts/header/site', 'branding' ); ?> 35 36 <?php endif; ?> 37 22 38 <?php else : ?> 39 23 40 <?php // Otherwise, show a blank header. ?> 24 41 <div class="custom-header-simple"> 25 42 <?php get_template_part( 'template-parts/header/site', 'branding' ); ?> -
src/wp-includes/class-wp-customize-manager.php
362 362 add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 ); 363 363 add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_control_templates' ), 1 ); 364 364 365 // Export header video settings with the partial response. 366 add_filter( 'customize_render_partials_response', array( $this, 'export_header_video_settings' ), 10, 3 ); 367 365 368 // Export the settings to JS via the _wpCustomizeSettings variable. 366 369 add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 ); 367 370 … … 3225 3228 3226 3229 /* Custom Header */ 3227 3230 3231 if ( current_theme_supports( 'custom-header', 'video' ) ) { 3232 $title = __( 'Header Visuals' ); 3233 $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' ); 3234 $width = absint( get_theme_support( 'custom-header', 'width' ) ); 3235 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 3236 if ( $width && $height ) { 3237 /* translators: %s: header size in pixels */ 3238 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ), 3239 sprintf( '<strong>%s × %s</strong>', $width, $height ) 3240 ); 3241 } elseif ( $width ) { 3242 /* translators: %s: header width in pixels */ 3243 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ), 3244 sprintf( '<strong>%s</strong>', $width ) 3245 ); 3246 } else { 3247 /* translators: %s: header height in pixels */ 3248 $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ), 3249 sprintf( '<strong>%s</strong>', $height ) 3250 ); 3251 } 3252 } else { 3253 $title = __( 'Header Image' ); 3254 $description = ''; 3255 $control_description = ''; 3256 } 3257 3228 3258 $this->add_section( 'header_image', array( 3229 'title' => __( 'Header Image' ), 3259 'title' => $title, 3260 'description' => $description, 3230 3261 'theme_supports' => 'custom-header', 3231 3262 'priority' => 60, 3232 3263 ) ); 3233 3264 3265 $this->add_setting( 'header_video', array( 3266 'theme_supports' => array( 'custom-header', 'video' ), 3267 'transport' => 'postMessage', 3268 'sanitize_callback' => 'absint', 3269 'validate_callback' => array( $this, '_validate_header_video' ), 3270 ) ); 3271 3272 $this->add_setting( 'external_header_video', array( 3273 'theme_supports' => array( 'custom-header', 'video' ), 3274 'transport' => 'postMessage', 3275 'sanitize_callback' => 'esc_url', 3276 'validate_callback' => array( $this, '_validate_external_header_video' ), 3277 ) ); 3278 3234 3279 $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array( 3235 3280 'default' => get_theme_support( 'custom-header', 'default-image' ), 3236 3281 'theme_supports' => 'custom-header', … … 3241 3286 'theme_supports' => 'custom-header', 3242 3287 ) ) ); 3243 3288 3289 $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array( 3290 'theme_supports' => array( 'custom-header', 'video' ), 3291 'label' => __( 'Header Video' ), 3292 'description' => $control_description, 3293 'section' => 'header_image', 3294 'mime_type' => 'video', 3295 ) ) ); 3296 3297 $this->add_control( 'external_header_video', array( 3298 'theme_supports' => array( 'custom-header', 'video' ), 3299 'type' => 'url', 3300 'description' => __( 'Or, enter a YouTube or Vimeo URL:' ), 3301 'section' => 'header_image', 3302 ) ); 3303 3244 3304 $this->add_control( new WP_Customize_Header_Image_Control( $this ) ); 3245 3305 3306 $this->selective_refresh->add_partial( 'header_video', array( 3307 'selector' => '#wp-custom-header', 3308 'render_callback' => 'the_custom_header', 3309 'settings' => array( 'header_video', 'external_header_video', 'header_image' ), // The image is used as a video fallback here. 3310 'container_inclusive' => true, 3311 ) ); 3312 3246 3313 /* Custom Background */ 3247 3314 3248 3315 $this->add_section( 'background_image', array( … … 3599 3666 } 3600 3667 3601 3668 /** 3669 * Export header video settings to facilitate selective refresh. 3670 * 3671 * @since 4.7.0 3672 * 3673 * @param array $response Response. 3674 * @param WP_Customize_Selective_Refresh $selective_refresh Selective refresh component. 3675 * @param array $partials Array of partials. 3676 * @return array 3677 */ 3678 public function export_header_video_settings( $response, $selective_refresh, $partials ) { 3679 if ( isset( $partials['header_video'] ) || isset( $partials['external_header_video'] ) ) { 3680 $response['custom_header_settings'] = get_header_video_settings(); 3681 } 3682 3683 return $response; 3684 } 3685 3686 /** 3687 * Callback for validating the header_video value. 3688 * 3689 * Ensures that the selected video is less than 8MB and provides an error message. 3690 * 3691 * @since 4.7.0 3692 * 3693 * @param WP_Error $validity 3694 * @param mixed $value 3695 * @return mixed 3696 */ 3697 public function _validate_header_video( $validity, $value ) { 3698 $video = get_attached_file( absint( $value ) ); 3699 if ( $video ) { 3700 $size = filesize( $video ); 3701 if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB. 3702 $validity->add( 'size_too_large', __( 'This video file is too large to use as a header video. Try a shorter video or optimize the compression settings and re-upload a file that is less than 8MB. Or, upload your video to YouTube and link it with the option below.' ) ); 3703 } 3704 if ( '.mp4' !== substr( $video, -4 ) && '.mov' !== substr( $video, -4 ) ) { // Check for .mp4 or .mov format, which (assuming h.264 encoding) are the only cross-browser-supported formats. 3705 $validity->add( 'invalid_file_type', __( 'Only <code>.mp4</code> or <code>.mov</code> files may be used for header video. Please convert your video file and try again, or, upload your video to YouTube and link it with the option below.' ) ); 3706 } 3707 } 3708 return $validity; 3709 } 3710 3711 /** 3712 * Callback for validating the external_header_video value. 3713 * 3714 * Ensures that the provided URL is for YouTube or Vimeo. 3715 * 3716 * @since 4.7.0 3717 * 3718 * @param WP_Error $validity 3719 * @param mixed $value 3720 * @return mixed 3721 */ 3722 public function _validate_external_header_video( $validity, $value ) { 3723 $video = esc_url( $value ); 3724 if ( $video ) { 3725 if ( get_theme_mod( 'header_video', false ) ) { 3726 $validity->add( 'unused_option', __( 'Please remove the uploaded video above to use the external video linked here.' ) ); 3727 } 3728 if ( ! preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video ) 3729 && ! preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video ) ) { 3730 $validity->add( 'invalid_url', __( 'Please enter a valid YouTube or Vimeo video URL.' ) ); 3731 } 3732 } 3733 return $validity; 3734 } 3735 3736 /** 3602 3737 * Callback for rendering the custom logo, used in the custom_logo partial. 3603 3738 * 3604 3739 * This method exists because the partial object and context data are passed -
src/wp-includes/customize/class-wp-customize-header-image-control.php
166 166 $height = absint( get_theme_support( 'custom-header', 'height' ) ); 167 167 ?> 168 168 <div class="customize-control-content"> 169 <p class="customizer-section-intro"> 169 <?php if ( current_theme_supports( 'custom-header', 'video' ) ) { 170 echo '<span class="customize-control-title">' . $this->label . '</span>'; 171 } ?> 172 <p class="customizer-section-intro customize-control-description"> 170 173 <?php 171 if ( $width && $height ) { 174 if ( current_theme_supports( 'custom-header', 'video' ) ) { 175 _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' ); 176 } elseif ( $width && $height ) { 172 177 /* translators: %s: header size in pixels */ 173 178 printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ), 174 179 sprintf( '<strong>%s × %s</strong>', $width, $height ) -
src/wp-includes/js/wp-custom-header.js
1 (function( window, settings ) { 2 3 function wpCustomHeader() { 4 var handlers = { 5 native: { 6 test: function( settings ) { 7 var video = document.createElement( 'video' ); 8 return video.canPlayType( settings.mimeType ); 9 }, 10 callback: nativeHandler 11 }, 12 youtube: { 13 test: function( settings ) { 14 return 'video/x-youtube' === settings.mimeType; 15 }, 16 callback: youtubeHandler 17 } 18 }; 19 20 function initialize() { 21 settings.container = document.getElementById( 'wp-custom-header' ); 22 23 if ( supportsVideo() ) { 24 for ( id in handlers ) { 25 var handler = handlers[ id ]; 26 27 if ( handlers.hasOwnProperty( id ) && handler.test( settings ) ) { 28 handler.callback( settings ); 29 break; 30 } 31 } 32 } 33 } 34 35 function supportsVideo() { 36 // @todo Check screen width, user agent, other environment variables, etc. 37 return true; 38 } 39 40 return { 41 handlers: handlers, 42 initialize: initialize, 43 supportsVideo: supportsVideo 44 } 45 } 46 47 function nativeHandler( settings ) { 48 var video = document.createElement( 'video' ); 49 50 video.id = 'wp-custom-header-video'; 51 video.autoplay = 'true'; 52 video.loop = 'true'; 53 video.muted = 'true'; 54 video.poster = settings.posterUrl; 55 video.width = settings.width; 56 video.height = settings.height; 57 58 video.addEventListener( 'click', function() { 59 if ( video.paused ) { 60 video.play(); 61 } else { 62 video.pause(); 63 } 64 }); 65 66 settings.container.innerHTML = ''; 67 settings.container.appendChild( video ); 68 video.src = settings.videoUrl; 69 } 70 71 function youtubeHandler( settings ) { 72 // @link http://stackoverflow.com/a/27728417 73 var VIDEO_ID_REGEX = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/, 74 videoId = settings.videoUrl.match( VIDEO_ID_REGEX )[1]; 75 76 function loadVideo() { 77 YT.ready(function() { 78 var video = document.createElement( 'div' ); 79 video.id = 'wp-custom-header-video'; 80 settings.container.innerHTML = ''; 81 settings.container.appendChild( video ); 82 83 new YT.Player( video, { 84 height: settings.height, 85 width: settings.width, 86 videoId: videoId, 87 events: { 88 onReady: function( e ) { 89 e.target.mute(); 90 } 91 }, 92 playerVars: { 93 autoplay: 1, 94 controls: 0, 95 disablekb: 1, 96 fs: 0, 97 iv_load_policy: 3, 98 loop: 1, 99 modestbranding: 1, 100 //origin: '', 101 playsinline: 1, 102 rel: 0, 103 showinfo: 0 104 } 105 }); 106 }); 107 } 108 109 if ( 'YT' in window ) { 110 loadVideo(); 111 } else { 112 tag = document.createElement( 'script' ); 113 tag.src = 'https://www.youtube.com/player_api'; 114 tag.onload = function () { loadVideo(); }; 115 document.getElementsByTagName( 'head' )[0].appendChild( tag ); 116 } 117 } 118 119 window.wp = window.wp || {}; 120 window.wp.customHeader = new wpCustomHeader(); 121 document.addEventListener( 'DOMContentLoaded', window.wp.customHeader.initialize, false ); 122 123 if ( 'customize' in window.wp ) { 124 wp.customize.selectiveRefresh.bind( 'render-partials-response', function( response ) { 125 if ( 'custom_header_settings' in response ) { 126 settings = response.custom_header_settings; 127 } 128 }); 129 130 wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) { 131 if ( 'header_video' === placement.partial.id || 'external_header_video' === placement.partial.id ) { 132 window.wp.customHeader.initialize(); 133 } 134 }); 135 } 136 137 })( window, window._wpCustomHeaderSettings || {} ); -
src/wp-includes/script-loader.php
479 479 $scripts->add( 'customize-nav-menus', "/wp-admin/js/customize-nav-menus$suffix.js", array( 'jquery', 'wp-backbone', 'customize-controls', 'accordion', 'nav-menu' ), false, 1 ); 480 480 $scripts->add( 'customize-preview-nav-menus', "/wp-includes/js/customize-preview-nav-menus$suffix.js", array( 'jquery', 'wp-util', 'customize-preview', 'customize-selective-refresh' ), false, 1 ); 481 481 482 $scripts->add( 'wp-custom-header', "/wp-includes/js/wp-custom-header$suffix.js", array(), false, 1 ); 483 482 484 $scripts->add( 'accordion', "/wp-admin/js/accordion$suffix.js", array( 'jquery' ), false, 1 ); 483 485 484 486 $scripts->add( 'shortcode', "/wp-includes/js/shortcode$suffix.js", array( 'underscore' ), false, 1 ); -
src/wp-includes/theme.php
1264 1264 'thumbnail_url' => '', 1265 1265 'width' => get_theme_support( 'custom-header', 'width' ), 1266 1266 'height' => get_theme_support( 'custom-header', 'height' ), 1267 'video' => get_theme_support( 'custom-header', 'video' ), 1267 1268 ); 1268 1269 return (object) wp_parse_args( $data, $default ); 1269 1270 } … … 1311 1312 } 1312 1313 1313 1314 /** 1315 * Check whether a header video is set or not. 1316 * 1317 * @since 4.7.0 1318 * 1319 * @see get_header_video_url() 1320 * 1321 * @return bool Whether a header video is set or not. 1322 */ 1323 function has_header_video() { 1324 return (bool) get_header_video_url(); 1325 } 1326 1327 /* Retrieve header video URL for custom header. 1328 * 1329 * Uses a local video if present, or falls back to an external video. Returns false if there is no video. 1330 * 1331 * @since 4.7.0 1332 * 1333 * @return string|false 1334 */ 1335 function get_header_video_url() { 1336 $id = absint( get_theme_mod( 'header_video' ) ); 1337 $url = esc_url( get_theme_mod( 'external_header_video' ) ); 1338 1339 if ( ! $id && ! $url ) { 1340 return false; 1341 } 1342 1343 if ( $id ) { 1344 // Get the file URL from the attachment ID. 1345 $url = wp_get_attachment_url( $id ); 1346 } 1347 1348 return esc_url_raw( set_url_scheme( $url ) ); 1349 } 1350 1351 /** 1352 * Display header video URL. 1353 * 1354 * @since 4.7.0 1355 */ 1356 function the_header_video_url() { 1357 $video = get_header_video_url(); 1358 if ( $video ) { 1359 echo esc_url( $video ); 1360 } 1361 } 1362 1363 /** 1364 * Retrieve header video settings. 1365 * 1366 * @since 4.7.0 1367 * 1368 * @return array 1369 */ 1370 function get_header_video_settings() { 1371 $header = get_custom_header(); 1372 $video_url = get_header_video_url(); 1373 $video_type = wp_check_filetype( $video_url, wp_get_mime_types() ); 1374 1375 $settings = array( 1376 'mimeType' => '', 1377 'posterUrl' => get_header_image(), 1378 'videoUrl' => $video_url, 1379 'width' => absint( $header->width ), 1380 'height' => absint( $header->height ), 1381 ); 1382 1383 if ( preg_match( '#^https?://(?:www\.)?(?:youtube\.com/watch|youtu\.be/)#', $video_url ) ) { 1384 $settings['mimeType'] = 'video/x-youtube'; 1385 } elseif ( preg_match( '#^https?://(.+\.)?vimeo\.com/.*#', $video_url ) ) { 1386 $settings['mimeType'] = 'video/x-vimeo'; 1387 } elseif ( ! empty( $video_type['type'] ) ) { 1388 $settings['mimeType'] = $video_type['type']; 1389 } 1390 1391 return $settings; 1392 } 1393 1394 /** 1395 * Display the video and image markup for a custom header. 1396 * 1397 * @since 4.7.0 1398 */ 1399 function the_custom_header() { 1400 $header = get_custom_header(); 1401 1402 printf( 1403 '<div id="wp-custom-header">%s</div>', 1404 get_header_image_tag() 1405 ); 1406 1407 if ( $header->video && ( has_header_video() || is_customize_preview() ) ) { 1408 wp_enqueue_script( 'wp-custom-header' ); 1409 wp_localize_script( 'wp-custom-header', '_wpCustomHeaderSettings', get_header_video_settings() ); 1410 } 1411 } 1412 1413 /** 1314 1414 * Retrieve background image for custom background. 1315 1415 * 1316 1416 * @since 3.0.0 … … 1706 1806 'wp-head-callback' => '', 1707 1807 'admin-head-callback' => '', 1708 1808 'admin-preview-callback' => '', 1809 'video' => false, 1709 1810 ); 1710 1811 1711 1812 $jit = isset( $args[0]['__jit'] );