wordpressのテーマ制作中に、ウィジェットを追加したところfooterがずれて戻らない

前提・実現したいこと

wordpressテーマを制作しております。
テーマ化して初めてウィジェットを追加した際に問題が発生しました。
メインのコンテンツの要素幅が変わっても、footerが崩れないようにしたいです。

発生している問題・エラーメッセージ

最初は問題なかったのですが、ウィジェットを追加して増やしたところ、下に固定していたはずのfooterが、画面右下にずれてしまいました。その後ウィジェットを増やしたり減らしたりしても動きに変化がありません。
こちらをサイドバーウィジェットが増えても、footer要素を常に一番下に固定したいのですが、デベロッパーツールで見るとどうやらfooterが、<?php dynamic_sidebar('sidebar-widget'); ?>で自動的に付与されるidの中に入ってしまっているのが原因のようなのですが、とじタグも確認しましたがなぜそうなっているか、原因が掴めずにいます。
どなたかご教授いただけましたら幸いです。

該当のソースコード

php
1<!DOCTYPE html>
2<html <?php language_attributes(); ?>>
3<head>
4    <meta charset="<?php bloginfo('charset'); ?>">
5    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
6    <?php wp_head(); ?>
7</head>
8
9<body <?php body_class(); ?>>
10 
11<div id="main">
12    <div class="top-section-wrap">
13   <!-- ▼Adスペース :開始 -->
14    <div class="ad-header-above">
15        <span class="ad-space">
16            <img src="<?php echo esc_url(get_theme_file_uri('/img/pattern.jpg')); ?>" alt="ad-sample">
17        </span>
18    </div>
19    
20    <!-- ▲Adスペース :終了 -->
21
22    <!-- header▼開始 -->
23  <header>
24    <div class="header-wrap">
25        
26            <div class="header-top">
27                <div class="title-container">
28                <h1 class="top-title"><?php bloginfo('name'); ?></h1>
29                </div>
30                <div class="social-container">
31                    <ul class="social-icons">
32                        <li class="icons">
33                           <a href="<?php echo esc_url(home_url('/')); ?>">
34                               <img src="<?php echo esc_url(get_theme_file_uri('/img/instagram.png')); ?>" alt="insta" class="share-icon-size">
35                            </a>
36                        </li>
37                        <li class="icons">
38                            <a href="<?php echo esc_url(home_url('/')); ?>">
39                                <img src="<?php echo esc_url(get_theme_file_uri('/img/twitter.png')); ?>" alt="twitter" class="share-icon-size">
40                             </a>
41                         </li>
42                         <li class="icons">
43                            <a href="<?php echo esc_url(home_url('/')); ?>">
44                                <img src="<?php echo esc_url(get_theme_file_uri('/img/facebook.png')); ?>" alt="facebook" class="share-icon-size">
45                             </a>
46                         </li>
47                    </ul>
48                </div>
49            </div>
50        </div>
51
52        <!-- navigation-menu -->
53        <?php wp_nav_menu( 
54            array(
55                'theme_location' => 'globalnav',
56                'container'      => 'div',
57                'container_class'=> 'c-global-nav',
58
59            ));?>
60    </div>
61</header>
62<!-- ▲ navigation : 終了-->
63<!-- ▲ header : 終了-->
64
65
66
67
68<!-- ▼メインコンテンツ -->
69       <!-- <div class="content-colums"> -->
70            <div class="couple-wrap">
71
72        <!-- ▼記事 (Left)-->
73            
74                <div class="left-colums">
75                   <div class="post-list">
76
77                       <?php if( have_posts() ): ?>
78                            <?php while ( have_posts() ): ?>
79                                <?php the_post(); ?>
80
81                       <article <?php post_class(); ?>>
82                        <a href="<?php the_permalink(); ?>">
83                        
84                        <div class="post-thumbnail">
85                             <?php if( has_post_thumbnail()): ?>
86                                <?php the_post_thumbnail(); ?>
87                                <?php else: ?>
88
89                                    <img src="<?php echo esc_url(get_theme_file_uri('/img/sample.jpg')); ?>" alt="sample" class="p-img">
90
91                                <?php endif; ?>
92                        </div>
93                        </a>
94                            <div class="caption">
95                                <div class="single-post-title"><?php the_title(); ?></div>
96                                <div class="date"><?php the_time('Y/n/j');?></div>
97
98                                    <p class="toukou">
99                                        <?php the_excerpt(); ?>
100                                    </p>
101                            </div>
102                       </article>
103                     <!-- ▲記事 (Left) :終了-->
104                            <?php endwhile; //投稿ループ終了 ?>
105                <!-- ▼ページネーション:開始 -->
106                 <?php the_posts_pagination(); ?>
107                               
108                <!-- ▲ページネーション：終了 -->
109                            <?php else: ?>
110                                <p>表示できる記事はまだありません</p>
111                            <?php endif; ?>
112                     </div>
113                </div>
114        <!-- ▼Side-bar-section (Right):開始 -->
115              <div class="right-columus">
116
117                <!-- ad-写真スペース -->
118                    <div class="ad-img-section">
119                        <img src="<?php echo esc_url(get_theme_file_uri('/img/coconuts.jpg')); ?>" alt="sample-img" class="wiget-img">
120                    </div>
121
122                <!-- category-wiget エリア   -->
123                <div class="wiget-right">
124                    <?php dynamic_sidebar('sidebar-widget'); ?>
125                </div>
126            </div>
127            
128        <!-- ▲Side-bar-section (Right):終了 -->
129        </div>
130    <!-- ▲main-contents :終了 -->
131<!-- ▼footer開始 -->
132
133
134<div class="footer-container">
135    <footer class="footer">
136        
137            <p class="company">@<?php bloginfo('name'); ?>All Rights reserved.</p>
138        
139    </footer>
140    </div>
141   
142    </div>
143    <?php wp_footer(); ?>
144    
145</body>
146</html>
147
148<!-- ▲footer終了 -->

css
1@charset "utf-8";
2
3/*
4Theme Name: Mywordpress01
5Description: First original theme
6Author:cokinae
7*/
8html{
9    /* ▼new try; */
10    min-height: 100%;
11    position: relative;
12}
13body{
14    margin: 0;
15    padding: 0;
16    width: 100%;
17    margin-bottom: 200px;
18    font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic,'Poppins', sans-serif;
19}
20footer.footer{
21    width: 100%;
22    background: black;
23    display: flex;
24    justify-content: center;
25    align-items: center;
26    height: 200px;
27}
28.footer-container{
29    bottom: 0;
30    height: 200px;
31    position: absolute;
32    width: 100%;
33}
34
35

試したこと

•フッター下部固定する方法はflexboxも試しました。
参考にさせていただいたのは以下です。

css
1body,
2#wrapper {
3  display: flex;
4  flex-direction: column;
5  min-height: 100vh;
6}
7 
8footer {
9  margin-top: auto;
10}

こちらを自分に置き換えてやったのですが変化がありませんでした。

•また、一度phpの記述を無くしてhtml•cssのみの状態で確認表示したところ、footerは正常に下部に固定されており、親要素は#mainになっており問題ありませんでした。

PHP Version 7.2.10です。
お手数おかけしますがよろしくお願いいたします。

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

回答2件

（修正・追記）
すみません、上の階層を見落としておりまして……

PHP
1<div class="top-section-wrap">
2    <div class="ad-header-above">
3          <!--省略-->
4    </div>
5    <header>
6          <div class="header-wrap">
7                <!--省略-->
8          </div>
9    </header>
10</div>

このような入れ子構造を想定しておられますか？
もしそうでしたら末尾の</div>が</header>と入れ替わっているため、エラーが出ているように見受けられます。

<header>等のタグも入れ子構造を守らないとエラーのもとになりますので、一度コーディングをご確認ください。場合によってはCSSのセレクタも修正が必要になるかもしれません。

投稿2020/02/14 05:50

編集2020/02/14 06:30

takamura_leo

総合スコア6

cokinae

2020/02/14 06:00

こんにちは、ご回答いただきありがとうございます。はい、インデントのせいで見辛くなっていることも反省しており、これから意識していきたいと思います！確認しましたところ、ひとつが<div class="top-section-wrap">、もう１つが<div class="header-wrap">に対する</div>で、消したところヘッダーのレイアウトが崩れてしまい、footerの様子も変化がないのでここではない可能性があります。

takamura_leo

2020/02/14 06:25

失礼しました、上の階層を見落としておりまして…… 回答を修正いたしましたので、一度ご確認いただけますと幸いです。

cokinae

2020/02/14 06:47 編集

とんでもないです、ご回答ありがとうございます！確認したところ、確かに</div>が</header>と入れ替わっていました！ご指摘ありがとうございます。ここは修正できたのですが、やはり動きに改善が見られません。ウィジェットを少なくすると戻り、１つずつ増やすにつれてどんどん右にずれていっている様子です。footerが右にずれていくたびに、右側にスクロールで揺れるようになっています。何かwidthの表記やpxなのが問題の可能性もあるのか、引き続き試して見たいと思っております。

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