WordPressのBizVektorで作成したブログにはフッターエリアが用意されるのですが、アクセス数の多い個人ブログでよく見かける3カラム式のフッターに変える方法を紹介します。

1.問題となる箇所

今回、画像のように3PR的な3カラムのエリアを追加します。

どうやらWordpress標準機能や拡張プラグインで追加できなそうなので、ソース修正で実装となります。

2.削除対象ソース

修正する対象ソースは3種類。
・functions.php(ウィジェット自体を追加)
・footer.php(フッターに追加ウィジェットを配置)
・style.css(フッターの表示を整える)
今回の修正というのは「本来はサイドに追加するウィジェットをフッターにも配置できるようにしてしまおう」というものです。

3.修正箇所

(1)functions.php

biz_vektor_widgets_init()関数内にコードを追加します。

	'after_title' => '</h3>',
	) );
}
add_action( 'widgets_init', 'biz_vektor_widgets_init' );

このソースの閉じかっこ直前に、以下のとおりコードを追加します。同じソースを3行入れるので正しいです。

	'after_title' => '</h3>',
	) );
register_sidebar();
register_sidebar();
register_sidebar();
}
add_action( 'widgets_init', 'biz_vektor_widgets_init' );

上のソースを追加することで、Wordpress設定画面のウィジェット設定にサイドバーが新しく3つ追加された状態になります。

先ほども説明したとおり、このウィジェットに追加した内容をフッターに表示するのが今回の修正内容です。

ですので、カテゴリ一覧、月別アーカイブ一覧、フリーエリアなど様々なウィジェットをフッターに追加できることになります。

(2)footer.php

先ほどのウィジェットをフッターに表示させるための修正です。修正箇所は以下の部分。

<!-- [ #footer ] -->
	<div id="footer">
	<!-- [ #footerInner ] -->
	<div id="footerInner" class="innerBox">
		<dl id="footerOutline">

このdiv id=”footerInner”部分の直前に以下のソースを追加します。

<!-- [ #footer ] -->
	<div id="footer">
	<!-- [ #footerInner ] -->
	<div id="footerInner" class="innerBox">
	<div id="area01">
		<?php dynamic_sidebar(5); ?><br>
	</div>
	<div id="area02">
		<?php dynamic_sidebar(6); ?><br>
	</div>
	<div id="area03">
		<?php dynamic_sidebar(7); ?><br>
	</div>
	</div>
	<div id="footerInner" class="innerBox">
		<dl id="footerOutline">

div id=”footerInner”を2つにすることで3カラムエリアとフッターサイトタイトルが分離されて表示されます。

(3)style.css

あとはCSSで見た目を整えます。style.cssの末尾に以下のコードを追加します。

/* フッターエリア 3カラム化 */
@media (min-width: 970px) {  
 #area01{ float: left; overflow: hidden; margin-bottom: 10px;
  margin-left: 5px; margin-right: 10px; width: 300px; }
 #area02{ float: left; overflow: hidden; margin-bottom: 10px;
  margin-left: 10px; margin-right: 10px; width: 300px; }
 #area03{ float: left; overflow: hidden; margin-bottom: 10px;
  margin-left: 10px; margin-right: 5px; width: 300px; }
}

細かくピクセル数を指定することで綺麗に見えるようになりますので、自分の好みの数字に修正していくと良いと思います。

以上です。