ポケットラボ

サイドバーには、ウィジェットを自由自在に設定できるけど、フッターにもウィジェットを追加したいよ！という向けです。この度、フッターにウィジェットを追加したので、その方法をメモ程度に残しておきます。（崩れてないよね？！）

１，まずはfunctions.phpに追加

テーマごとに書き方は違いと思いますが、サイドバーがあるテーマでしたらテーマ編集よりfunctions.phpに

register_sidebar(array(
		'name' => 'footer',
		'description' => 'footer',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

と書いてあるはずです。ので、これを増やす！
（フッターに３つ並べて表示したい場合は３つ、２つなら２つ。１つなら１つ。）

私のfunctions.phpはこんな感じです。

２、ウィジェットを確認。

【外観】→【ウィジェット】を確認

先程、functions.phpで追加した部分が表示されています。
しかし、ここに追加してもまだサイトの方には表示されません。

３，footer.phpに追加
テーマ編集よりfooter.phpに下記を追加

<?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footer);?>

これでフッターにウィジェットが追加できるようになります。
が表示はがたがたなので、cssなどで調節してあげればおっけーです！

４，簡単な流れ

フッターに３つウィジェットを追加したい場合

まずはfunctions.phpに追加。

register_sidebar(array(
		'name' => 'footerleft',
		'description' => 'footerleft',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

register_sidebar(array(
		'name' => 'footercenter',
		'description' => 'footercenter',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

register_sidebar(array(
		'name' => 'footerright',
		'description' => 'footerright',
		'before_widget'  =>   "\n\t\t\t" . '<li id="%1$s" class="widget %2$s"><div class="widgetblock">',
		'after_widget'   =>   "\n\t\t\t</div></li>\n",
		'before_title'   =>   "\n\t\t\t\t". '<div class="widgettitleb"><h3 class="widgettitle">',
		'after_title'    =>   "</h3></div>\n" .''
		));

footer.phpに下記を追加

<div id="footer-widget" class="clearfloat">
    <div id="footerleft" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footerleft);?>
    </div>
    <div id="footercenter" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footercenter);?>
    </div>
    <div id="footerright" class="clearfloat">
        <?php if(function_exists('dynamic_sidebar') ) dynamic_sidebar(footerright);?>
    </div>
</div>

cssはざっくりこんな感じ

div#footerleft{
    width:25%;
    float:left;
}

div#footercenter {
    width:50%;
    float:left;
}
 
div#footerleft {
    padding:10px 5px 10px 10px;
}
 
div#footercenter {
    padding:10px 5px 10px 5px;
}
 
div#footerright {
    width:15%;
    float:right;
    padding:10px 10px 10px 5px;
}
 
.clearfloat {
margin : 0px auto;
padding : 0px;
width : 1000px;
}
 
.clearfloat:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

まとめ

フッターでウィジェットが使えれば、色々幅が広がりそうですね！

関連する記事がありません。