【Twenty Twelve】2カラムのサイドバー2カラム

Twenty Twelveを下の画像のように、サイドバーの上部は1カラムにして下を2カラムにする方法について。

テーマの説明

テーマ作成にあたり右サイドバーの全てでウィジェットでできるようにします。
デフォルトでは足りないのでウィジェットを追加できるサイドバーを2つ追加します。
サイドバーを３つ表示するためにテンプレートのコードを編集します。
サイドバー3つを表示するためにスタイルをstyle.cssで追加します。

１．サイドバー2つ追加

ウィジェットを追加できるようにfunctions.phpファイルに下のコードを追加します。

//サイドバー追加（左サイドバー）
register_sidebar( array(
  'name' => '左サイドバー',
  'id' => 'sidebar-4',
  'description' => '左サイドバー',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

//サイドバーボックス追加
register_sidebar( array(
  'name' => '左サイドバーボックスエリア',
  'id' => 'sidebar-5',
  'description' => '左サイドバーボックスエリア',
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget' => '</aside>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>',
) );

２、ウィジェット表示用のサイドバーの作成

サイドバーを2つ追加したのをそれぞれ表示できるようにするために、sidebar-right.php、sidebar-rightboxという名前で新規にファイルを作成して、それぞれに下のコードを追加します。

sidebar-right.php

<?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?>
  <div id="tertiary" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-4' ); ?>
  </div><!-- #tertiary -->
<?php endif; ?>

sidebar-rightbox.php

<?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?>
  <div id="second-box-area" class="widget-area" role="complementary">
    <?php dynamic_sidebar( 'sidebar-5' ); ?>
  </div><!-- #tertiary -->
<?php endif; ?>

３．テンプレートの編集

サイドバーを3つ表示できるようにテンプレートを編集します。
get_sidebar()のコードを削除して下のコードを追加します。

<div id="second-box">
<?php get_sidebar( 'rightbox' ); ?>
<?php get_sidebar( 'right' ); ?>
<?php get_sidebar(); ?>
</div>

編集するファイル
index.php、archive.php、category.php、page.php、author.php、search.php、single.php、tag.php

４．表示用のレイアウトを作成

style.cssファイルに下のコードを追加してレイアウトを整えます。

style.css

#primary {
  float: left;
  width: 62.5%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#secondary {
  float: riget;
  width: 36.66%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#tertiary {
  float: left;
  width: 60%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

#second-box {
  float: right;
  width: 34.09%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#second-box-area {
  width: 100%;
}

ie.css

#primary {
  float: left;
  width: 62.5%;
}
#secondary {
  float: riget;
  width: 36.66%;
}
#tertiary {
  float: left;
  width: 60%;
}

#second-box {
  float: right;
  width: 34.09%;
}
#second-box-area {
  width: 100%;
}

これで上の画像のように表示されます。
記事やサイドバーの幅は、好みで変更してください。