twenty twelveを3カラムにする方法

WordPress3.5のデフォルトテーマであるtwenty twelveを3カラムにする方法をご紹介します。

【sidebar-left.phpの作成】
[手順1]「sidebar-left.php」という空ファイルを作成し、「wp-content>themes>twentytwelve」の直下に保存してください。

[手順2]「sidebar.php」のコードを全てコピーし、「sidebar-left.php」に貼り付けてください。
※冒頭の定義部分も含めて全てコピーしてください

[手順3]赤字部分のコードを青字のコードに置き換えてください。

★変更前★
<?php if ( is_active_sidebar( ‘sidebar-1’ ) ) : ?>
<div id=”secondary” class=”widget-area” role=”complementary”>
<?php dynamic_sidebar( ‘sidebar-1’ ); ?>
</div><!– #secondary –>
<?php endif; ?>

★変更後★
<?php if ( is_active_sidebar( ‘sidebar-left’ ) ) : ?>
<div id=”sidebar-left” class=”widget-area” role=”complementary”>
<?php dynamic_sidebar( ‘sidebar-left’ ); ?>
</div><!– #sidebar-left –>
<?php endif; ?>

【function.phpの修正】
以下のコードをfunction.phpに貼り付けてください。

register_sidebar( array(
‘name’ => ‘左サイドバー’,
‘id’ => ‘sidebar-left’,
‘description’ => ‘sidebar-left’,
‘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’ => __( ‘Second Front Page Widget Area’, ‘twentytwelve’ ),
‘id’ => ‘sidebar-3’,
‘description’ => __( ‘Appears when using the optional Front Page template with a page set as Static Front Page’, ‘twentytwelve’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h3 class=”widget-title”>’,
‘after_title’ => ‘</h3>’,
) );

成功すると、「外観>ウィジェット」に『左サイドバー』が表示されるのが確認できると思います。

【style.cssの修正】
以下のコードをstyle.cssに貼り付けてください。貼り付ける位置はどこでも構いません。
twenty twelveの横幅は960pxですので、合計が960pxにおさまるように、下記コード中の数字を自由に変更してください。

#sidebar-left {
float: left;
width: 240px;
margin:  0 0 0 0 ;
}#primary {
float: left;
width: 520PX;
margin:  0 0 0 10px ;
}#secondary {
float: right;
width: 180px;
margin:  0 0 0 10px ;
}

【参考サイト】
1000old.com
http://1000old.com/oss/twenty-twelve-3columns/
Webourgeon
http://webourgeon.com/2010/10/24/change-a-layout-of-twenty-ten-5-3clum-2/#more-93

/2015.01.03追記/
【それぞれのテンプレートファイルに3つ目のカラムを読み込ませる】
3カラム化したいテンプレートファイル全てに下記コードを加筆してください。
具体的には、index.php(やhome.php他)、archive.php、category.phpなどですね。

<?php get_sidebar(‘left’); ?>

これを加筆しないと、せっかく作成した3つ目のカラムが、サイト上に表示されません。
当然と言えば当然ですが、自身がハマってしまったので追記します。

4 thoughts on “twenty twelveを3カラムにする方法

  1. Akira Kamita

    挿入されるregister_sidebaのコードのシングルクォート、ダブルクォートが全角に変換されているので、エラーが出ました。
    また、次のエラーが出るのですが。サイトは表示され、ウィジェットに左メニューはあります。
    Warning: Cannot modify header information – headers already sent by (output started at /usr/home/mw2p22lebc/www/htdocs/wordpress/wp-content/themes/twentytwelve/functions.php:1) in /usr/home/mw2p22lebc/www/htdocs/wordpress/wp-includes/pluggable.php on line 875

    ちなみに、sidebar-left.phpで下記を表示しようとしていますが、表示されません。後の設定は教示されたようにしましたが。
    よろしくお願いします。

    <a href="”>

    <a href="”>

    Reply
  2. Akira Kamita

    何度もすみません。コードが遅れないようで。
    サイトのアドレスを送りました。
    この右下にあるリストを左サイドバーに表示しようとしているのです。
    よろしく。

    Reply

コメントを残す

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