初心者向けSTINGER8カスタマイズ 3カラムフッター作成編

STINGER8 ロゴ

なんだかんだ言ってもやはりSTINGER8のカスタマイズ記事は需要が高いようですね。かく言う私も結構楽しみながらcssやphpの勉強になっている事ですし、これはこれでエントリーに出来て一石二鳥でしょう!とそんなわけで、今回はSTINGER8に3カラムのフッターを設置してみたいと思います。

スポンサーリンク

デフォルトでは何も無いSTINGER8のフッター

と言っても本当に何も無いわけではありませんが、デフォルトの状態だとSTINGER8にはフッターにウィジェットを配置する事が出来ないので、フッターメニュー、サイト名、ディスクリプション、コピーライトしか表示されない事になります。

さすがにこれはちょっと寂しいですよね?という事で、よくある感じの3カラムフッターをSTINGER8にもつけてあげたいと思います。

今回の作業のポイント

STINGER8にフッターを設置する為に、3つの工程での作業が必要になります。

  • フッター用のウィジェットを作成
  • 作成したウィジェットをフッター部に表示
  • フッター用のCSSを作成

それでは順番に作業内容を見ていく事にしましょう。例によって今回も子テーマに対して変更を加えていきます。

フッター用のウィジェットを作成

functions.phpに以下の内容を追記する事でウィジェットを作成出来ますので、テーマの編集 > テーマのための関数(functions.php)を開いてコピペして下さい。もちろん直接functions.phpを編集してFTPでアップロードしてもOKです。

if (function_exists('register_sidebar')) {

    register_sidebar( array(
        'id' => 'footer-left',
        'name' => 'フッター左用ウイジェット',
        'description' => 'フッターの左側に表示されるウィジェットです。',
        'before_widget' => '<div class="footer-lbox">',
        'after_widget' => '</div>',
        'before_title' => '<p class="menu_underh2">',
        'after_title' => '</p>'
    ) );

    register_sidebar( array(
        'id' => 'footer-center',
        'name' => 'フッター中央用ウイジェット',
        'description' => 'フッターの中央に表示されるウィジェットです。',
        'before_widget' => '<div class="footer-cbox">',
        'after_widget' => '</div>',
        'before_title' => '<p class="menu_underh2">',
        'after_title' => '</p>'
    ) );

    register_sidebar( array(
        'id' => 'footer-right',
        'name' => 'フッター右用ウイジェット',
        'description' => 'フッターの右側に表示されるウィジェットです。',
        'before_widget' => '<div class="footer-rbox">',
        'after_widget' => '</div>',
        'before_title' => '<p class="menu_underh2">',
        'after_title' => '</p>'
    ) );

}

これでウィジェットが作成出来ました。

STINGER8 3カラムのフッター用ウィジェット

functions.phpの読み込み順が子テーマ > 親テーマになるので、追加した分が最初に来てしまうのはちょっと気になりますが、今はそれでガマンしておいて下さい。まだ試してはいませんが一応その辺りを制御する方法もある事はあるので、それはまたその内にという事で。

作成したウィジェットをフッター部に表示

まずは親テーマからfooter.phpをコピーしてくる必要があります。コピーしてきたらfooter.phpを開いて、以下の場所に作成したフッターを表示する部分を追記して下さい。

</div><!-- /contentw -->
<footer>
<div id="footer">
<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 );
?>

    <!-- 3カラムフッター部分 追加 ここから -->
    <div class="footer-3c-box clearfix">
        <div class="footer-left">
            <?php dynamic_sidebar( 'footer-left' ); ?>
        </div>
        <div class="footer-center">
            <?php dynamic_sidebar( 'footer-center' ); ?>
        </div>
        <div class="footer-right">
            <?php dynamic_sidebar( 'footer-right' ); ?>
        </div>
    </div>
    <!-- 3カラムフッター部分 追加 ここまで -->

    <div class="footer-wbox clearfix">

        <div class="footer-c">
            <!-- フッターのメインコンテンツ -->
            <p class="footerlogo">
            <!-- ロゴ又はブログ名 -->

本当ならウィジェットに何か設定されているか左・中央・右へと1つずつ判定しながら表示するよう処理した方が良いのかもしれませんが、今回の場合はサイト名やディスクリプションを表示している要素の上に、3カラムのフッター部分をまるっと挿入しているという事もあって無条件にその分の領域を確保するようにしました。

そこはちゃんとやっておきたいという方は、関数のis_active_sidebarを使ってウィジェットがアクティブかどうか判定しながら記述してみると良いと思いますが、私は面d…いや、必要だから追加したのであって、使わない場合は想定していないからという事にしておいて下さい。

とりあえずそんな感じの雑な仕様ですので、使っていないカラムがあるとそこだけ空間が出来る事になります。なので使うなら全部使う、そうでないならいっそ全部使わないといった潔い使い方がよろしいかと思います。All or Nothing、みたいな。

追加したフッター用のCSSを作成

実は初めて使ってみたんですが、display: flexってかなり便利ですねぇ。これだとちょっとしたタイル表示なんかも簡単に出来ちゃうんじゃないかと思えてきますが、やってみたらそれはそれでハマるんだろうなという気がしなくもなかったり。

そんな話はさておき、style.cssに以下の文を追記します。STINGER8では959px以下でサイドバーがメインカラムの下に回り込むので、そのタイミングでフッターが非表示になるよう設定してあります。

と言うか、その辺はちょっとだけモバイルファーストを意識して以下のような書き方にしてみました。追加したフッターはまず非表示に設定しておいて、960px以上の時は表示させるといった感じになるでしょうか。

まぁ結果的にはどちらも同じなんですけどね…

#side .st-aside .menu_underh2 ,
#footer .menu_underh2 {
    margin-top: 10px;
    padding: 10px 20px;
    font-family: Helvetica , "游ゴシック" , "Yu Gothic" , sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 24px;
    background: #f3f3f3;
    border-top: 2px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.footer-3c-box {
    display: none;
}

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

.footer-3c-box {
display: flex; margin-bottom: 30px; } .footer-3c-box > div { margin: 0 1%; width: 32%; font-size: 14px; text-align: left; } #footer .menu_underh2 , .footer-3c-box > div > div { margin-bottom: 20px; } /*-- ここまで --*/ }

サイドバーとフッターの見出しをまとめて装飾出来るようにとわざわざ同じクラスを指定しておいたんですが、よく考えたらサイドバーの時でもその親要素から含めて指定してやらないとフォントが変わらなかったのを今頃になって思い出しました…ダメじゃん、てなわけでとりあえずこんな感じでムリヤリ対応してみました。

3カラムフッターの完成です!

先日のエントリーで紹介したカエレバのカスタマイズCSSですが、本当に簡単な修正でSTINGERにも応用出来そうな感じだったので、併せてテストする事にしました。ちなみにこの画面はフッターメニューから下の部分になります。

STINGER8 3カラムのフッター用ウィジェット 表示テスト

背景を白(#fff)にしてウィジェット見出しを本文のH2っぽくしてみたらなかなかいい感じになりましたね?

今後もちまちまとカスタマイズしていく予定です

正直に言ってしまうと、発表当初はネガティブな印象しか持てなかったSTINGER8ですが、最近になってようやくカスタマイズが楽しくなってきました。もっともそれだけ時間はかかるので副サイトの更新とかほとんど、と言うか完全に止まっちゃってたりするんですけどね…

何にしても今の私には他に出来る事が無いに等しいので、多少の時間を割いてでもこうした技術を身につけたいところではあります。それにはひたすらバリバリとカスタマイズして数をこなすしかないでしょう、という事で今後もネタを小出しにしつつ頑張ってみたいと思います。

スポンサーリンク

コメント

  1. […] Unlimited Ch@osさんの「初心者向けSTINGER8カスタマイズ 3カラムフッター作成編」(外部リンク)の記事を拝見して導入することが出来ました。 […]

トップへ戻る