TwentyElevenを３カラムにする方法

３カラムの方法、色々と良い方法があると思いますが、「Twenty Eleven Theme Extensions」とウィジェットとCSSを利用して作成する方法を書きます。

ここでの３カラム作成のイメージは、下の画像です。

１．「Twenty Eleven Theme Extensions」で２カラムにします。

設定画面で下記の画像のように「Widget Sidebar」のチェックボックスにチェックを入れて２カラムにします。

２．ウィジェットを追加する

ここでは、親テーマfunctions.phpにコードを追加します。
「name」を「Second sidebar」に、「id」を「sidebar-1s」という名前にしましたが、適当な名前でコードを追加すると、ウィジェットに「Second sidebar」という項目ができます。

register_sidebar( array(
  'name' => __( 'Second Sidebar', 'twentyeleven' ),
  'id' => 'sidebar-1s',
  'before_widget' => '<aside id=&quot;%1$s&quot; class=&quot;widget %2$s&quot;>',
  'after_widget' => &quot;</aside>&quot;,
  'before_title' => '<h3 class=&quot;widget-title&quot;>',
  'after_title' => '</h3>',
) );

３．sidebar.phpファイルにコードを追加する

例なので細かい部分は省略しますが、レイアウトできるようにタグ（div id=”tertiary”）と、その中にウィジェットを表示するためのdynamic_sidebar()コードを書きます。

<div id=&quot;tertiary&quot; class=&quot;widget-area&quot; role=&quot;complementary&quot;>
  <?php dynamic_sidebar( 'sidebar-1s' ); ?>
</div>

４．style.cssファイルにidを追加して、他のidも調整する。

id=”tertiary”と定義しているので、style.cssに追加します。
また、twentyelevenは、primary、content、secondaryを調整することで、レイアウトを変更できるので調整することで３カラムに表示なります。

【例：style.css】

#primary {
  float: left;
  margin: 0 -47.8% 0 0;
  width: 100%;
}
#content {
  float: right;
  margin: 0 49% 0 1.0%;
  width: 50.0%;
}
#secondary {
  float: right;
  margin-right: 1.0%;
  width: 27.8%;
}
#tertiary {
  float: left;
  width: 18.0%;
  margin-right: 1.0%;
}