5
|
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 ); |