|
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 background: url(<?php header_image(); ?>) no-repeat 50% 50%; |
|
137 -webkit-background-size: cover; |
|
138 -moz-background-size: cover; |
|
139 -o-background-size: cover; |
|
140 background-size: cover; |
|
141 } |
|
142 |
|
143 @media screen and (min-width: 59.6875em) { |
|
144 body:before { |
|
145 background: url(<?php header_image(); ?>) no-repeat 100% 50%; |
|
146 -webkit-background-size: cover; |
|
147 -moz-background-size: cover; |
|
148 -o-background-size: cover; |
|
149 background-size: cover; |
|
150 border-right: 0; |
|
151 } |
|
152 |
|
153 .site-header { |
|
154 background: transparent; |
|
155 } |
|
156 } |
|
157 <?php |
|
158 endif; |
|
159 |
|
160 // Has the text been hidden? |
|
161 if ( ! display_header_text() ) : |
|
162 ?> |
|
163 .site-title, |
|
164 .site-description { |
|
165 clip: rect(1px, 1px, 1px, 1px); |
|
166 position: absolute; |
|
167 } |
|
168 <?php endif; ?> |
|
169 </style> |
|
170 <?php |
|
171 } |
|
172 endif; // twentyfifteen_header_style |
|
173 |
|
174 /** |
|
175 * Enqueues front-end CSS for the header background color. |
|
176 * |
|
177 * @since Twenty Fifteen 1.0 |
|
178 * |
|
179 * @see wp_add_inline_style() |
|
180 */ |
|
181 function twentyfifteen_header_background_color_css() { |
|
182 $color_scheme = twentyfifteen_get_color_scheme(); |
|
183 $default_color = $color_scheme[1]; |
|
184 $header_background_color = get_theme_mod( 'header_background_color', $default_color ); |
|
185 |
|
186 // Don't do anything if the current color is the default. |
|
187 if ( $header_background_color === $default_color ) { |
|
188 return; |
|
189 } |
|
190 |
|
191 $css = ' |
|
192 /* Custom Header Background Color */ |
|
193 body:before, |
|
194 .site-header { |
|
195 background-color: %1$s; |
|
196 } |
|
197 |
|
198 @media screen and (min-width: 59.6875em) { |
|
199 .site-header, |
|
200 .secondary { |
|
201 background-color: transparent; |
|
202 } |
|
203 |
|
204 .widget button, |
|
205 .widget input[type="button"], |
|
206 .widget input[type="reset"], |
|
207 .widget input[type="submit"], |
|
208 .widget_calendar tbody a, |
|
209 .widget_calendar tbody a:hover, |
|
210 .widget_calendar tbody a:focus { |
|
211 color: %1$s; |
|
212 } |
|
213 } |
|
214 '; |
|
215 |
|
216 wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $header_background_color ) ); |
|
217 } |
|
218 add_action( 'wp_enqueue_scripts', 'twentyfifteen_header_background_color_css', 11 ); |
|
219 |
|
220 /** |
|
221 * Enqueues front-end CSS for the sidebar text color. |
|
222 * |
|
223 * @since Twenty Fifteen 1.0 |
|
224 */ |
|
225 function twentyfifteen_sidebar_text_color_css() { |
|
226 $color_scheme = twentyfifteen_get_color_scheme(); |
|
227 $default_color = $color_scheme[4]; |
|
228 $sidebar_link_color = get_theme_mod( 'sidebar_textcolor', $default_color ); |
|
229 |
|
230 // Don't do anything if the current color is the default. |
|
231 if ( $sidebar_link_color === $default_color ) { |
|
232 return; |
|
233 } |
|
234 |
|
235 // If we get this far, we have custom styles. Let's do this. |
|
236 $sidebar_link_color_rgb = twentyfifteen_hex2rgb( $sidebar_link_color ); |
|
237 $sidebar_text_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.7)', $sidebar_link_color_rgb ); |
|
238 $sidebar_border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.1)', $sidebar_link_color_rgb ); |
|
239 $sidebar_border_focus_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.3)', $sidebar_link_color_rgb ); |
|
240 |
|
241 $css = ' |
|
242 /* Custom Sidebar Text Color */ |
|
243 .site-title a, |
|
244 .site-description, |
|
245 .secondary-toggle:before { |
|
246 color: %1$s; |
|
247 } |
|
248 |
|
249 .site-title a:hover, |
|
250 .site-title a:focus { |
|
251 color: %1$s; /* Fallback for IE7 and IE8 */ |
|
252 color: %2$s; |
|
253 } |
|
254 |
|
255 .secondary-toggle { |
|
256 border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
257 border-color: %3$s; |
|
258 } |
|
259 |
|
260 .secondary-toggle:hover, |
|
261 .secondary-toggle:focus { |
|
262 border-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
263 border-color: %4$s; |
|
264 } |
|
265 |
|
266 .site-title a { |
|
267 outline-color: %1$s; /* Fallback for IE7 and IE8 */ |
|
268 outline-color: %4$s; |
|
269 } |
|
270 |
|
271 @media screen and (min-width: 59.6875em) { |
|
272 .secondary a, |
|
273 .dropdown-toggle:after, |
|
274 .widget-title, |
|
275 .widget blockquote cite, |
|
276 .widget blockquote small { |
|
277 color: %1$s; |
|
278 } |
|
279 |
|
280 .widget button, |
|
281 .widget input[type="button"], |
|
282 .widget input[type="reset"], |
|
283 .widget input[type="submit"], |
|
284 .widget_calendar tbody a { |
|
285 background-color: %1$s; |
|
286 } |
|
287 |
|
288 .textwidget a { |
|
289 border-color: %1$s; |
|
290 } |
|
291 |
|
292 .secondary a:hover, |
|
293 .secondary a:focus, |
|
294 .main-navigation .menu-item-description, |
|
295 .widget, |
|
296 .widget blockquote, |
|
297 .widget .wp-caption-text, |
|
298 .widget .gallery-caption { |
|
299 color: %2$s; |
|
300 } |
|
301 |
|
302 .widget button:hover, |
|
303 .widget button:focus, |
|
304 .widget input[type="button"]:hover, |
|
305 .widget input[type="button"]:focus, |
|
306 .widget input[type="reset"]:hover, |
|
307 .widget input[type="reset"]:focus, |
|
308 .widget input[type="submit"]:hover, |
|
309 .widget input[type="submit"]:focus, |
|
310 .widget_calendar tbody a:hover, |
|
311 .widget_calendar tbody a:focus { |
|
312 background-color: %2$s; |
|
313 } |
|
314 |
|
315 .widget blockquote { |
|
316 border-color: %2$s; |
|
317 } |
|
318 |
|
319 .main-navigation ul, |
|
320 .main-navigation li, |
|
321 .secondary-toggle, |
|
322 .widget input, |
|
323 .widget textarea, |
|
324 .widget table, |
|
325 .widget th, |
|
326 .widget td, |
|
327 .widget pre, |
|
328 .widget li, |
|
329 .widget_categories .children, |
|
330 .widget_nav_menu .sub-menu, |
|
331 .widget_pages .children, |
|
332 .widget abbr[title] { |
|
333 border-color: %3$s; |
|
334 } |
|
335 |
|
336 .dropdown-toggle:hover, |
|
337 .dropdown-toggle:focus, |
|
338 .widget hr { |
|
339 background-color: %3$s; |
|
340 } |
|
341 |
|
342 .widget input:focus, |
|
343 .widget textarea:focus { |
|
344 border-color: %4$s; |
|
345 } |
|
346 |
|
347 .sidebar a:focus, |
|
348 .dropdown-toggle:focus { |
|
349 outline-color: %4$s; |
|
350 } |
|
351 } |
|
352 '; |
|
353 |
|
354 wp_add_inline_style( 'twentyfifteen-style', sprintf( $css, $sidebar_link_color, $sidebar_text_color, $sidebar_border_color, $sidebar_border_focus_color ) ); |
|
355 } |
|
356 add_action( 'wp_enqueue_scripts', 'twentyfifteen_sidebar_text_color_css', 11 ); |