WordPressのテーマには多くのものがあります。
中でも無料のテーマでStingerがとても有名です。
かつ、
SEO的にも優れています。
また、
カスタマイズ性にも良いです。
そこで、
Stinger6、Stinger7のfooter部分にWidget(ウィジェット)を追加する方法です。
まずは、
function.phpを開きます。
(必ずバックアップしてから編集してくださいネ!!もし画面が真っ白になった場合でもFTPでバックアップしたものをアップロードすれば直りますので。)
スポンサーリンク
その中に以下のコードを記載・記述します。
// フッターウィジェット追加
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>',
));
//ここまで
その後、
一度管理画面よりfooter部分にWidget(ウィジェット)が追加されたか確認します。
(しなくてもいいですが^^;)一応です)
追加されていることを確認できたら、
最後にCSSでスタイルを調整します。
その前に、
footer.phpを以下のように変更します。
<footer id=”footer”>
この一番上のfooter部分の下に以下のコードを追記します。
<!–フッターウィジェット–>
<aside>
<ul><?php dynamic_sidebar('footer-left'); ?></ul>
<ul><?php dynamic_sidebar('footer-center'); ?></ul>
<ul><?php dynamic_sidebar('footer-right'); ?></ul>
</aside>
<!–/フッターウィジェット–>
<div class="clear">
次に、
</footer>
部分を以下のようにします。
</div>
</footer>
最後に、
CSSでフッターの横並びを解除する為に以下のように、CSSで調整します。
でないと、
フッターメニューがウィジェットの横に長細く表示されてしまいます。
なので、divタグで横並びをクリアします。
CSS
/*——————————–
フッターウィジェット
———————————*/
footer>aside ul {
float:left;
width: 310px;
padding: 10px;
list-style-type:none;
}
.clear {
clear:both; /*floatの解除*/
}
これで、
以下のように表示されるようになります。
参考サイト)
[…] Stinger6のフッターに3カラムのウィジェットを追加する方法 […]