「えっ！？ブログのフッター活用できてなさすぎ！」ってことで急いでカスタマイズしました【Stinger】

これまでブログのフッターを全然いじっていなかったので、非常に寂しい状態でした。また、サイドバーもウィジェットを詰め込みすぎていたので、ブログのレイアウトも相当汚なかったのです。

そこで、一部をフッターに移動する事に。この改修のおかげでブログのレイアウトも改善されました。これから紹介する方法も簡単ですので、ぜひやってみてください。

なぜカスタマイズするか

フッターをカスタマイズするのは、ブログのレイアウトを整える意外にも理由があります。それは、フッターが意外と来訪者に見られているし、そのサイトを評価する指標の１つとして考える人もいるからです。神は細部に宿るという言葉もあるように。意外と大事な部分なのです。

やること

フッターとサイドバーのカスタマイズでやることは

1 フッターにウィジェットを追加
2 サイドバーからウィジェットを削除する

の２つです。
それでは、２つについて詳しく見ていきましょう。

なお、これから紹介する方法はおしゃれは足元から！Stinger3フッターカスタマイズで差をつけろ！#Stinger-WPを参考にさせて頂きました。ありがとうございます。

1 フッターにウィジェットを追加

まず、ダッシュボード管理画面のfunctions.phpをいじる必要があります。

functions.phpを編集

functions.phpは編集に失敗すると、画面が真っ白になって非常にテンパるので、編集前に必ずバックアップをとっておいて下さい。functions.phpは改行やスペースに厳しいので慎重に！
functions.php内で「register_sidebars」を検索すると、以下のコード群がヒットします。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    '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アドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

この部分にウィジェットエリアを追加するための関数を追加していきます。
まずは、!dynamic_sidebar(4)の「4」を「6」に変更。

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )

そして、以下のコードを先ほどのコードの下に追加。

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '<div class="footer_l">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));
 
register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '<div class="footer_r">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

以下のようになっていればOKです。

//ウイジェット追加
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(6) )
register_sidebars(1,
    array(
    'name'=>'サイドバー1',
    'before_widget' => '<ul><li>',
    'after_widget' => '</li></ul>',
    'before_title' => '<h4 class="menu_underh2">',
    'after_title' => '</h4>',
    ));
register_sidebars(1,
    array(
    'name'=>'スクロール広告用',
    '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アドセンス用',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'Googleアドセンスのスマホ用width300',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h4 style="display:none">',
    'after_title' => '</h4>',
    ));

register_sidebars(1,
    array(
    'name'=>'フッター左',
    'before_widget' => '<div class="footer_l">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));
 
register_sidebars(1,
    array(
    'name'=>'フッター右',
    'before_widget' => '<div class="footer_r">',
    'after_widget' => '</div>',
    'before_title' => '<h5>',
    'after_title' => '</h5>',
    ));

これでfunctions.phpの編集は終了です。
あとはfooterで今定義した部分を呼び出すだけ。

footer.phpを編集

呼び出す場所は好きな所でOK。表示したい位置に以下のコードを追加。

    <div id="footer_w">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
	<p>ここはフッター左側</p>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
	<p>ここはフッター右側</p>
      <?php endif; ?>
    </div>
    <div class="clear"></div>

私は、ブログタイトルの下に配置したのでこんな感じになっています。

  <div id="gadf"> </div>
    <h3><a href="<?php echo home_url(); ?>/">
      <?php wp_title(''); ?>
      </a></h3>
    <h4><a href="<?php echo home_url(); ?>/">
      <?php bloginfo('description'); ?>
      </a></h4>
	<!-- 以下にウィジェットを追加　-->
    <div id="footer_w">
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(5) ) : else : ?>
	<p>ここはフッター左側</p>
      <?php endif; ?>
      <?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(6) ) : else : ?>
	<p>ここはフッター右側</p>
      <?php endif; ?>
    </div>
    <div class="clear"></div>
	<!-- フッターウィジェット END -->

    <!--このリンクは外す事は禁止しております-->
    <p class="stinger"><a href="http://wp-stinger.com">WordPress-Theme STINGER3</a></p>

ここまでの作業でウィジェットを追加できる状態になりました。さっそくウィジェット追加と行きたい所ですが、その前にフッターのスタイルを整えるためにCSSをいじりましょう。

CSSでフッターのレイアウトを整える

まずは、PC用のCSSファイル「style.css」に以下のコードを追加。

/*---------------------------------
フッター追記
--------------------------------*/
#footer {
    background-color: white;
}
 
#footer_w {
    width: 986px;
    background-color: white;
    margin: 20px auto;
    text-align: left;
}
.footer_l {
    float: left;
    width: 336px;
    margin: 0 10px 20px 0;
    padding: 0;
}
 
.footer_r {
    float: right;
    width: 620px;
    margin: 0 0 20px 20px;
}

.footer_r li {
	float:left;
	margin-right:10px;
}
 
#footer_w h5 {
    font-size: 120%;
    color: black;
    border-bottom: 3px dotted black;
    margin: 0 0 20px 0;
    padding: 0 0 3px 3px;
}
 
#footer_w p {
    color: black;
}

.footer_lが左側のウィジェット部分で、.footer_rが右側。ここでは、それぞれの横幅を336px, 620pxにしていますが自分好みにカスタマイズしてください。私は色を極力シンプルにしているので、文字色とタイトル下の点線を黒に設定。

次に、スマホ用のCSSファイル「smart.css」に以下のコードを追加。

/*-----------------------------------
フッター追記smart
------------------------------------*/
#footer {
    background-color: white;
}
 
#footer_w {
    width: 100%;
    margin: 20px auto;
    text-align: left;
}
.footer_l {
    color: black;
    width: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
    text-align: center;
}
 
.footer_r {
    color: black;
    width: 90%;
    margin: 0 auto 20px auto;
    text-align: left;
}
 
#footer_w h5 {
    font-size: 100%;
    color: black;
    border-bottom: 3px dotted black;
    margin: 0 0 10px 0;
    padding: 0 0 3px 0;
}
 
#footer_w p {
    color: black;
}

スマホ用には「フッター左」と「フッター右」を端末サイズの関係上、上下に分けています（text-align: center;, text-align: left;の部分）。
これでCSSの編集も終了です。
あとは、フッターに好きなウィジェットを追加するだけです。