1 <?php |
|
2 /** |
|
3 * Custom Header functionality for Twenty Fifteen |
|
4 * |
|
5 * @package WordPress |
|
6 * @subpackage Twenty_Fifteen |
|
7 * @since Twenty Fifteen 1.0 |
|
8 */ |
|
9 |
|
10 /** |
|
11 * Set up the WordPress core custom header feature. |
|
12 * |
|
13 * @uses twentyfifteen_header_style() |
|
14 */ |
|
15 function twentyfifteen_custom_header_setup() { |
|
16 $color_scheme = twentyfifteen_get_color_scheme(); |
|
17 $default_text_color = trim( $color_scheme[4], '#' ); |
|
18 |
|
19 /** |
|
20 * Filter Twenty Fifteen custom-header support arguments. |
|
21 * |
|
22 * @since Twenty Fifteen 1.0 |
|
23 * |
|
24 * @param array $args { |
|
25 * An array of custom-header support arguments. |
|
26 * |
|
27 * @type string $default_text_color Default color of the header text. |
|
28 * @type int $width Width in pixels of the custom header image. Default 954. |
|
29 * @type int $height Height in pixels of the custom header image. Default 1300. |
|
30 * @type string $wp-head-callback Callback function used to styles the header image and text |
|
31 * displayed on the blog. |
|
32 * } |
|
33 */ |
|
34 add_theme_support( 'custom-header', apply_filters( 'twentyfifteen_custom_header_args', array( |
|
35 'default-text-color' => $default_text_color, |
|
36 'width' => 954, |
|
37 'height' => 1300, |
|
38 'wp-head-callback' => 'twentyfifteen_header_style', |
|
39 ) ) ); |
|
40 } |
|
41 add_action( 'after_setup_theme', 'twentyfifteen_custom_header_setup' ); |
|
42 |
|
43 /** |
|
44 * Convert HEX to RGB. |
|
45 * |
|
46 * @since Twenty Fifteen 1.0 |
|
47 * |
|
48 * @param string $color The original color, in 3- or 6-digit hexadecimal form. |
|
49 * @return array Array containing RGB (red, green, and blue) values for the given |
|
50 * HEX code, empty array otherwise. |
|
51 */ |
|
52 function twentyfifteen_hex2rgb( $color ) { |
|
53 $color = trim( $color, '#' ); |
|
54 |
|
55 if ( strlen( $color ) == 3 ) { |
|
56 $r = hexdec( substr( $color, 0, 1 ).substr( $color, 0, 1 ) ); |
|
57 $g = hexdec( substr( $color, 1, 1 ).substr( $color, 1, 1 ) ); |
|
58 $b = hexdec( substr( $color, 2, 1 ).substr( $color, 2, 1 ) ); |
|
59 } else if ( strlen( $color ) == 6 ) { |
|
60 $r = hexdec( substr( $color, 0, 2 ) ); |
|
61 $g = hexdec( substr( $color, 2, 2 ) ); |
|
62 $b = hexdec( substr( $color, 4, 2 ) ); |
|
63 } else { |
|
64 return array(); |
|
65 } |
|
66 |
|
67 return array( 'red' => $r, 'green' => $g, 'blue' => $b ); |
|
68 } |
|
69 |
|
70 if ( ! function_exists( 'twentyfifteen_header_style' ) ) : |
|
71 /** |
|
72 * Styles the header image and text displayed on the blog. |
|
73 * |
|
74 * @since Twenty Fifteen 1.0 |
|
75 * |
|
76 * @see twentyfifteen_custom_header_setup() |
|
77 */ |
|
78 function twentyfifteen_header_style() { |
|
79 $header_image = get_header_image(); |
|
80 |
|
81 // If no custom options for text are set, let's bail. |
|
82 if ( empty( $header_image ) && display_header_text() ) { |
|
83 return; |
|
84 } |
|
85 |
|
86 // If we get this far, we have custom styles. Let's do this. |
|
87 ?> |
|
88 <style type="text/css" id="twentyfifteen-header-css"> |
|
89 <?php |
|
90 // Short header for when there is no Custom Header and Header Text is hidden. |
|
91 if ( empty( $header_image ) && ! display_header_text() ) : |
|
92 ?> |
|
93 .site-header { |
|
94 padding-top: 14px; |
|
95 padding-bottom: 14px; |
|
96 } |
|
97 |
|
98 .site-branding { |
|
99 min-height: 42px; |
|
100 } |
|
101 |
|
102 @media screen and (min-width: 46.25em) { |
|
103 .site-header { |
|
104 padding-top: 21px; |
|
105 padding-bottom: 21px; |
|
106 } |
|
107 .site-branding { |
|
108 min-height: 56px; |
|
109 } |
|
110 } |
|
111 @media screen and (min-width: 55em) { |
|
112 .site-header { |
|
113 padding-top: 25px; |
|
114 padding-bottom: 25px; |
|
115 } |
|
116 .site-branding { |
|
117 min-height: 62px; |
|
118 } |
|
119 } |
|
120 @media screen and (min-width: 59.6875em) { |
|
121 .site-header { |
|
122 padding-top: 0; |
|
123 padding-bottom: 0; |
|
124 } |
|
125 .site-branding { |
|
126 min-height: 0; |
|
127 } |
|
128 } |
|
129 <?php |
|
130 endif; |
|
131 |
|
132 // Has a Custom Header been added? |
|
133 if ( ! empty( $header_image ) ) : |
|
134 ?> |
|
135 .site-header { |
|
136 |
|
137 /* |
|
138 * No shorthand so the Customizer can override individual properties. |
|
139 * @see https://core.trac.wordpress.org/ticket/31460 |
|
140 */ |
|
141 background-image: url(<?php header_image(); ?>); |
|
142 background-repeat: no-repeat; |
|
143 background-position: 50% 50%; |
|
144 -webkit-background-size: cover; |
|
145 -moz-background-size: cover; |
|
146 -o-background-size: cover; |
|
147 background-size: cover; |
|
148 } |
|
149 |
|
150 @media screen and (min-width: 59.6875em) { |
|
151 body:before { |
|
152 |
|
153 /* |
|
154 * No shorthand so the Customizer can override individual properties. |
|
155 * @see https://core.trac.wordpress.org/ticket/31460 |
|
156 */ |
|
157 background-image: url(<?php header_image(); ?>); |
|
158 background-repeat: no-repeat; |
|
159 background-position: 100% 50%; |
|
160 -webkit-background-size: cover; |
|
161 -moz-background-size: cover; |
|
162 -o-background-size: cover; |
|
163 background-size: cover; |
|
164 border-right: 0; |
|
165 } |
|
166 |
|
167 .site-header { |
|
168 background: transparent; |
|
169 } |
|
170 } |
|
171 <?php |
|
172 endif; |
|
173 |
|
174 // Has the text been hidden? |
|
175 if ( ! display_header_text() ) : |
|
176 ?> |
|
177 .site-title, |
|
178 .site-description { |
|
179 clip: rect(1px, 1px, 1px, 1px); |
|
180 position: absolute; |
|
181 } |
|
182 <?php endif; ?> |
|
183 </style> |
|
184 <?php |
|
185 } |
|
186 endif; // twentyfifteen_header_style |
|
187 |
|
188 /** |
|
189 * Enqueues front-end CSS for the header background color. |
|
190 * |
|
191 * @since Twenty Fifteen 1.0 |
|
192 * |
|
193 * @see wp_add_inline_style() |
|
194 */ |
|
195 function twentyfifteen_header_background_color_css() { |
|
196 $color_scheme = twentyfifteen_get_color_scheme(); |
|
197 $default_color = $color_scheme[1]; |
|
198 $header_background_color = get_theme_mod( 'header_background_color', $default_color ); |
|
199 |
|
200 // Don't do anything if the current color is the default. |
|
201 if ( $header_background_color === $default_color ) { |
|
202 return; |
|
203 } |
|
204 |
|
205 $css = ' |
|
206 /* Custom Header Background Color */ |
|
207 body:before, |
|
208 .site-header { |
|
209 background-color: %1$s; |
|
210 } |
|
211 |
|
212 @media screen and (min-width: 59.6875em) { |
|
213 .site-header, |
|
214 .secondary { |
|
215 background-color: transparent; |
|
216 } |
|
217 |
|
218 .widget button, |
|
219 .widget input[type="button"], |
|
220 .widget input[type="reset"], |
|
221 .widget input[type="submit"], |
|
222 .widget_calendar tbody a, |
|
223 .widget_calendar tbody a:hover, |
|
224 .widget_calendar tbody a:focus { |
|
225 color: %1$s; |
|
226 } |
|
227 } |
|
228 '; |
|
229 |
|
230 wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) ); |
|
231 } |
|
232 add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 ); |
|
233 |
|
234 /** |
|
235 * Enqueues front-end CSS for the sidebar text color. |
|
236 * |
|
237 * @since Twenty Fifteen 1.0 |
|
238 */ |
|
239 function twentyfifteen_sidebar_text_color_css() { |
|
240 $color_scheme = twentyfifteen_get_color_scheme(); |
|
241 $default_color = $color_scheme[4]; |
|
242 $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color ); |
|
243 |
|
244 // Don't do anything if the current color is the default. |
|
245 if ( $sidebar_link_color === $default_color ) { |
|
246 return; |
|
247 } |
|
248 |
|
249 // If we get this far, we have custom styles. Let's do this. |
|
250 $sidebar_link_color_rgb = twentyfifteen_hex2rgb( $sidebar_link_color ); |
|
251 $sidebar_text_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb ); |
|
252 $sidebar_border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb ); |
|
253 $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb ); |
|
254 |
|
255 $css = ' |
|
256 /* Custom Sidebar Text Color */ |
|
257 .site-title a, |
|
258 .site-description, |
|
259 .secondary-toggle:before { |
|
260 color: %1$s; |
|
261 } |
|
262 |
|
263 .site-title a:hover, |
|
264 .site-title a:focus { |
|
265 color: %1$s; /* Fallback for IE7 and IE8 */ |
|
266 color: %2$s; |
|
267 } |
|
268 |
|
269 .secondary-toggle { |
|
270 border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
271 border-color: %3$s; |
|
272 } |
|
273 |
|
274 .secondary-toggle:hover, |
|
275 .secondary-toggle:focus { |
|
276 border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
277 border-color: %4$s; |
|
278 } |
|
279 |
|
280 .site-title a { |
|
281 outline-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
282 outline-color: %4$s; |
|
283 } |
|
284 |
|
285 @media screen and (min-width: 59.6875em) { |
|
286 .secondary a, |
|
287 .dropdown-toggle:after, |
|
288 .widget-title, |
|
289 .widget blockquote cite, |
|
290 .widget blockquote small { |
|
291 color: %1$s; |
|
292 } |
|
293 |
|
294 .widget button, |
|
295 .widget input[type="button"], |
|
296 .widget input[type="reset"], |
|
297 .widget input[type="submit"], |
|
298 .widget_calendar tbody a { |
|
299 background-color: %1$s; |
|
300 } |
|
301 |
|
302 .textwidget a { |
|
303 border-color: %1$s; |
|
304 } |
|
305 |
|
306 .secondary a:hover, |
|
307 .secondary a:focus, |
|
308 .main-navigation .menu-item-description, |
|
309 .widget, |
|
310 .widget blockquote, |
|
311 .widget .wp-caption-text, |
|
312 .widget .gallery-caption { |
|
313 color: %2$s; |
|
314 } |
|
315 |
|
316 .widget button:hover, |
|
317 .widget button:focus, |
|
318 .widget input[type="button"]:hover, |
|
319 .widget input[type="button"]:focus, |
|
320 .widget input[type="reset"]:hover, |
|
321 .widget input[type="reset"]:focus, |
|
322 .widget input[type="submit"]:hover, |
|
323 .widget input[type="submit"]:focus, |
|
324 .widget_calendar tbody a:hover, |
|
325 .widget_calendar tbody a:focus { |
|
326 background-color: %2$s; |
|
327 } |
|
328 |
|
329 .widget blockquote { |
|
330 border-color: %2$s; |
|
331 } |
|
332 |
|
333 .main-navigation ul, |
|
334 .main-navigation li, |
|
335 .secondary-toggle, |
|
336 .widget input, |
|
337 .widget textarea, |
|
338 .widget table, |
|
339 .widget th, |
|
340 .widget td, |
|
341 .widget pre, |
|
342 .widget li, |
|
343 .widget_categories .children, |
|
344 .widget_nav_menu .sub-menu, |
|
345 .widget_pages .children, |
|
346 .widget abbr[title] { |
|
347 border-color: %3$s; |
|
348 } |
|
349 |
|
350 .dropdown-toggle:hover, |
|
351 .dropdown-toggle:focus, |
|
352 .widget hr { |
|
353 background-color: %3$s; |
|
354 } |
|
355 |
|
356 .widget input:focus, |
|
357 .widget textarea:focus { |
|
358 border-color: %4$s; |
|
359 } |
|
360 |
|
361 .sidebar a:focus, |
|
362 .dropdown-toggle:focus { |
|
363 outline-color: %4$s; |
|
364 } |
|
365 } |
|
366 '; |
|
367 |
|
368 wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) ); |
|
369 } |
|
370 add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 ); |
|