wordpressのカスタマイズ画面でヘッダーの色を変更できるようにしたい

wordpressでテーマの開発を行っています。
外観→カスタマイズからヘッダーの色を変更できるようにしたいです。
function.phpを使ってカスタマイズ画面にカラー設定を表示させることはできたのですが、色を指定してもカラーが反映されません。

function.php

PHP
1<?
2function my_customize_register($wp_customize) {
3    //セクション
4    $wp_customize->add_section('colors_section', array(
5      'title' => 'カラー設定'
6    ));
7
8    //セッティング
9    $wp_customize->add_setting('header_bgcolor', array(
10      'default' => '#EE8C72',
11      'sanitize_callback' => 'sanitize_hex_color',
12    ));
13
14  // コントローラー
15  $wp_customize->add_control(new WP_Customize_Color_Control($wp_customize, 'header_bgcolor', array(
16    'label' => 'ヘッダー背景色',
17    'description' => 'ヘッダーの背景色です。</small>',
18    'section' => 'colors_section',
19    'settings' => 'header_bgcolor',
20  )));
21}
22add_action( 'customize_register', 'my_customize_register' );
23function color_customize_css(){
24?>
25  <style type="text/css">
26    .header {
27      background: <?php echo get_theme_mod('header_bgcolor', '#EE8C72'); ?>;
28    }
29  </style>
30<?php
31}
32add_action( 'wp_head', 'color_customize_css');?>

header.php

PHP
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<link rel="stylesheet" href="<? bloginfo('template_url');?>/style.css">
6	</head>
7	
8<header>
9	<div class = "header">
10<div class="header-floor1">
11	<a href="<? bloginfo('url');?>">
12	<div class="header-floor1-title">
13	<h1><?php bloginfo('name'); ?></h1>
14	<span><?php bloginfo( 'description' ); ?></span>
15    </div>
16	</a>
17</div>
18	<div class="header-floor2">
19
20
21		<a class="header-floor2-item" href="<?bloginfo('url')?>/contact">
22Contact
23		</a>
24
25
26		<a class="header-floor2-item" href="<?bloginfo('url')?>/about">
27About
28		</a>	
29
30
31</div>
32<!-- <div class="header-floor2">
33	<?php for($i = 0;$i<wp_count_terms('category');$i++){?>
34	
35	<div class="header-floor2-item">
36	<a href="<?bloginfo('template_url')?>/category.php">
37<?$category = get_categories(); echo $category[$i]->cat_name;	?>
38		</a>
39   </div>
40    <?}?>
41
42</div>  -->
43	</div>
44</header>
45<html>
46	
47</html>

Style.css

CSS
1*{
2	margin:0;
3	font-family: "メイリオ";
4/* 	background:gray; */
5}
6.header{
7/* 	background:black; */
8}
9.header-floor1{
10	height:300px;
11	width:100%;
12/* 	background:pink; */
13}
14
15.header-floor1 a{
16text-decoration:none;
17}
18
19.header-floor1-title{
20	color:white;
21	width:40%;
22	margin:0 30%;
23	padding-top:100px;
24	text-align:center;
25	
26}
27
28
29.header-floor2{
30	height:50px;
31	width:100%;
32/* 	background:pink; */
33	color:white;
34/* 	border:1px solid; */
35	display:flex;
36}
37
38.header-floor2-item{
39	width:50%;
40	line-height:50px;
41	text-align:center;
42	text-decoration:none;
43	color:white;
44	 transition: background-color 0.5s;
45
46}
47
48.header-floor2-item:hover{
49background:black;
50	transition:background-color　0.5s;
51}
52
53.front-page{
54	display:flex;
55	margin:1% 15%;
56}
57
58.front-page-view{
59	width:63%;
60	height:auto;
61/* 	border:1px solid; */
62	margin:0 1%;
63}
64
65.front-page-view h1{
66	text-align:center;
67}
68
69.front-page-sidebar{
70	width:33%;
71/* 	border:1px solid; */
72	margin:0 1%;
73}
74
75.front-page-article{
76	width:100%;
77	display:inline;
78
79}
80.front-page-article img{
81	width:100%;
82	height:auto;
83	object-fit:cover;
84}
85
86.front-page-article a{
87	text-decoration: none;
88}
89
90.front-page-article h2{
91	color:black;
92	text-align:center;
93}
94
95.front-page-article h2{
96	color:black;
97	text-align:center;
98}
99
100.front-page-pagination {
101text-align:center;
102}
103
104.front-page-pagination h2{
105display:none;
106}
107
108.sidebar-back{
109	background:pink;
110	color:white;
111	width:100%;
112	height:50px;
113	text-align:center;
114}
115.sidebar-topic{
116	width:100%;
117}
118
119.sidebar-topic img{
120/* 	width:100%; */
121}
122
123.sidebar-about{
124	width:100%;
125}
126
127.sidebar-about h3{
128text-align:center;
129}
130
131.sidebar-about p{
132	width:100%;
133}
134
135.sidebar-about img{
136	width:100%;
137}
138
139
140
141.single{
142	display:flex;
143	margin:0 10%;
144	width:80%;
145}
146
147.single-thumbnail img{
148	width:100%;
149	height:100%;
150	object-fit:cover;
151}
152
153
154.single-title{
155text-align:center;
156}
157
158.single-contents{
159
160width:63%;
161margin:0 1%;
162
163}
164
165.single-sidebar{
166
167width:33%;
168margin:0 1%;
169}
170
171.single-contents h1,.single-contents h2,.single-contents h3{
172color:;
173text-align:center;
174margin:0 100px;
175}
176
177.single-contents h1:before,.single-contents h2:before,.single-contents h3:before{
178content:"✓";
179color:pink;
180}
181
182.page{
183	display:flex;
184	margin:0 10%;
185	width:80%;
186}
187
188.page-thumbnail img{
189	width:100%;
190	height:100%;
191	object-fit:cover;
192}
193
194
195.page-title{
196text-align:center;
197}
198
199.page-contents{
200
201width:63%;
202margin:0 1%;
203
204}
205
206.page-sidebar{
207
208width:33%;
209margin:0 1%;
210}
211
212.page-contents h1,.page-contents h2,.page-contents h3{
213color:;
214text-align:center;
215margin:0 100px;
216}
217
218.page-contents h1:before,.page-contents h2:before,.page-contents h3:before{
219content:"✓";
220color:pink;
221}
222
223
224footer{
225background:black;
226width:100%;
227height:100px;
228}
229
230.footer-string a{
231text-decoration:none;
232	color:white;
233}
234
235.footer-string{
236
237	width:40%;
238	margin:0 30%;
239	text-align:center;
240	padding-top:15px;
241}
242
243.search-result img{
244	width:100%;
245	height:auto;
246}
247
248.searchform{
249	padding-bottom:10px;
250	
251	padding-top:10px;
252	text-align:center;
253}
254
255.form{
256	text-align:center;
257}
258
259
260
261@media(max-width:1000px){
262	*{
263/* 		background:pink; */
264	}
265
266	.front-page{
267	display:block;
268	margin:10px 0%;
269}
270
271.front-page-view{
272	width:100%;
273/* 	border:1px solid; */
274	margin:0;
275}
276.front-page-sidebar{
277	width:100%;
278/* 	border:1px solid; */
279	margin:0;
280}
281
282.single{
283	display:block;
284	margin:100px 0%;
285	width:100%;
286}
287
288.single-contents{
289
290width:100%;
291margin:0 1%;
292
293}
294
295.single-sidebar{
296
297width:100%;
298margin:0 1%;
299}
300}

行動規範の内容に同意します

回答1件

ベストアンサー

<head>
       <meta charset="utf-8">
       <link rel="stylesheet" href="<? bloginfo('template_url');?>/style.css">
</head>

タイポでなければ、</head>の前に wp_head() がないからではないですか。

関数リファレンス/wp head
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_head

参考まで。

投稿2021/09/21 06:42

8-0_nyan5

総合スコア2352

Nemuu

2021/09/21 07:21

無事解決できました！初歩的なミスですいません… 本当にありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

wordpressのカスタマイズ画面でヘッダーの色を変更できるようにしたい

関連した質問