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