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

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

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

  • functions.php
  • style.css
  • footer.php

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

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

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

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

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

footer-widget

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 -->
  <!-- ... 以下続く -->

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

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

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

af4_banar_2

 


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



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

byebyehaikikyou

日記やIT系関連のネタ、WordPressに関することなど様々な事柄を書き付けた雑記です。ITエンジニア経験があるのでプログラミングに関することなどが多いです。

シェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

コメントする

Translate »