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

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

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

STINGER7のフッターに３カラムウィジェットを設置する

こちらがカスタマイズ完成イメージ。 先ほどと打って変わって好きなコンテンツを設置し放題です。

2016年04月12日

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

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

最終完成イメージ

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

PC表示

スマホ表示

ウィジェットに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つ増えたかと思います。

フッター（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>

<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;
}
}

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

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

背景画像素材

• Subtle Patterns

見出しデザイン

• シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld