author | ymh <ymh.work@gmail.com> |
Mon, 14 Oct 2019 18:30:03 +0200 | |
changeset 10 | 372f2766ea20 |
parent 7 | cf61fcea0001 |
permissions | -rw-r--r-- |
0 | 1 |
<?php |
2 |
/** |
|
3 |
* Implement a custom header for Twenty Thirteen |
|
4 |
* |
|
5 | 5 |
* @link https://codex.wordpress.org/Custom_Headers |
0 | 6 |
* |
7 |
* @package WordPress |
|
8 |
* @subpackage Twenty_Thirteen |
|
9 |
* @since Twenty Thirteen 1.0 |
|
10 |
*/ |
|
11 |
||
12 |
/** |
|
13 |
* Set up the WordPress core custom header arguments and settings. |
|
14 |
* |
|
15 |
* @uses add_theme_support() to register support for 3.4 and up. |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
16 |
* @uses twentythirteen_header_style() to style front end. |
0 | 17 |
* @uses twentythirteen_admin_header_style() to style wp-admin form. |
18 |
* @uses twentythirteen_admin_header_image() to add custom markup to wp-admin form. |
|
19 |
* @uses register_default_headers() to set up the bundled header images. |
|
20 |
* |
|
21 |
* @since Twenty Thirteen 1.0 |
|
22 |
*/ |
|
23 |
function twentythirteen_custom_header_setup() { |
|
24 |
$args = array( |
|
25 |
// Text color and image (empty to use none). |
|
26 |
'default-text-color' => '220e10', |
|
27 |
'default-image' => '%s/images/headers/circle.png', |
|
28 |
||
29 |
// Set height and width, with a maximum value for the width. |
|
30 |
'height' => 230, |
|
31 |
'width' => 1600, |
|
32 |
||
33 |
// Callbacks for styling the header and the admin preview. |
|
34 |
'wp-head-callback' => 'twentythirteen_header_style', |
|
35 |
'admin-head-callback' => 'twentythirteen_admin_header_style', |
|
36 |
'admin-preview-callback' => 'twentythirteen_admin_header_image', |
|
37 |
); |
|
38 |
||
39 |
add_theme_support( 'custom-header', $args ); |
|
40 |
||
41 |
/* |
|
42 |
* Default custom headers packaged with the theme. |
|
43 |
* %s is a placeholder for the theme template directory URI. |
|
44 |
*/ |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
45 |
register_default_headers( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
46 |
array( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
47 |
'circle' => array( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
48 |
'url' => '%s/images/headers/circle.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
49 |
'thumbnail_url' => '%s/images/headers/circle-thumbnail.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
50 |
'description' => _x( 'Circle', 'header image description', 'twentythirteen' ), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
51 |
), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
52 |
'diamond' => array( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
53 |
'url' => '%s/images/headers/diamond.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
54 |
'thumbnail_url' => '%s/images/headers/diamond-thumbnail.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
55 |
'description' => _x( 'Diamond', 'header image description', 'twentythirteen' ), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
56 |
), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
57 |
'star' => array( |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
58 |
'url' => '%s/images/headers/star.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
59 |
'thumbnail_url' => '%s/images/headers/star-thumbnail.png', |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
60 |
'description' => _x( 'Star', 'header image description', 'twentythirteen' ), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
61 |
), |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
62 |
) |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
63 |
); |
0 | 64 |
} |
65 |
add_action( 'after_setup_theme', 'twentythirteen_custom_header_setup', 11 ); |
|
66 |
||
67 |
/** |
|
68 |
* Load our special font CSS files. |
|
69 |
* |
|
70 |
* @since Twenty Thirteen 1.0 |
|
71 |
*/ |
|
72 |
function twentythirteen_custom_header_fonts() { |
|
73 |
// Add Source Sans Pro and Bitter fonts. |
|
74 |
wp_enqueue_style( 'twentythirteen-fonts', twentythirteen_fonts_url(), array(), null ); |
|
75 |
||
76 |
// Add Genericons font. |
|
10 | 77 |
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.3' ); |
0 | 78 |
} |
79 |
add_action( 'admin_print_styles-appearance_page_custom-header', 'twentythirteen_custom_header_fonts' ); |
|
80 |
||
81 |
/** |
|
82 |
* Style the header text displayed on the blog. |
|
83 |
* |
|
84 |
* get_header_textcolor() options: Hide text (returns 'blank'), or any hex value. |
|
85 |
* |
|
86 |
* @since Twenty Thirteen 1.0 |
|
87 |
*/ |
|
88 |
function twentythirteen_header_style() { |
|
89 |
$header_image = get_header_image(); |
|
90 |
$text_color = get_header_textcolor(); |
|
91 |
||
92 |
// If no custom options for text are set, let's bail. |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
93 |
if ( empty( $header_image ) && $text_color == get_theme_support( 'custom-header', 'default-text-color' ) ) { |
0 | 94 |
return; |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
95 |
} |
0 | 96 |
|
97 |
// If we get this far, we have custom styles. |
|
98 |
?> |
|
99 |
<style type="text/css" id="twentythirteen-header-css"> |
|
100 |
<?php |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
101 |
if ( ! empty( $header_image ) ) : |
10 | 102 |
?> |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
103 |
.site-header { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
104 |
background: url(<?php header_image(); ?>) no-repeat scroll top; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
105 |
background-size: 1600px auto; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
106 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
107 |
@media (max-width: 767px) { |
0 | 108 |
.site-header { |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
109 |
background-size: 768px auto; |
0 | 110 |
} |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
111 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
112 |
@media (max-width: 359px) { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
113 |
.site-header { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
114 |
background-size: 360px auto; |
5 | 115 |
} |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
116 |
} |
10 | 117 |
<?php |
0 | 118 |
endif; |
119 |
||
120 |
// Has the text been hidden? |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
121 |
if ( ! display_header_text() ) : |
10 | 122 |
?> |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
123 |
.site-title, |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
124 |
.site-description { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
125 |
position: absolute; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
126 |
clip: rect(1px 1px 1px 1px); /* IE7 */ |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
127 |
clip: rect(1px, 1px, 1px, 1px); |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
128 |
} |
10 | 129 |
<?php |
130 |
if ( empty( $header_image ) ) : |
|
131 |
?> |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
132 |
.site-header .home-link { |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
133 |
min-height: 0; |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
134 |
} |
10 | 135 |
<?php |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
136 |
endif; |
0 | 137 |
|
138 |
// If the user has set a custom color for the text, use that. |
|
139 |
elseif ( $text_color != get_theme_support( 'custom-header', 'default-text-color' ) ) : |
|
10 | 140 |
?> |
0 | 141 |
.site-title, |
142 |
.site-description { |
|
143 |
color: #<?php echo esc_attr( $text_color ); ?>; |
|
144 |
} |
|
145 |
<?php endif; ?> |
|
146 |
</style> |
|
147 |
<?php |
|
148 |
} |
|
149 |
||
150 |
/** |
|
151 |
* Style the header image displayed on the Appearance > Header admin panel. |
|
152 |
* |
|
153 |
* @since Twenty Thirteen 1.0 |
|
154 |
*/ |
|
155 |
function twentythirteen_admin_header_style() { |
|
156 |
$header_image = get_header_image(); |
|
10 | 157 |
?> |
0 | 158 |
<style type="text/css" id="twentythirteen-admin-header-css"> |
159 |
.appearance_page_custom-header #headimg { |
|
160 |
border: none; |
|
161 |
-webkit-box-sizing: border-box; |
|
162 |
-moz-box-sizing: border-box; |
|
163 |
box-sizing: border-box; |
|
164 |
<?php |
|
165 |
if ( ! empty( $header_image ) ) { |
|
166 |
echo 'background: url(' . esc_url( $header_image ) . ') no-repeat scroll top; background-size: 1600px auto;'; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
167 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
168 |
?> |
0 | 169 |
padding: 0 20px; |
170 |
} |
|
171 |
#headimg .home-link { |
|
172 |
-webkit-box-sizing: border-box; |
|
173 |
-moz-box-sizing: border-box; |
|
174 |
box-sizing: border-box; |
|
175 |
margin: 0 auto; |
|
176 |
max-width: 1040px; |
|
177 |
<?php |
|
178 |
if ( ! empty( $header_image ) || display_header_text() ) { |
|
179 |
echo 'min-height: 230px;'; |
|
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
180 |
} |
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
181 |
?> |
0 | 182 |
width: 100%; |
183 |
} |
|
184 |
<?php if ( ! display_header_text() ) : ?> |
|
185 |
#headimg h1, |
|
186 |
#headimg h2 { |
|
187 |
position: absolute !important; |
|
188 |
clip: rect(1px 1px 1px 1px); /* IE7 */ |
|
189 |
clip: rect(1px, 1px, 1px, 1px); |
|
190 |
} |
|
191 |
<?php endif; ?> |
|
192 |
#headimg h1 { |
|
193 |
font: bold 60px/1 Bitter, Georgia, serif; |
|
194 |
margin: 0; |
|
195 |
padding: 58px 0 10px; |
|
196 |
} |
|
197 |
#headimg h1 a { |
|
198 |
text-decoration: none; |
|
199 |
} |
|
200 |
#headimg h1 a:hover { |
|
201 |
text-decoration: underline; |
|
202 |
} |
|
203 |
#headimg h2 { |
|
204 |
font: 200 italic 24px "Source Sans Pro", Helvetica, sans-serif; |
|
205 |
margin: 0; |
|
206 |
text-shadow: none; |
|
207 |
} |
|
208 |
.default-header img { |
|
209 |
max-width: 230px; |
|
210 |
width: auto; |
|
211 |
} |
|
212 |
</style> |
|
10 | 213 |
<?php |
0 | 214 |
} |
215 |
||
216 |
/** |
|
217 |
* Output markup to be displayed on the Appearance > Header admin panel. |
|
218 |
* |
|
219 |
* This callback overrides the default markup displayed there. |
|
220 |
* |
|
221 |
* @since Twenty Thirteen 1.0 |
|
222 |
*/ |
|
223 |
function twentythirteen_admin_header_image() { |
|
5 | 224 |
$style = 'color: #' . get_header_textcolor() . ';'; |
225 |
if ( ! display_header_text() ) { |
|
226 |
$style = 'display: none;'; |
|
227 |
} |
|
0 | 228 |
?> |
5 | 229 |
<div id="headimg" style="background: url(<?php echo esc_url( get_header_image() ); ?>) no-repeat scroll top; background-size: 1600px auto;"> |
0 | 230 |
<div class="home-link"> |
5 | 231 |
<h1 class="displaying-header-text"><a id="name" style="<?php echo esc_attr( $style ); ?>" onclick="return false;" href="#" tabindex="-1"><?php bloginfo( 'name' ); ?></a></h1> |
232 |
<h2 id="desc" class="displaying-header-text" style="<?php echo esc_attr( $style ); ?>"><?php bloginfo( 'description' ); ?></h2> |
|
0 | 233 |
</div> |
234 |
</div> |
|
10 | 235 |
<?php |
7
cf61fcea0001
resynchronize code repo with production
ymh <ymh.work@gmail.com>
parents:
5
diff
changeset
|
236 |
} |