Twenty Eleven 2カラム化

WordPressのデフォルトテーマ「Twenty Eleven」を使おうと思いテーマを有効化して、「テーマの設定」から2カラムを選んでみても、個別ページと、固定ページは1カラムのままという、なんとも中途半端な感じになってしまい、いっそシングルカラムで使ったろか!とも思いましたが、これまで2カラムで扱ってきてたので、どうもしっくりきません。

テーマファイルをいじればいいのはわかっていますが、なんかサクっと出来る方法ないかなぁ?と、いつもように他力本願で彷徨いていたら、救世主あらわる!!

Twenty Eleven のシングル記事にサイドバーを1分で表示する2つの方法 | Odysseygate.com

さすがでございます!
紹介されている方法は2つ

  1. プラグインを使う>Twenty Eleven Theme Extension
  2. 子テーマを使う>Twenty Eleven Child with Sidebar Support

プラグインを使った場合は、

Twenty Eleven Theme Extension プラグインは現在のところ Twenty Eleven テーマを使っているときにしか Theme Extension メニューを選べないため、たとえば Twenty Eleven の子テーマを使っている場合には現状まったく役に立ちません。残念。

とのこと。
では、子テーマのほうはというと、

Twenty Eleven Child with Sidebar Support テーマは、さきほども書いたとおりナビゲーションが非表示だったり、固定ページは自分で使わなければいけなかったりと手間はかかる反面、子テーマですから このテーマをベースに自分色のテーマを仕上げてもよし、自分の子テーマにこのテーマの CSS とテンプレートを取り入れるもよし。

と、こちらも一長一短です。
後で何かと調整のできる子テーマでの2カラム化を選択しました。

ナビゲーションの「←前へ」「次へ→」を表示させたかったので、「style.css で nav-single が display: none; になっているから」ということなので style.css には、 Twenty Eleven からCSS持ってきてますよ〜ってあるだけで、何もスタイルの指定がされていませんでした。

single.php を覗いてみるとナビゲーションのところが「<!– Remove the “Previous” and “Next” links, uncomment if you’d still like this functionality –>」で囲われていて親テーマと違う箇所なので、これを削除して無事ナビゲーションが表示されました。

次は、固定ページの2カラム化をしてあげる必要があります。これは、子テーマ page.php を作成して、親テーマの page.php の中身をコピー。そして

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

となるように、<?php get_sidebar(); ?>を追記して完了です。
これで、一通り2カラムになったはずです。

ウチでは、「Twenty Eleven」の機能を色々使ってみようということで、トップページに Showcase Template の固定ページを設定しています。この場合、デフォルトで2カラム幅になっていますが、サイドバーにウィジェットを入れても表示されず、「ショーケースサイドバー」というところにウィジェットを設定する必要があります。しかし、これも「テーマの設定」から2カラム(右サイドバー)を選んでも、サイドバーが左のままになってしまいます。他のページが右サイドバーだと、やはりバランスが悪いので、これも修正することになります。

「テーマの設定」から左サイドバーを選んで全部左サイドバーにするってのもありですが、ここは「右」にこだわってみます。

カラムの左右入れ替えといったら、CSSの「float」と「margin」の設定です。これもわかっているけど、自分でやるのが面倒(イヤそんな面倒なことじゃないけど)なので、こちらも出来上がりを拝借したします。

WordPress 3.2.1 twentyelevenの子テーマを作ってカスタマイズ:showcaseテンプレートでサイドバーの位置を左から右に変更する | Little Moo

こちらで非常に詳しく紹介されています。
すでに Twenty Eleven Child with Sidebar Support という子テーマを使っているので、その style.css に、

.page-template-showcase-php section.recent-posts {
float: left;
margin: 0 31% 0 0;
}

.page-template-showcase-php #main .widget-area {
float: right;
margin: 0 0 0 -22.15%;
}

を追記して完了です。
これで、 Showcase Template を使ったトップページも右サイドバーの2カラムになり、 Twenty Eleven の2カラム化が出来ました。