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

Extend Twenty Eleven

こんばんわぷー。Twenty Eleven はいとをかしなテーマなわけですが、シングル記事や(ショーケーステンプレートを除く)ページにサイドバーがなく、ワンカラムになっている点が気に入らない、という方も多いようです。

先日の WordBench 川崎勉強会でも西川さんが悩んでいたのですが、その時にご紹介した方法にもう一つ追加してまとめてみました。

必要なことは以下の2つです。

  • single.php/page.php に get_sidebar(); を追加する
  • CSS を調整して、サイドバーの表示される余地を作る

…なのですが、Twenty Eleven テーマをそのまま書き換えると、テーマのバージョンアップの際に苦労は水の泡になります。あと、CSS の変更、結構めんどいです。なので、以下の簡単な方法をオススメします。

Twenty Eleven Theme Extension プラグインを使う

一つ目は Twenty Eleven Theme Extension プラグインを使う方法。Twenty Eleven テーマを拡張することができ、2カラムにする以外にも固定投稿をヘッドライン的に表示する設定にしたり、このプラグインの設定画面に CSS を書いて、カスタム CSS としてテーマに反映することもできます。

WordPress 公式ディレクトリに登録されているので、プラグインの新規追加からさくっと追加して、有効化してください。

Twenty Eleven Theme Extensions 設定画面

残念ながらこの記事を書いている現在、このプラグインは i18n (国際)化に対応していないので、表示は英語です。僕が翻訳しようにも反映する術がござんせん。

でも2カラムにするなら、一番上と二番目のチェックボックスにチェックを入れるだけ!

シングル投稿にサイドバーがつきます

で、2カラムになったシングル投稿ページがこんな感じ。ナビゲーションが右寄せになってて、なんとなーく違和感があるなーと思った方は “Center the navigation links~” にもチェックを入れると…

ナビゲーションをセンタリングしてみた

「石崎くんがそのままナビゲーションをセンタリングだーーーー!」とばかりに綺麗に決まります(※念の為に書いておくとキャプテン翼ネタです。あしからず)。

Twenty Eleven Child with Sidebar Support (子テーマ)を使う

2つ目の方法は、Twenty Eleven Child with Sidebar Support という名前のテーマを使う方法。Twenty Eleven の子テーマとして配布されており、wp-content/themes/ 内に配置してあげれば OK。

Twenty Eleven Child with Sidebar Support テーマを有効化

中身は style.css と single.php しかないテーマなのでテーマのスクリーンショットすら表示されませんが、テーマの管理から有効化してあげるだけ。

シングル記事にサイドバーがつくも、ナビゲーションは非表示

ほら、サイドバー登場。

…とここでおかしいなと思った方、鋭い!

「←前へ」「次へ→」といったナビゲーションがないのです。これは、このテーマの style.css で nav-single が display: none; になっているから。表示したい方は適宜ごにょごにょしてあげてください。あと、page.php もないから固定ページは2カラムになりません。必要な方はごにょ(ry

用途に合わせて選んで使おう

…とまぁ2つの方法をご紹介したわけですが、残念ながらどちらも万能ではありません。

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

でもお手軽なので、Twenty Eleven をさくっと2カラムにしたい場合はオススメです。

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

子テーマでの開発を考えるとこちらがオススメです。

Twenty Eleven のシングル記事にサイドバーを1分で表示する2つの方法” への25件のコメント

  1. ピンバック: Twenty Elevenカスタマイズ方法 | Takeyuki Fukumoto

  2. ピンバック: レスポンシブWebデザイン「Twenty Eleven」 | WordPress ワードプレス とは

  3. ピンバック: Twenty Eleven ブログ記事ページにサイドバーを設置するプラグイン | Proud

  4. ピンバック: twentyeleven 記事ページにもウィジェットを表示したい場合。 2カラム化。 | nununuBlog

  5. ピンバック: WordpressのテーマをTwenty Elevenにしてみた。 | pc-memo

  6. ピンバック: 個別記事にもサイドバー | 四柱推命の境界

  7. ピンバック: 個別記事にもサイドバー | WEBIGGINER

  8. ピンバック: 投稿/固定ページを2columnに | ショコラのメモ

  9. ピンバック: WordPressのテンプレートいじりが楽しすぎるので、最近お世話になってるサイトのご紹介 | 切り抜きジャック

  10. ピンバック: 固定ページにサイドバー | WEBIGGINER

  11. Twenty Eleven Theme Extensionという便利なプラグインの存在を知り、さらに2011が好きになった。このテンプレート作った人尊敬する。

  12. ピンバック: 結局thematicを使ってみることにしようかと思ったけど。 | Acid Note

  13. ピンバック: WordPress初心者の私が参考にした20記事 | みんつのブログ

  14. ピンバック: メモ20121004(2) | Nacky – Snowland.net

  15. ピンバック: ブログ歴6ヶ月の初心者パパでも出来た、WordPress移転の為にやった5つの事(後編) | futapapa

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください