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 }
出来上がり
いかがでしょうか?
フッターヴィジェットに興味のある方は試してみて下さいね^^
コメントを残す