この記事は【2016年3月25日】と作成から2年以上経っているため、記事の内容が古い可能性があります。最新の情報を合わせてご確認されることを推奨いたします。
Stinger7テンプレートを使っていて、フッターを３カラム表示にしたいと思い対応した時の方法をご紹介します。
編集したのは以下の３ファイルです。
- functions.php
- style.css
- footer.php
修正する前には、くれぐれもバックアップを取っておくことをお勧めします。
フッターウィジェットの追加
functions.phpを開いて以下のコードを追加します。以下では、3つのウィジェットをまとめて登録しています。register_sidebar関数で１つずつ登録しても問題ありません。
|
1 2 3 4 5 6 7 8 |
register_sidebars(3, array( 'id' => 'footer', 'name'=>'フッタ-%d', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h4 class="menu_underh2">', 'after_title' => '</h4>', )); |
これで管理画面内で以下のようなウィジェットが表示されます。左から１、２、３となります。
続いてフッターのHTMLを編集します。ここでは、以下のようなHTMLコードを追加しています。場所はどこでも大丈夫ですが、例ではfooterタグのすぐ下に追加しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 --> <!-- ... 以下続く --> |
style.css
最後にデザインを修正します。デフォルトのテーマ色に合うように背景をブラックで構成してみます。以下の設定でよく見るページのデザインぽくなるはずです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
#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に強いテンプレートもあるようです。
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』