【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>',
) );

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

3culumn

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' ); ?>

追加場所1の方法
追加する場所は、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(中央に記事、両サイドにサイドバー)パターン1
【Twenty Twelve】3カラムのCSS(左に記事、右にサイドバー2つ)
【Twenty Twelve】3カラムのCSS3方法1(中央に記事、両サイドにサイドバー)
【Twenty Twelve】3カラムのCSS3方法2(中央に記事、両サイドにサイドバー)
【Twenty Twelve】3カラムのCSS(中央に記事、両サイドにサイドバー)パターン2

【Twenty Twelve】3カラムの作成方法」への2件のフィードバック

  1. goromin

    初めまして、最近初めてwordpressに着手し、何かいい3カラム表示の方法が無いかなぁと思い検索してこのサイトにたどり着きました。
    結果としては、無事3カラム(中央記事、右左サイドバーの作成)に成功しました。このサイトのおかげです。ありがとうございました。

    ところで、こちらのページに書いてある「作成したサイドバー表示用のコードを追加」で追加場所1に追加したところ、本文記事の下に左サイドバーが行ってしまいました。
    その後追加場所2に直すと無事左に回ったのですが、これは私が悪かったのでしょうか?
    当方htmlやらにはとても疎く、このページの分かりやすい説明でも四苦八苦するほどで、何が原因かというのが分かっていません。
    もしよろしければ回答をお願いいたします。

    返信
    1. tama 投稿作成者

      コメントありがとうございます。
      かなり前の記事なので記憶をたどりながら回答します。

      追加場所1でコードの追加をすると、サイドバーが二つできます。
      この段階で、サイトバーなどのサイトの表示位置は、元からあるスタイル(style.css)設定により表示されます。
      追加場所1を追加した段階では、あくまでもサイドバーを二つ作成しただけということになり、サイトの表示を設定するには、別途style.cssを設定する必要があります。

      スタイル設定に関しては、この記事の追記や関連記事を書いてあります。よろしければそちらをご覧ください。

      返信

コメントを残す

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