2017年9月28日更新

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

Thumbnail

今回の記事では、バズ部さんが無料で提供しているWordPressテーマ：Xeoryのフッターに4列（4カラム）のウィジェットエリアを作る方法を紹介したいと思います。

一度ウィジェットエリアを作ってしまえば、タグクラウドや最新の記事一覧、お問い合わせフォームなど、色々なウィジェットを簡単に出し入れすることができるので、結構便利です。

2列や4列のウィジェットエリアを作る方法についても紹介しているので、もしよければ参考にして下さい。

カスタマイズ前

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

footer-3column-widget-area-before

カスタマイズ後

PCサイズ

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

footer-4column-widget-area-after-pc

タブレットサイズ

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

footer-4column-widget-area-after-tablet

スマホサイズ

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

footer-4column-widget-area-after-sp

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

はじめに

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>',
  ) );
  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' );

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

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

footer-4column-widget-area-2

2. footer.php を編集

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

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

PHP
コピーする
<footer id="footer">
<?php if( has_nav_menu( 'footer_nav' ) ){ ?>

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

PHP
コピーする
<footer id="footer">
<?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;
?>
<?php if( has_nav_menu( 'footer_nav' ) ){ ?>

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

保存・更新すると、

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

footer-4column-widget-area-3

3. CSSファイルを編集

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

お使いのCSSファイルに以下のコードを追加します。

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

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

footer-4column-widget-area-after-pc

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

footer-4column-widget-area-after-tablet

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

footer-4column-widget-area-after-sp

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

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

footer-widget-area-math-1

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

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

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

Home

関連記事

トップに戻る

Copyrights © WebCraftLogAll Rights Reserved.