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

stingerplus

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

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

通常stinger plusの初期状態ではこのよう空白があります。
1
このフッターを広げて端から端まで(全幅)にしていきましょう。

スポンサーリンク

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上部の

の上へ切り取り+ペーストしてください。こんな感じ

</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>

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

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

ふと気づくと、ヘッダーの右側に謎の隙間が出ていました。
2
調べると、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に下記のコードを追加します。

.wrap-foot {
	overflow: hidden;
}

これでこのようにヘッダーにできた隙間がなくなります。
3

あとはフッターの背景色を変更するなり、お好みのフッターにしてください。

以上、ぷるぷるでした。

コメント