ＷＥＢシステム開発 技術的備忘録（通称 技忘録）

ワードプレスの標準テンプレート（ただし一世代前）のTwentyEleven の3カラム化について。

ネットでもいろいろ情報は出ています。以下は特に参考にしたページ

http://susumu-akashi.com/2012/09/3column/
http://wpcos.com/?p=1739

で、以下のことが気になりました。

・親テーマに手を入れるのは避けたい（もしテーマが更新されたときに困る。まぁ、更新は無いかもしれませんが）
・メイン（コンテンツ）が中央ではなく、右、もしくは左になっている（好みの問題だとは思いますが）

とりあえず、上のことに対応しつつ、簡単にできる方法として記事を上げておきます。

1.子テーマを作る（ここは割愛。フォルダ作ってstyle.cssを置くだけで使えます）

参考：http://presentnote.com/child-theme-customaize/

2.子テーマの functions.php (無ければ作る) に以下の行を追加する。

register_sidebar( array(

	'name' => __( 'Left Sidebar', 'twentyeleven' ),

	'id' => 'leftsidebar',

	'before_widget' => '<aside id="%1$s" class="widget %2$s">',

	'after_widget' => "</aside>",

	'before_title' => '<h3 class="widget-title">',

	'after_title' => '</h3>',

) );

3.子テーマの header.php (無ければTwentyElevenの同名ファイルをコピーする) の最後に以下の行を追加する。
※sidebar.php ではないのがみそ。というか手抜き。

<div id="tertiary" class="widget-area" role="complementary">

	<?php if ( ! dynamic_sidebar( 'leftsidebar' ) ) : ?>

	<?php

		the_widget(Twenty_Eleven_Ephemera_Widget','',array(

			'before_title' => '<h3 class="Left Sidebar">',

			'after_title' => '</h3>'

		) );

	?>

	<?php endif; // end sidebar widget area ?>

</div><!-- #tertiary .widget-area -->

4.子テーマの style.php に以下の設定を加える。

#tertiary {

  float: left;

  margin: 0 1.0% 0 1.0%;

  width: 20.5%;

}

#primary {

  float: left;

  margin: 0 -47.8% 0 0;

  width: 100%;

}

#content {

  float: right;

  margin: 0 50% 0 0;

  width: 50.0%;

}

#secondary {

  float: right;

  margin: 0 1.0% 0 1.0%;

  width: 20.5%;

}

5.上と同じ子テーマの style.php に以下の設定を加える。
※一応レスポンシブ対応用なので、分けてみた。

@media (max-width: 800px) {

	#main #secondary , #primary , #tertiary {

		float: none;

		margin: 0 7.6%;

		width: auto;

	}

}