【Twenty Twelve】3カラムの作成方法

Twenty Twelveテーマは、デフォルトで2カラムで表示されます。
それを3カラムにする方法について、いくつか考えましたが、まずは下準備について書きます。

この記事で編集するテンプレート

functions.php
sidebar-right.php（別の名前でも可）
index.php
single.php
search.php
page.php
category.php
author.php
archive.php
tag.php

ウィジェットの追加

3カラムにするのに別のウィジェットを使用するので、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>',
) );

追加したあと、「外観」⇒「ウィジェット」ページに移動して確認すると「左サイドバー」が追加されます。

3カラム用のサイドバーの作成

functions.phpファイルで追加したウィジェットを表示するための、左サイドバー用のテンプレートを作成します。

sidebar-right.phpファイルを作成して、下にあるコードを入力します。
※sidebar.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; ?>

作成したサイドバー表示用のコードを追加

新規作成したサイドバーを表示するために下のコードを、テンプレートを追加します。

<?php get_sidebar( 'right' ); ?>

追加場所１の方法
追加する場所は、div#contentの閉じた後に追加します。

</div><!-- #content -->
<?php get_sidebar( 'right' ); ?>
</div><!-- #primary -->

追加場所2の方法
テンプレートファイルの下の方にあるget_sidebar()の前に追加します。

<?php get_sidebar( 'right' ); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

追加するテンプレートは、下のファイルになります。
index.php
single.php
search.php
page.php
category.php
author.php
archive.php
tag.php

※image.phpでも3カラムで表示する場合は、sidebarとsidebar-rightの2つを同じように追加します。
※front-page.phpを使用する場合、同じよう追加します。

スタイルに付いてTwenty Twelveでは、3カラムに使用するID（#）をデフォルトで使用していないので、そのID使用して設定してきます。

あと残すのは、style.cssファイルの設定だけですけれど、色々なスタイルの設定があるので続きは次回以降の記事で書きます。

【追記】
【Twenty Twelve】3カラムのCSS（中央に記事、両サイドにサイドバー）パターン１
【Twenty Twelve】3カラムのCSS（左に記事、右にサイドバー2つ）
【Twenty Twelve】3カラムのCSS3方法１（中央に記事、両サイドにサイドバー）
【Twenty Twelve】3カラムのCSS3方法２（中央に記事、両サイドにサイドバー）
【Twenty Twelve】3カラムのCSS（中央に記事、両サイドにサイドバー）パターン２

• Twenty Twelveで3カラム作成方法のまとめ
• 【Twenty Twelve】2カラムのサイドバー2カラム
• 【Twenty Twelve】3カラムのCSS（中央に記事、両サイドにサイドバー）パターン２
• 【Twenty Twelve】3カラムのCSS3方法２（中央に記事、両サイドにサイドバー）
• 【Twenty Twelve】3カラムのCSS3方法１（中央に記事、両サイドにサイドバー）
• 【Twenty Twelve】3カラムのCSS（左に記事、右にサイドバー2つ）
• 【Twenty Twelve】3カラムのCSS（中央に記事、両サイドにサイドバー）パターン１
• WordPressでjQueryを使うとき$を使う方法