TwentyElevenを3カラムにする方法

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

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

1.「Twenty Eleven Theme Extensions」で2カラムにします。

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

2.ウィジェットを追加する

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

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

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

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

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

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

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

【例: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%;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です