STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法

stinger8-footer-3column-customize-thumbnail

STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。

STINGER7をご利用の方はこちらの記事をご覧ください。

STINGER8のフッターに3カラムウィジェットを設置

それでは実際にカスタマイズをおこなっていきます。

最終完成イメージ

全体のデザインは、CSSをSTINGER8用に変更しただけなので、以前のものと同じです。

PC表示

stinger8-footer-3column-customize-01

スマホ表示

stinger8-footer-3column-customize-02

ウィジェットに3カラム用ウィジェットを追加

まず、3カラム用のウィジェットを作成します。こちらはSTINGER7のときに紹介したものと同じです。

以下のコードをfunctions.phpに追加してください。

//フッターウィジェット追加
register_sidebar( array(
'id' => 'footer-left',
'name' => 'フッター左',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-center',
'name' => 'フッター中央',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-right',
'name' => 'フッター右',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));

これで、ウィジェットが3つ増えたかと思います。

stinger8-footer-3column-customize-04

フッター(footer.php)のカスタマイズ

STINGER8は、コードがAFFINGER4ベースになっているので、STINGER7と少し構造が異なります。

以下にfooter.phpの全コードを紹介します。コピペして全て上書きすれば、当ブログと同じになります。

</div><!-- /contentw -->
<div id="foot-wrapper">
<footer>
<div id="footer">
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clearfix">
<div id="footer-in">
<?php //フッターメニュー
$defaults = array(
'theme_location'  => 'secondary-menu',
'container'       => 'div',
'container_class' => 'footermenubox clearfix ',
'menu_class'      => 'footermenust',
'depth'           => 1,
);
wp_nav_menu( $defaults );
?>
<p class="copy">Copyright&copy;
<?php echo date( 'Y' ); ?>
<?php bloginfo( 'name' ); ?>
All Rights Reserved.</p>
</div>
</div>
</footer>
</div>
<!-- /#wrapperin -->
</div>
<!-- /#wrapper -->
</div><!-- /#st-ami -->
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
</div>
<!-- /#foot-wrapper -->
<?php wp_footer(); ?>
</body></html>
STINGERシリーズは、フッターにブログタイトルと説明文がありますが、その分フッターが縦に長くなるのが嫌いなので私は削除しています。必要な方は、以下のコードを残してください。
<div class="footer-wbox clearfix">
<div class="footer-c">
<!-- フッターのメインコンテンツ -->
<p class="footerlogo">
<!-- ロゴ又はブログ名 -->
<?php if ( !is_home() || !is_front_page() ) { ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php } ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php if ( !is_home() || !is_front_page() ) { ?>
</a>
<?php } ?>
</p>
<p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
</p>
</div>
</div>

CSSで整える

最後にカスタマイズ用CSSを記述します。

.clearfix {
clear: both;
}
/*--------------------------------------
フッター
--------------------------------------*/
#foot-wrapper {
width: 100%;
padding: 0 auto;
margin: 0 auto;
color: #fff;
border-top: 1px solid #333;
background-image: url("フッター背景画像URL");
}
#footer {
max-width: 1060px;
margin: 0 auto;
}
#footer textwidget p, #footer li {
text-align: left;
}
#footer-in {
margin-left: -5px;
}
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
#footer h4.menu_underh2 {
font-size: 18px;
font-weight: 200;
border-left: 6px solid #0489B1;
padding: 3px 0 3px 6px;
margin-bottom: 10px;
text-align: left;
}
#footer>aside ul {
float: left;
width: 320px;
padding: 10px 0;
list-style-type: none;
}
#footer>aside .tagcloud a {
font-size: 14px;
line-height: 1em;
background: #fff;
color: #333;
display: inline-block;
white-space: nowrap;
padding: 8px 8px;
margin-top: 3px;
text-decoration: none;
}
#footer>aside .tagcloud a:hover {
background: #333;
color: #fff;
}
#footer>aside .tagcloud a:before {
font-family: "FontAwesome";
content: "\f02b";
}
@media only screen and (min-width: 780px) {
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
#footer h4.menu_underh2 {
font-size: 18px;
font-weight: 200;
border-left: 6px solid #0489B1;
padding: 3px 0 3px 6px;
margin-bottom: 10px;
text-align: left;
}
#footer>aside ul {
float: left;
width: 320px;
padding: 10px;
list-style-type: none;
}
p#subscribe-email input.required {
width: 280px;
float: left;
}
p#subscribe-submit {
float: right;
color: #333;
}
}
media Queriesの指定サイズは人によって異なる場合があるかもしれません。私はSTINGER7のときのサイズを使っているのですが、もしほかのサイズを指定している方は表示がうまくいかない可能性があります。

無料素材・デザイン参考サイト

壁紙や見出しのデザインは以下のサイトからお借りしています。

背景画像素材

見出しデザイン

stinger8-footer-3column-customize-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで