賢威7：フッターに4列（4カラム）のウィジェットエリアを作る方法

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、WordPressテーマ：賢威7のフッターに4列（4カラム）のウィジェットエリアを作る方法を紹介したいと思います。

2列や3列のウィジェットエリアを作る方法についても記事を書いたので、良かったら参考にして下さい。

追記：2016年2月8日

footer.php のコードを一部修正しました。

1 カスタマイズ前
2 カスタマイズ後
3 はじめに
4 1. functions.php を編集
5 2. footer.php を編集
6 3. CSSファイルを編集
- 6.1 3-1. 横幅の計算方法について
7 4. ビューティー版以外のテーマの場合

カスタマイズ前

↓　ここにウィジェットエリアを追加。

カスタマイズ後

PCサイズ

↓ 「最近の投稿ウィジェット」や「カレンダーウィジェット」など4つのウィジェットを追加。

タブレットサイズ

↓ タブレットサイズでは4列から2列に。

スマホサイズ

↓ スマホサイズでは横幅100%になります。

※　今回はPHPファイルを編集していきます。画面が真っ白になることもあるので、PHPコードは注意して編集して下さい。

※ また、ここでは賢威7のビューティー版を使用しましたが、他のテーマでも同じようにウィジェットエリアを作ることができます。
文字の色など、一部テーマに合わせた微調整が必要になる場合があります。

はじめに

WordPressでウィジェットエリアを作るには、

ウィジェットエリアの登録　（functions.php）
ウィジェットエリアの表示　（表示させたい場所のPHPファイル）

という2つの作業が必要になります。

ウィジェットの登録は functions.phpなどのPHPファイルで行い、
ウィジェットを表示するには、必要なコードを「表示させたい場所のPHPファイル」に書き込みます。

1. functions.php を編集

まずはウィジェットエリアの登録です。

以下のコードを functions.php に書き込みます。

※　書き込む fucntions.php は、親テーマのものでも子テーマのものでも、どちらでも大丈夫です。

function wcl_register_footer_widgets() {
  register_sidebar( array(
    'name'          => 'Footer 1',
    'description'   => 'フッター左に表示されるウィジェットエリアです。',
    'id'            => 'footer-1',
    'before_widget' => '<div class="site-footer-in footer-widget-1 widget"><div id="%1$s" class="%2$s site-footer-conts">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'Footer 2',
    'description'   => 'フッター中央左に表示されるウィジェットエリアです。',
    'id'            => 'footer-2',
    'before_widget' => '<div class="site-footer-in footer-widget-2 widget"><div id="%1$s" class="%2$s site-footer-conts">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'Footer 3',
    'description'   => 'フッター中央右に表示されるウィジェットエリアです。',
    'id'            => 'footer-3',
    'before_widget' => '<div class="site-footer-in footer-widget-3 widget"><div id="%1$s" class="%2$s site-footer-conts">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4>',
  ) );
  register_sidebar( array(
    'name'          => 'Footer 4',
    'description'   => 'フッター右に表示されるウィジェットエリアです。',
    'id'            => 'footer-4',
    'before_widget' => '<div class="site-footer-in footer-widget-4 widget"><div id="%1$s" class="%2$s site-footer-conts">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4>',
  ) );
}
add_action( 'widgets_init', 'wcl_register_footer_widgets' );

これでフッター用のウィジェットエリアが登録されました。

※　この時点ではまだ何も表示されませんが、デモ用にウィジェットを入れておきます。

2. footer.php を編集

次に登録したウィジェットエリアを表示させます。

footer.php の19行目付近に、以下のコードがあるので、

<div class="copyright">
    <p><small>Copyright (C) <?php echo date("Y"); ?> <?php bloginfo('name'); ?> <span>All Rights Reserved.</span></small></p>
</div>

これを下のコードで置き換えます。

（2016年2月8日追記：コードの先頭に <?php を追加しました）

<?php
if ( is_active_sidebar( 'footer-1' ) | is_active_sidebar( 'footer-2' ) | is_active_sidebar( 'footer-3' ) | is_active_sidebar( 'footer-4' ) ) :
    echo '<div class="footer-widgets">';
    echo ( dynamic_sidebar( 'footer-1' ) | dynamic_sidebar( 'footer-2' ) | dynamic_sidebar( 'footer-3' ) | dynamic_sidebar( 'footer-4' )) ? '</div>' : '';
endif;
?>
<div class="copyright">
    <p><small>Copyright (C) <?php echo date("Y"); ?> <?php bloginfo('name'); ?> <span>All Rights Reserved.</span></small></p>
</div>

（ ※ 上のように書くと、ウィジェットが何も入っていないときに、ウィジェットエリアを包む空のdivタグが出力されないようになります）

保存・更新すると、

先ほど入れたウィジェットが表示されるようになりました。

3. CSSファイルを編集

ここまでのPHPコードの編集で、ウィジェットエリアを登録、表示することができましたが、余白が少なくかなり見づらい状態なので、CSSファイルを編集して見た目を整えていきましょう。

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加します。

.site-footer .footer-widgets {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 40px;
    padding: 40px 20px;
}
.site-footer .footer-widgets:before {
    content: "";
    display: table;
}
.site-footer .footer-widgets:after {
    content: "";
    display: table;
    clear: both;
}
.footer-widgets .widget-title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #795a2e;
    padding-bottom: 5px;
}
.site-footer-in.footer-widget-1,
.site-footer-in.footer-widget-2,
.site-footer-in.footer-widget-3,
.site-footer-in.footer-widget-4 {
    width: 21.25%; 
    float: left;
    margin-bottom: 20px;
}
.site-footer-in.footer-widget-1,
.site-footer-in.footer-widget-2,
.site-footer-in.footer-widget-3 {
    margin-right: 5%;
}
@media only screen and (max-width: 950px) {
    .site-footer-in.footer-widget-1,
    .site-footer-in.footer-widget-2,
    .site-footer-in.footer-widget-3,
    .site-footer-in.footer-widget-4 {
        width: 47.5%; 
        margin-bottom: 20px;
    }
    .site-footer-in.footer-widget-2,
    .site-footer-in.footer-widget-4 {
        margin-right: 0;
    }
}
@media only screen and (max-width: 736px) {
    .site-footer-in.footer-widget-1,
    .site-footer-in.footer-widget-2,
    .site-footer-in.footer-widget-3, 
    .site-footer-in.footer-widget-4 {
        width: 100%;
    }
    .site-footer-in.footer-widget-1,
    .site-footer-in.footer-widget-2,
    .site-footer-in.footer-widget-3,
    .site-footer-in.footer-widget-4 {
        margin-right: 0;
    }
}

PCサイズではウィジェットが4列に並んでいますが、、、

ブラウザを狭めてタブレットサイズにすると、4列表示だったウィジェットが2列表示になり、、、　↓

もう少しブラウザの幅を狭めると、1列表示になります。　↓

3-1. 横幅の計算方法について

先ほどCSSコードの中に width が出てきましたが、これは下の画像のように計算することができます。

$footer-widget-area-math-1$

少しややこいんですけど、これにサイト全体の横幅（1200px)などを当てはめると、width: 21.25% や width: 47.5% という横幅を計算できます。

（余白は60pxにしました）

4. ビューティー版以外のテーマの場合

ここでは賢威7のビューティー版を使用しましたが、プリティ版やコーポレート版でも同じようにウィジェットエリアを追加することができます。

PHPファイルの編集はどのテーマでも変わりませんが、先ほどのCSSで追加した境界線を、ビューティー版に合わせた焦げ茶色にしているので、テーマに合わせて一部調整します。

先ほどのコードに出てきた、

.footer-widgets .widget-title {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid #795a2e;　←　このカラーコード
    padding-bottom: 5px;
}

という部分を、

.footer-widgets .widget-title {
    ...
    border-bottom: 1px solid #○○;　←　テーマに合わせたカラーコード
    ...
}

のように、お好みのカラーコードを使った境界線にすれば大丈夫です。

今回のカスタマイズは以上になります。
最後まで閲覧ありがとうございました。