STINGER7のフッターに3カラムウィジェットを設置する

footer-3column-customize-thumbnail
まこと先生
STINGER7でブログを始めたのですが、フッターがなんか寂しいんですよね
STINGER7のデフォルトのフッター

STINGER7のデフォルトのフッター

確かになんか物足りませんね
やまかわ
まこと先生
よくフッターを3カラムにして、Twitterのタイムラインとか独自の広告を設置しているブログがありますよね?あれって簡単に実装できますか?
はい、できますよ。では今回はSTINGER7のフッターに3カラムウィジェットを設置して、コンテンツを増やすカスタマイズを紹介しますね
やまかわ

こちらがカスタマイズ完成イメージ。
先ほどと打って変わって好きなコンテンツを設置し放題です。

フッターに3カラムウィジェット設置した例

フッターに3カラムウィジェット設置した例

スマホ閲覧時は1カラムの縦表示にしっかりレスポンシブします。

スマホでの表示例

スマホでの表示例

STINGER8用のカスタマイズも追加しました
やまかわ
STINGER8バージョン
追記:2017-04-08
stinger8-footer-3column-customize-thumbnail
STINGER8のフッターに3カラムウィジェットを設置する方法を紹介します。 STINGER7をご利用の方はこちらの記事をご覧ください

フッターを3カラムにするカスタマイズの手順

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

  1. 3カラムウィジェットを追加する
  2. 子テーマにfooter.phpをコピーする
  3. フッターにウィジェットエリアを追加する
  4. CSSで見た目を整える

1.3カラムウィジェットを追加する

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

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

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つのウィジェットが追加されます。

フッター3カラムウィジェットが追加される

フッター3カラムウィジェットが追加される

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

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

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

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

3.フッターにウィジェットエリアを追加する

次にウィジェットを表示させるためのエリアをフッターに追加します。

footer.phpの以下の部分を編集してください。

変更前のfooter.php

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 -->

変更後のfooter.php

PHP(クリックで開きます)
</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を追加します。

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

おすすめ関連書籍

コメントを残す

入力エリアすべてが必須項目です。
メールアドレスが公開されることはありません。

承認制のため反映にお時間をいただきます。