WORDPRESS

Stinger5のフッターにウィジェットを追加する方法

更新日:


YUKA863_ok15185909-thumb-1000xauto-18589

<スポンサーリンク>

今回はブログカスタマイズテーマ、Stinger5のフッターにウィジェットを追加する方法です。

Stinger5はとてもオシャレで使いやすいデザインなのですが、フッターのカスタマイズが管理画面からはできないようになっています。フッターはサイトの締めなので、サイトマップ等を配置したいという要望は多いと思いますので、フッターにウィジェットを配置する方法紹介します!!

また今回は追加するウィジェットとしてカテゴリーを配置したいと思います。やりたいことは以下です。

フッターカスタマイズ

 

1.function.phpを修正

まずはfunction.phpを修正して、ウィジェットを追加できるようにします。function.phpはとてもセンシティブなので、必ずバックアップを取ってから行ってください。

function.phpの以下の部分を探します。

・以下の記述2行目の数字を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);
}
}


 

 

2.ウィジェットにカテゴリーを追加します

管理画面の【外観】⇒【ウィジェット】を確認するとフッターという項目が増えていると思います。

フッターカスタマイズ2

ここにサイドバーにウィジェットを配置すると同様に追加したいもの(今回はカテゴリー)をドラック&ドロップします。

 

3.footer.phpを修正して、追加したウィジェットを配置します。

続いて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&copy;
<?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>


ここまでで、すでにサイトのフッターに追加したウィジェット(今回はカテゴリー)が追加されているはずです!

最後にデザインを調整します。

4.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;
}


 

またstyle.cssにある以下の記述
footer {
clear: both;
padding: 20px 0;
text-align: center;
}
これを以下のように修正します。
footer {
clear: both;
padding: 20px 0;
text-align: center;
background: #fff;
padding: 10px;
border-radius: 4px;
background: rgba(255,255,255,1);
}

 

以上で完成です!以下のようになりました。

フッターカスタマイズ

とてもすっきりとしていてわかりやすいですね!


<スポンサーリンク>

<スポンサーリンク>

おすすめ記事

CCC9V9A9997_TP_V 1

ネットでお金を稼いで汚い中年どもから独立する方法Content1 ネットでお金を稼いで汚い中年どもから独立する方法1.1 サラリーマンはつらいよ2 ネットでお金を稼ぐ方法【初級編】2.1 お小遣いサイ ...

amazon01 2

<スポンサーリンク> Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法Content1 Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法2 【初級編】Amazonのお得な裏ワザ ...

-WORDPRESS

Copyright© IT虎の穴 , 2017 AllRights Reserved Powered by AFFINGER4.