Lognote

ネット集客に強い整体院サイトを制作

stinger8-footer-3column-customize-thumbnail

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

公開日:2017-04-08
最終更新日:

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のフッターに3カラムウィジェットを設置するカスタマイズ方法」という記事をお届けしました。

-STINGER

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

STINGER8のフッターに3カラムウィジェットを設置するカスタマイズ方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

stinger8-newentry-toppage-hide-thumbnail

STINGER8の「最近のエントリ」をトップページだけ非表示にする方法

STINGER8のトップページには新着記事一覧が表示されています。 そして、サイドバーには「最近のエントリ」と …

affinger4-difficult-thumbnail

AFFINGER4をアフィリエイター以外にオススメできない理由

WordPressの初心者用テーマの走りとして名高い「STINGERシリーズ」。その第一弾としてSTINGER …

device-thumbnail-size-thumbnail

STINGER8の一覧サムネイルサイズをデバイス毎に変更する方法

STINGER8の記事一覧のサムネイルサイズは、デフォルトだと150pxの画像を100px四方の正方形に縮小して表...

stinger8-pager-css-customize-thumbnail

STINGER8のページネーションを少しおしゃれにするCSSデザイン例

WordPressの記事が増えてくると、ページネーションのデザインも気になってきます。STINGER8のページネー...

affinger4-breadcrumb-careless

【AFFINGER4】年月別アーカイブのパンくずリストリンクの修正方法

AFFINGER4の年月別アーカイブのパンくずリストで明らかにおかしい点を発見。 AFFINGER4だけでなく …

コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい