STINGER7のフッターに3カラムウィジェットを設置する
STINGER
こちらがカスタマイズ完成イメージ。
先ほどと打って変わって好きなコンテンツを設置し放題です。
スマホ閲覧時は1カラムの縦表示にしっかりレスポンシブします。
追記:2017-04-08
フッターを3カラムにするカスタマイズの手順
カスタマイズは以下の手順でおこないます。
- 3カラムウィジェットを追加する
- 子テーマにfooter.phpをコピーする
- フッターにウィジェットエリアを追加する
- 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つのウィジェットが追加されます。
2.子テーマにfooter.phpをコピーする
子テーマを使っている場合は、footer.phpを親テーマからコピーしましょう。
※親テーマを直接編集するのであれば飛ばしてもらっても構いません。
3.フッターにウィジェットエリアを追加する
次にウィジェットを表示させるためのエリアをフッターに追加します。
footer.phpの以下の部分を編集してください。
変更前の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©
<?php bloginfo( 'name' ); ?>
,
<?php echo date( 'Y' ); ?>
All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->
変更後のfooter.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©
<?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
見出しデザイン
フッターの見出しはこちらの記事を参考にしました。
見出しのデザインや文字サイズ、色などは好きに変えて遊んでみてください。