Twenty Thirteen の固定ページにテンプレートを追加する方法

  • このエントリーをはてなブックマークに追加
  • 0
Twenty Thirteen

WordPress のデフォルトテーマである Twenty Thirteen には、固定ページのテンプレートがありません。そこで固定ページのテンプレートを追加する方法をまとめておきます。追加した上で、そのテンプレート専用のレイアウトなどにする方法もあります。

まずはじめに、固定ページのテンプレートとは?

固定ページとは WordPress のページ作成タイプの 1 つです。ブログのような時系列での投稿とは違い、時間軸とは独立したページを作成できます。階層構造を持っていて、いわゆるホームページのページに近い役割があります。

WordPress の「投稿」はブログ、「固定ページ」はホームページという感じで認識しておくといいと思います。

そして、この固定ページは、ページごとに異なるレイアウトを適用できる、テンプレートというものを追加できます。このテンプレートの数だけ、レイアウトを用意することができ、ページ A にはテンプレート A、ページ B にはテンプレート B のように使い分けることができます。

Twenty Twelve の固定ページテンプレートの場合

例えば、WordPress のデフォルトテーマの 1 つである Twenty Twelve には、以下のような 3 つのテンプレートが備わっています。

Twenty Twelve の固定ページテンプレート

  • デフォルトテンプレート
  • フロントページテンプレート
  • 全幅ページテンプレート、サイドバーなし

そして、固定ページごとに、このテンプレートを選ぶことができます。

Twenty Twelveページ属性

Twenty Thirteen には固定ページテンプレートがない

しかし、Twenty Thirteen にはこのテンプレートがありません。固定ページのレイアウトは、サイト全体のレイアウトと共通したものになります。Twenty Thirteen のレイアウトは、ワンカラムか、右サイドバーの 2 カラムの 2 パターンです。ですので、2 カラムの設定にしていた場合は、「投稿」も「固定ページ」も共通して 2 カラムになります。

Twenty Thirteenページ属性

実践:ワンカラムのテンプレートを追加する

それでは、この Twenty Thirteen に固定ページのテンプレートを追加したいと思います。追加するのはワンカラムのテンプレートです。なぜワンカラムのテンプレートを追加するのか? それは、固定ページごとに、ワンカラムと 2 カラムのレイアウトを選べるようにするためです。

前提として、Twenty Thirteen の基本の設定を 2 カラムにしておきます(これはサイドバー(副ウェジェットエリア)にウィジェットを 1 つでも追加すれば、自動的に 2 カラムになります)。

この場合、通常固定ページも 2 カラムになってしまうのですが、そこにワンカラムのテンプレートを用意することで、2 カラムとワンカラムを使い分けることができる、というわけです。

Twenty Thirteen の固定ページへテンプレートを追加する方法

(1) 固定ページテンプレート(page.php)を複製する

まずは、デフォルトの固定ページのテンプレートに該当する PHP ファイル(page.php)を探して、複製します。

page.php → 複製

(2) 複製した PHP ファイルの名称を変える

複製したファイルに名前をつけてください。今回はワンカラムのページテンプレートにするので【 onecolumn-page.php 】としました。

page.phpのコピー → onecolumn-page.php にリネーム

(3) 複製した PHP ファイルを編集する

onecolumn-page.php のファイルを以下の様に書き換えます。変更点は 2 点。冒頭のテンプレートの説明部分の書き換えと、下部のサイドバー出力の PHP タグの削除です。

  • Template Name と Description を追記
  • サイドバーPHPタグの削除

(4) 専用の CSS セレクタを指定する

複製したファイルの CSS を個別に指定できるように、専用のセレクタを追加します。onecolumn-page.php の <article> 〜 </article> の間を囲みます。今回は <div> で囲みましたが、もっとスマートな方法があるかもしれません。

  • <article> 〜 </article> の間に <div class=”one-column”> 〜 </div> を追加

固定ページを確認してみましょう

固定ページの編集画面を確認してみましょう。【ページ属性】を見てみると、【テンプレート】という項目が表示されています。

Twenty Thirteenページ属性テンプレート

これで、デフォルトテンプレートか追加したワンカラムテンプレートを選べるようになります。ワンカラムテンプレートのレイアウトを変更したい場合は、スタイルシートで追記したセレクタを使った指定を行えば OK です。先ほどの例で言うと、ワンカラムテンプレートの横幅を広げたいときは以下のようにします。

Twenty Thirteen では、副ウィジェットエリアに何かウィジェットを追加していないと、デフォルトテンプレートでもワンカラム表示になるのでご注意ください。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメント

  1. huarache noir rouge より:

    Hey just happened upon your website from Google after I typed in, “%BLOGTITLE%” or perhaps something similar (can’t quite remember exactly). Anyhow, I’m relieved I found it because your subject material is exactly what I’m searching for (writing a college paper) and I hope you don’t mind if I collect some material from here and I will of course credit you as the reference. Thanks.
    huarache noir rouge http://ow.ly/P1LGT

コメントをどうぞ

メールアドレスが公開されることはありません。