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