author | ymh <ymh.work@gmail.com> |
Mon, 14 Oct 2019 17:39:30 +0200 | |
changeset 7 | cf61fcea0001 |
parent 5 | 5e2f62d02dcd |
permissions | -rw-r--r-- |
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 { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
136 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
137 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
138 |
* No shorthand so the Customizer can override individual properties. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
139 |
* @see https://core.trac.wordpress.org/ticket/31460 |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
140 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
141 |
background-image: url(<?php header_image(); ?>); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
142 |
background-repeat: no-repeat; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
143 |
background-position: 50% 50%; |
5 | 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 { |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
152 |
|
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
153 |
/* |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
154 |
* No shorthand so the Customizer can override individual properties. |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
155 |
* @see https://core.trac.wordpress.org/ticket/31460 |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
156 |
*/ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
157 |
background-image: url(<?php header_image(); ?>); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
158 |
background-repeat: no-repeat; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
159 |
background-position: 100% 50%; |
5 | 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 ); |