wp/wp-content/themes/twentyseventeen/inc/custom-header.php
author ymh <ymh.work@gmail.com>
Mon, 14 Oct 2019 17:39:30 +0200
changeset 7 cf61fcea0001
permissions -rw-r--r--
resynchronize code repo with production
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
7
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
<?php
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
 * Custom header implementation
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
 * @link https://codex.wordpress.org/Custom_Headers
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
 * @package WordPress
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
 * @subpackage Twenty_Seventeen
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
 * @since 1.0
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
 * Set up the WordPress core custom header feature.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
 * @uses twentyseventeen_header_style()
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
function twentyseventeen_custom_header_setup() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
	/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
	 * Filter Twenty Seventeen custom-header support arguments.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
	 * @since Twenty Seventeen 1.0
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
	 * @param array $args {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
	 *     An array of custom-header support arguments.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
	 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
	 *     @type string $default-image     		Default image of the header.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
	 *     @type string $default_text_color     Default color of the header text.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
	 *     @type int    $width                  Width in pixels of the custom header image. Default 954.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
	 *     @type int    $height                 Height in pixels of the custom header image. Default 1300.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
	 *     @type string $wp-head-callback       Callback function used to styles the header image and text
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
	 *                                          displayed on the blog.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
	 *     @type string $flex-height     		Flex support for height of header.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
	 * }
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
	 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
	add_theme_support( 'custom-header', apply_filters( 'twentyseventeen_custom_header_args', array(
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
		'default-image'      => get_parent_theme_file_uri( '/assets/images/header.jpg' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
		'width'              => 2000,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    39
		'height'             => 1200,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    40
		'flex-height'        => true,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    41
		'video'              => true,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    42
		'wp-head-callback'   => 'twentyseventeen_header_style',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    43
	) ) );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    44
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    45
	register_default_headers( array(
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    46
		'default-image' => array(
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
			'url'           => '%s/assets/images/header.jpg',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
			'thumbnail_url' => '%s/assets/images/header.jpg',
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
			'description'   => __( 'Default Header Image', 'twentyseventeen' ),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
		),
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
	) );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
add_action( 'after_setup_theme', 'twentyseventeen_custom_header_setup' );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
if ( ! function_exists( 'twentyseventeen_header_style' ) ) :
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    56
/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    57
 * Styles the header image and text displayed on the blog.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    58
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    59
 * @see twentyseventeen_custom_header_setup().
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    60
 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    61
function twentyseventeen_header_style() {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    62
	$header_text_color = get_header_textcolor();
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    63
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    64
	// If no custom options for text are set, let's bail.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    65
	// get_header_textcolor() options: add_theme_support( 'custom-header' ) is default, hide text (returns 'blank') or any hex value.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    66
	if ( get_theme_support( 'custom-header', 'default-text-color' ) === $header_text_color ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    67
		return;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    68
	}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    69
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    70
	// If we get this far, we have custom styles. Let's do this.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    71
	?>
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    72
	<style id="twentyseventeen-custom-header-styles" type="text/css">
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    73
	<?php
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    74
		// Has the text been hidden?
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    75
		if ( 'blank' === $header_text_color ) :
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    76
	?>
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    77
		.site-title,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    78
		.site-description {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    79
			position: absolute;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    80
			clip: rect(1px, 1px, 1px, 1px);
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    81
		}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    82
	<?php
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    83
		// If the user has set a custom color for the text use that.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    84
		else :
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    85
	?>
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    86
		.site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    87
		.colors-dark .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    88
		.colors-custom .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    89
		body.has-header-image .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    90
		body.has-header-video .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    91
		body.has-header-image.colors-dark .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    92
		body.has-header-video.colors-dark .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    93
		body.has-header-image.colors-custom .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    94
		body.has-header-video.colors-custom .site-title a,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    95
		.site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    96
		.colors-dark .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    97
		.colors-custom .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    98
		body.has-header-image .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
    99
		body.has-header-video .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   100
		body.has-header-image.colors-dark .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   101
		body.has-header-video.colors-dark .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   102
		body.has-header-image.colors-custom .site-description,
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   103
		body.has-header-video.colors-custom .site-description {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   104
			color: #<?php echo esc_attr( $header_text_color ); ?>;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   105
		}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   106
	<?php endif; ?>
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   107
	</style>
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   108
	<?php
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   109
}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   110
endif; // End of twentyseventeen_header_style.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   111
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   112
/**
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   113
 * Customize video play/pause button in the custom header.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   114
 *
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   115
 * @param array $settings Video settings.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   116
 * @return array The filtered video settings.
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   117
 */
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   118
function twentyseventeen_video_controls( $settings ) {
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   119
	$settings['l10n']['play'] = '<span class="screen-reader-text">' . __( 'Play background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'play' ) );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   120
	$settings['l10n']['pause'] = '<span class="screen-reader-text">' . __( 'Pause background video', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'pause' ) );
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   121
	return $settings;
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   122
}
cf61fcea0001 resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
diff changeset
   123
add_filter( 'header_video_settings', 'twentyseventeen_video_controls' );