【WordPress】STINGER PLUSでフッターを全幅にする方法

ヘッダーを全幅にするなら、フッターも全幅にしたい！！
そう思いませんか？

今回は、前回のヘッダーを全幅にする方法に続き、
フッターを全幅にする方法を説明します。

通常stinger plusの初期状態ではこのよう空白があります。

このフッターを広げて端から端まで（全幅）にしていきましょう。

footer.phpをいじる
ヘッダーの右側に謎の隙間が！！
コピペも良いですが・・・

新たにレンタルサーバーを選ぶならこれ！

エックスサーバー

国内シェアNo.1の高速サーバーなのでストレスフリー！
自動バックアップ機能に標準対応で安心運用可能！

気になるポイント！	キャンペーン中に契約すれば.com等のドメインを永久無料で使えます！

WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません！またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます！またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

footer.phpをいじる

それではいつものように子テーマにfooter.phpをコピーして、
作業していきましょう。

下記はfooter.phpの下のあたりのコードです。

	<p class="copy">Copyright&copy;
		<?php bloginfo( 'name' ); ?>
		,
		<?php echo date( 'Y' ); ?>
		All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->
<?php wp_enqueue_script( 'base', get_template_directory_uri() . '/js/base.js', array() ); ?>
<?php if ( st_is_mobile() ) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
	<?php wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array() ); ?>
<?php } ?>

<?php wp_footer(); ?>
</body></html>

この2行を見つけましょう。

</div>
<!-- /#wrapper -->

見つけたらこの2行をfooter.php上部の

＜footer id=”footer”＞の上へ切り取り+ペーストしてください。こんな感じ

</div>
<!-- /#wrapper -->
<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>

<?php if ( is_active_sidebar( 11 ) ) { //フッターウィジェットがある場合 ?>
	<div class="footer-wbox clearfix">

		<div class="footer-r">
			<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 11 ) ) : else : //フッターウィジェット ?>
			<?php endif; ?>
		</div>
		<div class="footer-l">
			<?php get_template_part( 'st-footer-content' ); //フッターのメインコンテンツ ?>
		</div>

フッターの場合ほとんどこれで全幅が完成ですが…

ヘッダーの右側に謎の隙間が！！

ふと気づくと、ヘッダーの右側に謎の隙間が出ていました。

調べると、footerの幅だけ,他のheaderやbodyの幅よりも大きくなっていました。
これを何が何でもなくさなければ！

先ほど切り取り+ペーストをした
<!– /#wrapper –>の下に
下記の様に、<div class=”wrap-foot”>を入力します。

 </div>
<!-- /#wrapper -->
<div class="wrap-foot">
<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>

<?php if ( is_active_sidebar( 11 ) ) { //フッターウィジェットがある場合 ?>
	<div class="footer-wbox clearfix">

そして

の下に<!— /.wrap-foot —>

を入力します

<?php }else{ ?>
	<?php get_template_part( 'st-footer-content' ); //フッターのメインコンテンツ ?>
<?php } ?>
	<p class="copy">Copyright&copy;
		<?php bloginfo( 'name' ); ?>
		,
		<?php echo date( 'Y' ); ?>
		All Rights Reserved.</p>
</footer>
<!-- /.wrap-foot --></div>

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->

そしてstyle.cssに下記のコードを追加します。