Xeory

Xeory:フッターに2列(2カラム)のウィジェットエリアを作る方法

xeory-recent-post-thumbnail

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

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

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

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

カスタマイズ前

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

footer-3column-widget-area-before

カスタマイズ後

PCサイズ

↓ 「最近の投稿ウィジェット」と「タグクラウドウィジェット」を追加。

footer-2column-widget-area-after-pc
スマホ・タブレットサイズ

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

footer-2column-widget-area-after-sp

[ad]

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

はじめに

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

  1. ウィジェットエリアの登録 (functions.php)
  2. ウィジェットエリアの表示 (表示させたい場所の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>',
  ) );
}
add_action( 'widgets_init', 'wcl_register_footer_widgets' );

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

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

footer-2column-widget-area

2. footer.php を編集

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

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

<footer id="footer">
<?php if( has_nav_menu( 'footer_nav' ) ){ ?>

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

<footer id="footer">
<?php
if ( is_active_sidebar( 'footer-1' ) | is_active_sidebar( 'footer-2' ) ) :
  echo '<div class="footer-widgets">';
  echo ( dynamic_sidebar( 'footer-1' ) | dynamic_sidebar( 'footer-2' ) ) ? '</div>' : '';
endif;
?>
<?php if( has_nav_menu( 'footer_nav' ) ){ ?>

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

保存・更新すると、

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

footer-2column-widget-area-1

3. CSSファイルを編集

ここまでのPHPコードの編集で、ウィジェットエリアを登録、表示することができましたが、余白が少なくかなり見づらい状態なので、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 {
  width: 47.5%; 
  float: left;
  margin-bottom: 20px;
}
.footer-widget-1 {
  margin-right: 5%;
}
@media only screen and (max-width: 736px) {
  .footer-widget-1,
  .footer-widget-2 {
    width: 100%;
  }
  .footer-widget-1,
  .footer-widget-2 {
    margin-right: 0;
  }
}

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

footer-2column-widget-area-after-pc

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

footer-2column-widget-area-after-sp

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

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

footer-widget-area-math-1

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

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