Twenty Elevenを3カラムにする方法


ログをしばらく続けていると、ウィジェットが多くなってきて、2カラムでは足りなくなりました。

このブログを3カラムにするにあたり、作業手順の覚え書きを残しておこうと思います。このエントリを書くにあたり、以下の記事を参考にさせていただきました。感謝いたします。

注:Twenty Elevenは“レスポンシブデザイン”なので、スマートフォンやタブレットPCの縦持ちなど、画面が横に狭い機器で閲覧した場合、1カラムで表示され、サイドバーなど残りのカラムは下方に移動してしまうことがあります。プロフィールなど大事な情報は、サイドバーだけでなく、上部メニューバーなどにもリンクを設置しておいたほうが良いでしょう。

TwentyElevenを3カラムにする方法 | 【WPCOS】WordPressカスタマイズ

[JPD]【WordPress】【twentyeleven】どうでしょう?twentyelevenを3カラム化してみたぞ!(1) | 順風堂が行く!

スポンサーリンク

1.プラグイン「Twenty Eleven Theme Extensions」を設定

まずプラグイン「Twenty Eleven Theme Extensions」を用いて、サイドバーがすべてのページに表示されるようにします。詳しくは以下のエントリをご覧ください。

ダッシュボードの「外観」からカスタマイズする(下)Twenty Eleven Theme Extensions編

2.親テーマfunctions.phpを編集

親テーマのfunctions.phpを開き、ctrl+fで「register_sidebar」を検索。一連の記述に、以下の赤字の部分を加えます。


register_sidebar( array(
        'name' => __( 'Footer Area Three', 'twentyeleven' ),
        'id' => 'sidebar-5',
        'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
        '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 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>',

    ) );
}


functions.phpの編集はホワイトアウトの危険を伴うので、細心の注意を払って作業してください。ホワイトアウトが生じる理由と対処法は、以下のエントリにとてもわかりやすくまとめられていました。

functions.phpを編集したら、サイトが真っ白になっちゃったときに試してみてね | Webourgeon

超安全にWordPressのfunctions.phpをカスタマイズする方法 | Azrael

3.sidebar.phpを編集する

sidebar.phpのsecondary .widget-area の下に、以下の赤字のコードを追加します。


            </div><!-- #secondary .widget-area -->
<div id="tertiary" class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1s' ) ) : ?>

<?php
the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class="Second Sidebar">', 'after_title' => '</h3>' ) );
?>

<?php endif; // end sidebar widget area ?>
</div><!-- #tertiary .widget-area –>

<?php endif; ?>

4.style.cssを編集する

親テーマ側と子テーマ側で作業します。たぶん子テーマ側で完結する方法があると思うのですが、なぜか反映されず、わかりませんでした。CSSについて知らない中で試行錯誤しているので、困ったものです。

▼追記
この記事を見てくださった方が、子テーマだけで3カラム化する方法について書いてくださっていました。ありがとうございます。

TwentyEleven の子テーマを親テーマをいじらず3カラム化(WordPress)--WEBシステム開発 技術的備忘録(通称 技忘録)はてなブックマーク - TwentyEleven の子テーマを親テーマをいじらず3カラム化(WordPress)--WEBシステム開発 技術的備忘録(通称 技忘録)

(1)子テーマ側

以下のコードを追加します。


/* 3カラム設定 */
body {
     padding: 0 2em;
}
#page {
     margin: 2em auto;
     max-width: 1150px;
}
#branding hgroup {
     margin: 0 7.6%;
}
#access div {
     margin: 0 7.6%;
}
#primary {
     float: left;
     margin: 0 -45% 0 0;
     width: 100%;
}
#content {
     margin: 0 55% 0 2%;
         width: 53%;
}
#secondary {   
     float: right;
        margin-right: 2%;
        width: 20%;
}
#tertiary { 
  float: left;
  margin-right: 2%;
  margin-left: 1%;
  width: 20%;
}

@media (max-width: 850px) {
    /* Simplify the basic layout */
    #main #content {
        margin: 0 2%;
        width: auto;
    }
    #nav-below {
        border-bottom: 1px solid #ddd;
        margin-bottom: 1.625em;
    }
    #main #secondary {
        float: none;
        margin: 0 2%;
        width: auto;
    }
  #main #tertiary {
        float: none;
        margin: 2% 2%;
        width: auto%;
        }

/* 3カラム設定ここまで */


各カラムの幅を変える場合、以下の(1)から(7)を調整します。(1)から(7)の数字は、下記の図の対応部分における幅の割合(%)を表します。

ScreenClip

(1)から(7)をすべて足した数が100%になるよう調整し、以下のようにコードに当てはめます。

#primary {
float: left;
margin: 0 -(3+4+5+6+7)% 0 0; ※「-」がつくことに注意
width: 100%;
}
#content {
margin: 0 (1+2)% 0 (1)%;
width: (2)%;
}
#secondary {
float: right;
margin-right: (7)%;
width: (6)%;
}
#tertiary {
float: left;
margin-right: (5)%;
margin-left: (3)%;
width: (4)%;

(2)親テーマ側

赤字の部分を追加してコメントアウトします。


/* Singular */
/*.singular #primary {
    margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
    margin: 0 5%;
    position: relative;
    width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    margin: 0 auto;
    width: 68.9%;
}

*/


次にレスポンシブデザインとして機能するようにします。


 

/* =Responsive Structure
----------------------------------------------- */
 
@media (max-width: 850px) {
    /* Simplify the basic layout */
    #main #content {
        margin: 0 2%;
        width: auto;
    }
    #nav-below {
        border-bottom: 1px solid #ddd;
        margin-bottom: 1.625em;
    }
    #main #secondary {
        float: none;
        margin: 0 2%;
        width: auto;
    }
 
/* 追加 */       
 
     #main #tertiary {
        float: none;
        margin: 2% 2%;
        width: auto%;
        }
 
/* 追加ここまで */


下記サイトを参考にさせていただきました。

【WordPress】【twentyeleven】どうでしょう?twentyelevenを3カラム化してみたぞ!(2)| お風呂の心配人が行く!  

完成!

これでTwenty Elevenが3カラムになります。

ダッシュボードの「外観」→「ウィジェット」に、「Second Sidebar」の項目が追加されているはずです。通常のサイドバー同様、ウィジェットの追加が可能になります。

注意点として、親テーマ側に変更を加えている箇所は、アップデートの際に上書きされるかもしれません。子テーマですべてを完結させる方法もあると思うのですが、わたしの知識の範囲ではわかりませんでした。

▼2016/01/09追記:
その後、数年間3カラムを続けていましたが、タブレット型デバイスの普及に伴い、レスポンシブデザインのサイトのサイドバーが表示されない(記事下にまわりこんでしまう)ユーザー環境が半数以上となりました。

サイドバーにあれこれ表示するより、どの環境でも必ず表示される上部メニューバー、記事下の関連記事リンク、フッターウィジェットエリアに必要なものを配置したほうが良いということになり、3カラムはやめました。

スポンサーリンク

スポンサーリンク
WordPress