wordPress stingerのfooterをカスタマイズ 、サイトのfooterを、記事本文とは別の背景にしているサイトをよく見かけます。 プロフィール紹介やアーカイブ情報などが載っていたりして、 この部分があるだけで、ぐっと素敵なレイアウトになっていますね。
色の配色的にも、レイアウトの下の方に濃い系の色があるだけで、 全体のレイアウト構成がぐっと引き締まります。
よって、今回はfooterレイアウトの変更にチャレンジです。
footerのカスタマイズで準備するファイル
前回、作り上げた子テーマ環境での変更をおこないます。
子テーマに
・functions.php
・footer.php
という名前でファイルを追加します。
functions.phpの変更
まずは、親テーマのfunctions.phpより以下の部分をコピペで、 子テーマのfunctions.phpにも記載します。
[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(4) )
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>’,
));
[/php]
続いて、子テーマの中身を以下のように変更します。
[php]
//ウイジェット追加
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(7) )
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’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h5>’,
‘after_title’ => ‘</h5>’,
));
register_sidebars(1,
array(
‘name’=>’フッター中央’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h5>’,
‘after_title’ => ‘</h5>’,
));
register_sidebars(1,
array(
‘name’=>’フッター右’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘<h5>’,
‘after_title’ => ‘</h5>’,
));
[/php]
子テーマのfunction.phpだけは、同じコード（変数）があった場合、親テーマの記述情報をベースに上書きしてくれません、 親テーマの情報に追加という形になります。
よって、本来であれば、追加部分だけ用意（今回であれば３つ）すればいいのですが、 wordPressの管理画面の外観→ウィジェットの表示を確認すると、子テーマのfunctions.phpに記載したものから順番に表示されております。優先順位が子テーマの方が高いので、あたり前なのかも知れませんが、その場合、折角今迄多くの投稿記事のサイドバー情報がおかしな事になってしまいます。 最悪、表示されなくなります。
この部分の順番が狂うと、他のファイルも設定変更しなければならなくなるので、 今回は、順番を変更したくないので、全部を入れています。また、dynamic_sidebar(4)の部分をdynamic_sidebar(7)に変更しています。４つから7つに増えている為です。
以上でfunctions.phpの変更は終了です。
footer.phpの変更
wordPress管理画面からのアクセスは出来るようになりましたので、 次はfooter.phpに表示させる部分を記入します。まずは、親テーマのfooter.phpの中身ソースコードを全てコピーして、 子テーマのfooter.phpに貼り付けます。
次に、<div id=”footer-in”>内のデータを以下のように変更します。
重要なのは、
[php]
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(5) ) : else : ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(6) ) : else : ?>
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(7) ) : else : ?>[/php]
を入れる事なので、それ以外の記述は好きなように設定してみてください。
[php]
<div id="footer-in">
<div id="footer_w">
<div class="footer_l">
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(5) ) : else : ?>
<!–<p>ここはフッター左側</p>–>
<?php endif; ?>
</div>
<div class="footer_c">
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(6) ) : else : ?>
<!–<p>ここはフッター中側</p>–>
<?php endif; ?>
</div>
<div class="footer_r">
<?php if ( function_exists(‘dynamic_sidebar’) && dynamic_sidebar(7) ) : else : ?>
<!–<p>ここはフッター右側</p>–>
<?php endif; ?>
</div>
</div>
<div class="clear"></div>
<p class="copy">Copyright©
<?php bloginfo(‘name’);?>
,
<?php the_date(‘Y’);?>
All Rights Reserved.</p>
</div>
<!– /#footer-in –>
[/php]
以上で、footer.phpの変更も終了です。
style.cssに記述を加える
この作業をしないとレイアウトが崩れたままになりますので、
一番重要な作業かもしれません。
子テーマ環境で用意したstyle.cssを開いて、以下のコードを追加しましょう。
[css]
/* フッタ部分 */
#footer-in {
//width: 926px;
background-color:rgb(51, 51, 51);
//margin-right: auto;
//margin-left: auto;
//border: 3px solid rgb(51, 51, 51);
//margin-top: -20px;
//border-top: none;
}
/*フッター文字色等*/
#footer-in {
text-align: center;
color: white;
padding: 20px;
}
/*h4タグ*/
#footer #footer-in h4 {
color: #fff;
margin: 0 0 20px 0;
padding: 5px 5px 5px 35px;
background-image: url("images/free_back.png");
background-position: left center;
background-repeat: no-repeat;
}
/*フッター横サイズ*/
#footer_w {
width: 1000px;
margin: 10px auto;
text-align: left;
}
/*左カラム*/
.footer_l {
float: left;
width: 320px;
margin: 0 20px 20px 0;
padding: 0;
}
/*中央カラム*/
.footer_c {
float: left;
width: 320px;
margin: 0 20px 20px 0;
padding: 0;
}
/*右カラム*/
.footer_r {
float: left;
width: 320px;
margin: 0 0 20px 0;
padding: 0;
}
/*文字*/
#footer_w p {
color: #fcfcfc;
}
/*リスト文字*/
#footer_w li {
border-bottom: 1px solid #dfecfb;
padding: 8px 0;
font-size: 14px;
}
/*リンク文字*/
#footer_w li a {
color: #d8eef9;
}
/*右リンク文字 マウス*/
#footer_w li a:hover {
color: #ed3575;
}
[/css]
以上cssの設定ファイルも終了です。
これで、締まりのあるサイトになったのではないでしょうか。
最近の投稿やアーカイブ、タブなど、今迄サイドバーに表示していた項目を footer部分に表示してみるものいいかもしれませんね。
