今回はブログカスタマイズテーマ、Stinger5のフッターにウィジェットを追加する方法です。
Content
Stinger5はとてもオシャレで使いやすいデザインなのですが、フッターのカスタマイズが管理画面からはできないようになっています。フッターはサイトの締めなので、サイトマップ等を配置したいという要望は多いと思いますので、フッターにウィジェットを配置する方法紹介します！！
また今回は追加するウィジェットとしてカテゴリーを配置したいと思います。やりたいことは以下です。
１．function.phpを修正
まずはfunction.phpを修正して、ウィジェットを追加できるようにします。function.phpはとてもセンシティブなので、必ずバックアップを取ってから行ってください。
function.phpの以下の部分を探します。
・以下の記述２行目の数字を4⇒5に変更します。（管理画面でのカスタマイズ項目を一つ増やします）
・次に下の方に赤字の8行を追加します。（増やした項目をフッター用にします）
//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(5) )
register_sidebars(1,
array(
'name'=>'サイドバーウイジェット',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));
register_sidebars(1,
array(
'name'=>'スクロール広告用',
'description' => '「テキスト」をここにドロップして内容を入力して下さい。アドセンスは禁止です。※PC以外では非表示部分',
'before_widget' => '<ul><li>',
'after_widget' => '</li></ul>',
'before_title' => '<h4 class="menu_underh2" style="text-align:left;">',
'after_title' => '</h4>',
));
register_sidebars(1,
array(
'name'=>'Googleアドセンス用336px',
'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<p style="display:none">',
'after_title' => '</p>',
));
register_sidebars(1,
array(
'name'=>'Googleアドセンスのスマホ用300px',
'description' => '「テキスト」をここにドロップしてコードを入力して下さい。タイトルは反映されません。',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<p style="display:none">',
'after_title' => '</p>',
));
register_sidebars(1,
array(
'name'=>'フッター',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h5>',
'after_title' => '</h5>',
));
//更新日の追加
function get_mtime($format) {
$mtime = get_the_modified_time('Ymd');
$ptime = get_the_time('Ymd');
if ($ptime > $mtime) {
return get_the_time($format);
} elseif ($ptime === $mtime) {
return null;
} else {
return get_the_modified_time($format);
}
}
２．ウィジェットにカテゴリーを追加します
管理画面の【外観】⇒【ウィジェット】を確認するとフッターという項目が増えていると思います。
ここにサイドバーにウィジェットを配置すると同様に追加したいもの（今回はカテゴリー）をドラック＆ドロップします。
続いてfooter.phpを修正します。子テーマを使用している方は親テーマのfooter.phpを子テーマにコピーして修正してください。
footer.phpの2行目に以下の赤字部分4行を追加します。
<footer id="footer">
<div id="footer-box">
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
<?php endif; ?>
</div>
<h3>
<?php if (is_home()) { ?>
<?php bloginfo( 'name' ); ?>
<?php } else { ?>
<?php wp_title(''); ?>
<?php } ?>
</h3>
<p>
<?php bloginfo('description'); ?>
</p>
<p class="copy">Copyright©
<?php bloginfo('name');?>
,
<?php the_date('Y');?>
All Rights Reserved.</p>
</footer>
</div>
<!-- /#wrapper -->
<!-- ページトップへ戻る -->
<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>
ここまでで、すでにサイトのフッターに追加したウィジェット（今回はカテゴリー）が追加されているはずです！
最後にデザインを調整します。
４．style.cssを修正します
ここでも子テーマを利用している方は子テーマのstyle.cssを修正してください。
以下の記述をstyle.cssの一番最下行に追加します（スマホへの適用は、スマホ適用範囲に追加してください）
/*--------------------------------
フッターカテゴリー
---------------------------------*/
#footer-box {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
#footer h5 {
color: #333;
font-size: 15px;
font-weight: bold;
margin: 10px 0px 10px 10px;
text-align: left;
}
#footer h5:before {
color:#333;
margin-right: 5px;
font-family:"FontAwesome";
content:"\f02c";
font-size:12px;
}
#footer-box li{
margin: 7px;
float: left;
list-style: none;
}
#footer-box li a{
color: #333;
font-size: 14px;
background-color: #f1f1f1;
padding: 7px;
text-decoration: none;
box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
-webkit-box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
-moz-box-shadow:rgba(113, 135, 164, 0.298039) 0px 3px 10px 0px;
}
#footer-box li a:before {
color:#333;
margin-right: 5px;
font-family:"FontAwesome";
content:"\f02c";
font-size:12px;
}
#footer-box li a:hover{
color: #DC143C;
background-color: #dcdcdc;
}
/*--------------------------------
フッター文字
---------------------------------*/
#footer h3 {
font-size: 15px;
margin-top: 20px;
margin-bottom: 20px;
}
#footer .copy {
font-size: 15px;
color: #000;
line-height: 15px;
-moz-opacity: 0.5;
opacity: 0.5;
margin-bottom: 20px;
}
以上で完成です！以下のようになりました。
とてもすっきりとしていてわかりやすいですね！