ちょっと寂しいSTINGER7のフッターをカッコよくカスタマイズしてコンテンツを増やそう!

footer-3column-customize-thumbnail

STINGER7のフッターをもう少し華やかにしたい!

そう思ったことはないでしょうか?

STINGER7のフッターはデフォルトでこのようになっていますが、これだとちょっと物足りないですよね。

footer-3column-customize-01

そこで今回は、フッターに3カラムウィジェットを設置し、コンテンツを増やして見栄えをよくする方法を紹介します。

参考にしたのはこちらのサイトです。

参考Stinger6のフッターに3カラムのウィジェットを追加する方法 – WordPressデビュー津々浦々

STINGER6でのカスタマイズでしたが、STINGER7でも応用できました。

追記:2017-04-08

STINGER8バージョンも書きました。

stinger8-footer-3column-customize-thumbnail
STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこちらの記事をご覧ください。

カスタマイズ完成イメージ

カスタマイズ完成イメージです。

footer-3column-customize-02

もちろん、中身は好きなように入れ替えることができます。

footer-3column-customize-03

スマホ閲覧時は1カラムの縦表示になります。

カスタマイズの手順

カスタマイズは以下の手順でおこないます。

  1. 3カラムフッター用のウィジェットを追加
  2. 子テーマにfooter.phpをコピー
  3. 背景を変えるためのブロック追加
  4. CSSで見た目を整える

1.3カラムフッター用のウィジェットを追加

まず、3カラムフッター用のウィジェットを作成します。

以下のコードをfunctions.phpに追加してください。

//フッターウィジェット追加
register_sidebar( array(
'id' => 'footer-left',
'name' => 'フッター左',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-center',
'name' => 'フッター中央',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebar( array(
'id' => 'footer-right',
'name' => 'フッター右',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));

すると、このような3つのウィジェットが追加されます。

footer-3column-customize-04

2.子テーマにfooter.phpをコピー

子テーマを使っている場合は、万が一に備えてfooter.phpを親テーマからコピーしましょう。

child-theme-copy-thumbnail
サイトをWordPressで作るメリットの一つとして、自分好みに自由にカスタマイズできるということが上げられます。 ですが、ちょっとし

※親テーマを直接編集するのであれば飛ばしてもらっても構いません。

3.背景を変えるためのブロック追加

次に実際にウィジェットを表示させるエリアを作ります。

footer.phpの以下の部分を編集します。

変更前のコード

<footer id="footer">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
<h3>
<?php if ( is_home() or is_front_page() ) { ?>
<!-- ロゴ又はブログ名 -->
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
<?php else: //ロゴ画像が無い時 ?>
<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
<?php endif; ?>
<?php } else { ?>
<?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" ></a>
<?php else: //ロゴ画像が無い時 ?>
<?php st_wp_title( '' ); ?>
<?php endif; ?>
<?php } ?>
</h3>
<p>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'description' ); ?></a>
</p>
<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
<p class="copy">Copyright&copy;
<?php bloginfo( 'name' ); ?>
,
<?php echo date( 'Y' ); ?>
All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->

変更後のコード

</div>
<!-- /#wrapper -->
<div id="foot-wrapper">
<footer id="footer">
<!-- footer widget -->
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!-- /footer widget -->
<div class="clear">
<?php get_template_part( 'st-footer-link' ); //フッターリンク ?>
<?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
<p class="copy">Copyright&copy;
<?php echo date( 'Y' ); ?>
<?php bloginfo( 'name' ); ?>
All Rights Reserved.</p>
</div>
</footer>
<!-- ページトップへ戻る -->
<div id="page-top"><a href="header" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る 終わり -->
</div>
<!-- /#foot-wrapper -->

一番下の#wrapperの閉めdivを一番上に移動し、その下に新しく#foot-wrapperとウィジェット呼び出しコードを追加します。

#foot-wrapperは「ページトップへ戻る」の下で閉めてください。

Copyrightの部分も少し手を加えて、西暦をブログタイトルの前にくるようにしました。ここはお好みで。

3~18行目のブログタイトル、20~22行目のディスクリプションも必要ないので削除しています。必要な方は消さずに残してください。

4.CSSで見た目を整える

最後に見出しや文字サイズ、背景画像のカスタマイズ用CSSを追加します。

/*--------------------------------------
フッター
--------------------------------------*/
#foot-wrapper {
max-width: 100%;
padding: 0 10px;
margin: 0 auto;
color: #fff;
border-top: 1px solid #000;
background-image: url("メディアにアップロードした画像のURL");
}
#foot-wrapper a {
color: #fff;
}
footer {
max-width: 1060px;
margin: 0 auto;
}
footer textwidget p,
footer li {
text-align: left;
}
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
footer h4.menu_underh2 {
border-left: 6px solid #0489B1;
padding: 3px 0 3px 6px;
margin-bottom: 10px;
text-align: left;
}
footer>aside ul {
float:left;
width: 320px;
padding: 10px 0;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 781px) {
/*--------------------------------------
フッターウィジェット
--------------------------------------*/
footer h4.menu_underh2 {
border-left: 6px solid #0489B1;
padding: 3px 0 3px 6px;
margin-bottom: 10px;
text-align: left;
}
footer>aside ul {
float:left;
width: 320px;
padding: 10px;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
}

フッター背景画像は、10行目の#foot-wrapperで指定します。画像をメディアにアップロードしてURLを記入してください。

壁紙・見出しデザイン参考サイト

背景画像素材

背景画像素材は、こちらのサイトからお借りしました。シームレスパターン専門サイトなので選びやすいです。

参考Subtle Patterns | Free textures for your next web project

見出しデザイン

フッターの見出しはこちらの記事を参考にしました。見出しのデザインや文字サイズ、色などは好きに変えて遊んでみてください。

参考シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 | NxWorld

WordPressカスタマイズ関連書籍

footer-3column-customize-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで