STINGER5にフッターウィジェットを追加する

WordPress のテーマ STINGER5 のカスタマイズメモです。

今回は STINGER5 にフッターウィジェットを追加してみます。何だかんだで 2 カラムのテーマが一番使いやすいと思ってはいますが、やはりちょっとだけサブコンテンツの表示領域が足りないのでこの補助領域として使います。

用途としては「カテゴリ・タグの一覧」とかちょっとしたテキストを表示するのに使う予定です。そして、STINGER5 はレスポンシブデザインなので、このフッターウィジェットは PC のみで表示させたいと思います。

サイドウィジェットをそのまま表示してしまうとスマホで見た時に、フッターまでかなり長くなってしまうのでそういうのを避けるためです。

とりあえず出来上がりはこんな感じ。

作り方は以下に記載していきます。

スポンサーリンク

functions.phpにフッターウィジェットの設定を追加する

まずは functions.php に必要な設定の追加から。このカスタマイズは全て子テーマ内で行うのでこんな感じに設定を追加しちゃいます。

if ( ! function_exists( 'dynamic_sidebar' ) || ! dynamic_sidebar( 5 ) && ! function_exists( 'add_fotter_widget' ) ) {

	function add_fotter_widget() {
		register_sidebar(
			array(
				'name'          => 'Footer Widget Area',
				'id'            => 'footer-widget',
				'before_widget' => '<div class="footer-widget-area">',
				'after_widget'  => '</div>',
				'before_title'  => '<h4>',
				'after_title'   => '</h4>',
			)
		);
	}
	add_action( 'after_setup_theme', 'add_fotter_widget' );

}

ここでのポイントは after_setup_theme() 関数でウィジェットを追加する部分だと思う。

これをやらないでウィジェットを追加すると、親テーマで登録されたウィジェットの順序が狂ってしまい表示がおかしくなってしまいます。多分、子テーマの functions.php が先に読み込まれてしまうからって事だと思います。

ウィジェット用テンプレートの作成

続いて、上記コードを読み込ませるためのウィジェット用テンプレートを作成します。

WordPress のテンプレは命名規則等ああるので “sidebar-footer.php” という名前で作成。(確か)

<?php
/**
 * The Footer Sidebar
 */

if ( ! is_active_sidebar( 'footer-widget' ) || wp_is_mobile() || is_mobile() ) {
	return;
}
?>
<div class="footer-w">
<?php dynamic_sidebar( 'footer-widget' ); ?>
</div>
<div class="clear"></div>

ここでのポイントは wp_is_mobile() 関数と is_mobile() 関数を使う事。

is_mobile() 関数は STINGER5 の親テーマに記述されている関数でスマートフォンに反応します。今回はタブレットも除外したいので wp_is_mobile() 関数も併用して PC の場合のみフッターウィジェットを表示するように。(メジャー所はこれでバッチリなはず)

footer.phpでウィジェットパーツの読み込み

次は親テーマより footer.php を子テーマにコピーしてこのウィジェットを読み込ませる設定を追加します。また、この時にフッター領域の横幅を目一杯使えるようにするた少しだけ HTML 構造を変えます。

</div>
<!-- /#wrapper --> 
<footer id="footer">
<div class="footer-in">
  <h3>
    <?php if (is_home()) { ?>
    <?php bloginfo( 'name' ); ?>
    <?php } else { ?>
    <?php wp_title(''); ?>
    <?php } ?>
  </h3>
  <p>
    <?php bloginfo('description'); ?>
  </p>
  <?php get_sidebar( 'footer' ); ?>
  <p class="copy">Copyright&copy;
    <?php bloginfo('name');?>
    ,
    <?php the_date('Y');?>
    All Rights Reserved.</p>
</div>
</footer>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->
<?php  wp_enqueue_script('base',get_bloginfo('template_url') . '/js/base.js', array()); ?>

<?php if(is_mobile()) { //PCのみ追尾広告のjs読み込み ?>
<?php } else { ?>
<?php  wp_enqueue_script('scroll',get_bloginfo('template_url') . '/js/scroll.js', array()); ?>
<?php } ?>

<?php wp_footer(); ?>
</body></html>

変更箇所は上記のハイライト部分です。

具体的には <?php get_sidebar( ‘footer’ ); ?> でウィジェットを追加して、<div class=”footer-in”> を追加して STINGER3 のような構造に戻したような感じです。

フッターウィジェット用のスタイルシートを書く

最後はフッターウィジェット用のスタイルシートを調整します。場所はとりあえずスタイルシートの末尾に追加してみた。

#footer {
	background-color: #dcdcdc;
}

#footer ol,
#footer ul {
	list-style: none;
}

.footer-in {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.footer-w {
	text-align: left;
}

.footer-w a {
	text-decoration: none;
}

.footer-widget-area {
	width: 300px;
	float: left;
	margin-bottom: 20px;
}

.footer-widget-area:nth-child(2n) {
	margin-right: 80px;
}

:nth-child(2n) の部分はやや微妙だが、3 つ配置する分にはこんな具合でいいのではないでしょうか。後は面倒なので Media Queries を一切書いていませんがここは必要に応じてお好みで！

以上、簡単ですが STINGER5 にフッターウィジェットを追加するは以上です。