WordPressにフッターヴィジェットを導入する方法



WordPressには無料で優れたテンプレートがとても多いのですが、以外にもフッターウィジェット対応でシンプルなものが少ないので、通常の3カラムタイプのテンプレートにフッターウィジェットを導入してみました。

ブログに限らずWEBサイトは通常下図のような配置となっています。

サイドバーは0~2列で、ページの左側だったり右側だったりしますが、それ以外のパーツの構成はどのサイトでも変わらないと思います。

フッターにメニューがある場合は下図のような配置になります。

ここ最近はちょこちょこ見かけますよね^^
左サイドバーにはブログ訪問者がページ遷移するためのメニュー、右サイドバーには広告やブログパーツを集中的に配置し、フッターには使用頻度の低いアーカイブ等を配置する事で、ページ構成を分かりやすくする事が目的です。

functions.phpの変更

[変更前]

<?php
if ( function_exists('register_sidebars') )
    register_sidebars(2);
?>

[変更後]

<?php
if ( function_exists('register_sidebars') )
    register_sidebars(6);
?>

テンプレートによって若干コードに違いはありますが、サイドバーの数を変更する所がポイントです。
今回はフッターにヴィジェットを4列追加しましたので、2→6に変更しています。

footer.phpに追加

<div id="footermenu">
	<ul style="width:300px;><?php dynamic_sidebar(3); ?></ul>
	<ul style="width:190px;><?php dynamic_sidebar(4); ?></ul>
	<ul style="width:190px;><?php dynamic_sidebar(5); ?></ul>
	<ul style="width:190px;><?php dynamic_sidebar(6); ?></ul>
</div>

一番左は300px、それ以外は190pxに設定してみました。

style.cssに追加

ヴィジェットが追加出来たらCSSで表示の調整を行います。
この当たりは、使用しているテンプレート次第となりますが、参考までに当サイトのものを記載しておきます。

/************************************************
*	Footer Menu						*
************************************************/
#footermenu {
	width: 960px;
	margin: 20px auto 30px;
	text-align: left;
	font:14px "ヒラギノ角ゴ Pro W3", "メイリオ", Osaka, "MS Pゴシック", sans-serif; 
	}
#footermenu a:link, #footermenu a:visited {
	color: #886353;
	}
#footermenu ul {
        float: left;
	margin: 30px 10px 30px 10px;
	padding: 0;
	list-style-type: none
	}
#footermenu ul ul{
	width: auto;
	float: none;
	margin: 0 0 20px 0;
	}
#footermenu .widget{
	margin-bottom: 20px
	}
#footermenu h2{
	font-size: 14px;
	text-align: center;
	border: solid 1px #dcdcdc;
	border-radius: 3px;
	border-bottom: 3px groove #ccc;
	border-right: 3px groove #ccc;
	color: #444444;
	margin: 0 0 10px 0;
	}
#footermenu li{
	color: #886353;
	font-size: 14px;
	margin: 0px;
	padding: 0 0 0 10px;
	}
#footermenu p{
	clear: both;
	padding-top: 8px;
	margin-right: 30px
	}

出来上がり

当サイトではこんな出来上がりとなりました^^

いかがでしょうか?
フッターヴィジェットに興味のある方は試してみて下さいね^^

1件のコメント

  • Johnc305

    Say, you got a nice blog post. Really Cool. cedgdgfeeeac

コメントを残す




*