2020年1月4日更新

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

Thumbnail

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

賢威7で最初から実装されている、フッターを自由に編集できる機能だけでもかなり便利だと思いますが、ここではフッターにウィジェットエリアを作って、更にサイト運営を快適にする方法をご紹介します。

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

追記：2016年2月8日

コードに誤りがあったので、footer.php のコードを一部修正しました。

はやしさん ありがとうございました。

カスタマイズ前

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

footer-widget-widget-area-before

カスタマイズ後

PCサイズ

↓ 「最近の投稿ウィジェット」、「タグクラウドウィジェット」、「カレンダーウィジェット」を追加。

footer-widget-widget-area-after-1

スマホ・タブレットサイズ

↓ スマホ・タブレットサイズでは3列から1列（横幅100%）に。

footer-widget-widget-area-after-2

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

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

はじめに

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

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

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

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

1. functions.php を編集

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

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

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

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>',
  ) );
}
add_action( 'widgets_init', 'wcl_register_footer_widgets' );

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

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

footer-widget-widget-area

2. footer.php を編集

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

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

PHP
コピーする
<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
コピーする
<?php
if ( is_active_sidebar( 'footer-1' ) | is_active_sidebar( 'footer-2' ) | is_active_sidebar( 'footer-3' ) ) :
    echo '<div class="footer-widgets">';
    echo ( dynamic_sidebar( 'footer-1' ) | dynamic_sidebar( 'footer-2' ) | dynamic_sidebar( 'footer-3' ) ) ? '</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タグが出力されないようになります ）

保存・更新すると、

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

footer-widget-widget-area-after-1-1

3. CSSファイルを編集

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

親テーマ（賢威7本体）の base.css や子テーマの style.css など、お使いの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 {
    width: 30%; 
    float: left;
    margin-bottom: 20px;
}
.site-footer-in.footer-widget-1,
.site-footer-in.footer-widget-2 {
    margin-right: 5%;
}
@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 {
        width: 100%;
    }
    .site-footer-in.footer-widget-1,
    .site-footer-in.footer-widget-2 {
        margin-right: 0;
    }
}

これでPCサイズではウィジェットが3列に並び、、、

footer-widget-widget-area-after-1

ブラウザを狭めてスマホサイズにすると、3列表示だったウィジェットが1列表示になりました。　↓

footer-widget-widget-area-after-2

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

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

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

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

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

という部分を、

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

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

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

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.