Stinger7のフッターを３カラムにする

Stinger7テンプレートを使っていて、フッターを３カラム表示にしたいと思い対応した時の方法をご紹介します。

編集したのは以下の３ファイルです。

functions.php
style.css
footer.php

修正する前には、くれぐれもバックアップを取っておくことをお勧めします。

1 フッターウィジェットの追加
2 footer.php
3 style.css

フッターウィジェットの追加

functions.phpを開いて以下のコードを追加します。以下では、3つのウィジェットをまとめて登録しています。register_sidebar関数で１つずつ登録しても問題ありません。

register_sidebars(3, array(
'id' => 'footer',
'name'=>'フッタ-%d',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4 class="menu_underh2">',
'after_title' => '</h4>',
));

register_sidebars(3, array(

'id' => 'footer',

'name'=>'フッタ-%d',

'before_widget' => '',

'after_widget' => '',

'before_title' => '<h4 class="menu_underh2">',

'after_title' => '</h4>',

));

これで管理画面内で以下のようなウィジェットが表示されます。左から１、２、３となります。

footer.php

続いてフッターのHTMLを編集します。ここでは、以下のようなHTMLコードを追加しています。場所はどこでも大丈夫ですが、例ではfooterタグのすぐ下に追加しています。

<footer id="footer">
<!-- footer widget/ -->
<aside id="footer_widget">
<section>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer') ) : else : ?>
<?php endif; ?>
</section>
<section>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-2') ) : else : ?>
<?php endif; ?>
</section>
<section>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-3') ) : else : ?>
<?php endif; ?>
</section>
</aside>
<div class="clear"></div>
<!-- /footer widget -->
<!-- ... 以下続く -->

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer') ) : else : ?>

<?php endif; ?>

</section>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-2') ) : else : ?>

<?php endif; ?>

</section>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar('footer-3') ) : else : ?>

<?php endif; ?>

</section>

</aside>

style.css

最後にデザインを修正します。デフォルトのテーマ色に合うように背景をブラックで構成してみます。以下の設定でよく見るページのデザインぽくなるはずです。

#footer {
padding-top: 5px !important;
background-color: #1a1a1a;
color: #fff;
}
#footer_widget {
width: 1060px;
margin: 0 auto;
text-align: left;
}
#footer_widget section {
float: left;
width: 330px;
margin: 0 0 20px 20px;
padding: 0;
}
#footer_widget section h4 {
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin: 0px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#footer_widget section li {
list-style-type: none;
margin: 0px;
padding-left: 30px;
background-image: url(images/arrow_gray.png);
background-repeat: no-repeat;
line-height: 27px;
font-size: 14px;
}
#footer_widget section a {
color: #dfdfdf;
}

#footer {

padding-top: 5px !important;

background-color: #1a1a1a;

color: #fff;

}

#footer_widget {

width: 1060px;

margin: 0 auto;

text-align: left;

}

#footer_widget section {

float: left;

width: 330px;

margin: 0 0 20px 20px;

padding: 0;

}

#footer_widget section h4 {

font-size: 14px;

font-weight: bold;

line-height: 25px;

margin: 0px;

padding-top: 10px;

padding-right: 10px;

padding-bottom: 10px;

}

#footer_widget section li {

list-style-type: none;

margin: 0px;

padding-left: 30px;

background-image: url(images/arrow_gray.png);

background-repeat: no-repeat;

line-height: 27px;

font-size: 14px;

}

#footer_widget section a {

color: #dfdfdf;

}

Stingerは、日々小さな修正や改良を含めバージョンアップされているようで、ひょっとすると本記事で紹介した内容と変わっているところもあるかもしれませんのでご注意ください。

また、Stingerは無料のテンプレートとして提供されていますが、有料でAffingerというSEOに強いテンプレートもあるようです。

稼ぐサイトの設計図-AFFINGER4公式ガイド

WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』