WordPress/wp-content/themes/twentyfourteen/inc/custom-header.php
Joe McGill 030bc377dd Themes: Enable video in custom headers.
This adds the ability for themes to add support for videos in custom headers
by passing `'video' => true` as an argument when adding theme support for
custom headers.

Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.

This introduces several new functions:

`has_header_video()` – Check whether a header video is set or not.
`get_header_video_url()` – Retrieve header video URL for custom header.
`the_header_video_url()` – Display header video URL.
`get_header_video_settings()` – Retrieve header video settings.
`has_custom_header()` – Check whether a custom header is set or not.
`get_custom_header_markup()` – Retrieve the markup for a custom header.
`the_custom_header_markup()` – Print the markup for a custom header.

And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos
in custom headers.

This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.

Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes #38172.
Built from https://develop.svn.wordpress.org/trunk@38985


git-svn-id: http://core.svn.wordpress.org/trunk@38928 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-27 21:51:31 +00:00

149 lines
4.4 KiB
PHP

<?php
/**
* Implement Custom Header functionality for Twenty Fourteen
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
/**
* Set up the WordPress core custom header settings.
*
* @since Twenty Fourteen 1.0
*
* @uses twentyfourteen_header_style()
* @uses twentyfourteen_admin_header_style()
* @uses twentyfourteen_admin_header_image()
*/
function twentyfourteen_custom_header_setup() {
/**
* Filter Twenty Fourteen custom-header support arguments.
*
* @since Twenty Fourteen 1.0
*
* @param array $args {
* An array of custom-header support arguments.
*
* @type bool $header_text Whether to display custom header text. Default false.
* @type int $width Width in pixels of the custom header image. Default 1260.
* @type int $height Height in pixels of the custom header image. Default 240.
* @type bool $flex_height Whether to allow flexible-height header images. Default true.
* @type string $admin_head_callback Callback function used to style the image displayed in
* the Appearance > Header screen.
* @type string $admin_preview_callback Callback function used to create the custom header markup in
* the Appearance > Header screen.
* }
*/
add_theme_support( 'custom-header', apply_filters( 'twentyfourteen_custom_header_args', array(
'default-text-color' => 'fff',
'width' => 1260,
'height' => 240,
'flex-height' => true,
'video' => true,
'wp-head-callback' => 'twentyfourteen_header_style',
'admin-head-callback' => 'twentyfourteen_admin_header_style',
'admin-preview-callback' => 'twentyfourteen_admin_header_image',
) ) );
}
add_action( 'after_setup_theme', 'twentyfourteen_custom_header_setup' );
if ( ! function_exists( 'twentyfourteen_header_style' ) ) :
/**
* Styles the header image and text displayed on the blog
*
* @see twentyfourteen_custom_header_setup().
*
*/
function twentyfourteen_header_style() {
$text_color = get_header_textcolor();
// If no custom color for text is set, let's bail.
if ( display_header_text() && $text_color === get_theme_support( 'custom-header', 'default-text-color' ) )
return;
// If we get this far, we have custom styles.
?>
<style type="text/css" id="twentyfourteen-header-css">
<?php
// Has the text been hidden?
if ( ! display_header_text() ) :
?>
.site-title,
.site-description {
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
}
<?php
// If the user has set a custom color for the text, use that.
elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) :
?>
.site-title a {
color: #<?php echo esc_attr( $text_color ); ?>;
}
<?php endif; ?>
</style>
<?php
}
endif; // twentyfourteen_header_style
if ( ! function_exists( 'twentyfourteen_admin_header_style' ) ) :
/**
* Style the header image displayed on the Appearance > Header screen.
*
* @see twentyfourteen_custom_header_setup()
*
* @since Twenty Fourteen 1.0
*/
function twentyfourteen_admin_header_style() {
?>
<style type="text/css" id="twentyfourteen-admin-header-css">
.appearance_page_custom-header #headimg {
background-color: #000;
border: none;
max-width: 1260px;
min-height: 48px;
}
#headimg h1 {
font-family: Lato, sans-serif;
font-size: 18px;
line-height: 48px;
margin: 0 0 0 30px;
}
.rtl #headimg h1 {
margin: 0 30px 0 0;
}
#headimg h1 a {
color: #fff;
text-decoration: none;
}
#headimg img {
vertical-align: middle;
}
</style>
<?php
}
endif; // twentyfourteen_admin_header_style
if ( ! function_exists( 'twentyfourteen_admin_header_image' ) ) :
/**
* Create the custom header image markup displayed on the Appearance > Header screen.
*
* @see twentyfourteen_custom_header_setup()
*
* @since Twenty Fourteen 1.0
*/
function twentyfourteen_admin_header_image() {
?>
<div id="headimg">
<?php if ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" alt="">
<?php endif; ?>
<h1 class="displaying-header-text"><a id="name" style="<?php echo esc_attr( sprintf( 'color: #%s;', get_header_textcolor() ) ); ?>" onclick="return false;" href="<?php echo esc_url( home_url( '/' ) ); ?>" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<?php
}
endif; // twentyfourteen_admin_header_image