【WordPress】ページテンプレートを作成して、固定ページのレイアウトを変更する方法

ナマスカーラ！
パプリ子です。
今回は、前回サイドバーを外した場所にできた空白をどうにかすべく、ページテンプレートを作成していきますよ。

前回の記事は、コチラ↓↓↓

この記事の通りに、条件分岐タグを使ってサイドバーやウィジェットを外すと、下の図のようなことになると思います。

サイドバーがあったはずの場所に、何もない空間ができてしまう…
気にならない方はそのままでいいと思います。
広告ウィジェットを条件分岐させて、ここに広告なんかを表示させてもいいですよね。

ですが、パプリ子はサイドバーがなくなった場所まで、めいっぱいコンテンツを引き伸ばしたかったので、固定ページ用のテンプレートを作成しました。

このブログ内ですと、パプリ子についてとプライバシーポリシーのページに、これからご紹介するカスタマイズが適用されています。

大まかな流れと必要なスキル

③④は、お使いのテーマによって不要な場合があります。
ヘッダー部分とコンテンツ部分の境界が曖昧だったり、floatを使って回り込んでいるウィジェット（サイドバー）などの記述がヘッダー部分にある場合は、試してみてください。
あるいは、固定ページのみグローバルメニューを表示させたくない場合などにも、応用が効くかもしれません。

前回に引き続き、このカスタマイズのは、基本的にコピペでOKなので、特別にPHPやHTML/CSSの知識がなくても大丈夫です。
ですが、都合上、以下のスキルを習得している＆環境が整っていることを前提として、話を進めていきます。

子テーマの有効化については、この記事↓↓↓で少し触れているので、まだ作成できていない方は、チャレンジしてみてください。

そもそも、テンプレートって何？

リファレンスを見ると分かると思うのですが、WordPressの全てのページは、「どのテンプレート（PHPファイル）を読み込むか」の優先順位が決まっています。

①カスタムテンプレートファイル
↓
②page-{slug}.php
例えば固定ページのスラッグがxxxに設定されていた場合、page-xxx.phpというファイルが読み込まれます。
↓
③page-{id}.php
page-1.phpなど、固定ページにIDが割り振ってある場合、それと一致するIDのものが読み込まれます。
↓
④page.php
固定ページ用テンプレート。大抵のテーマに固定ページ用テンプレートとして、プリセットで入っています。固定ページに何もアクションを加えなかった場合、大抵このファイルが読み込まれます。
↓
⑤singular.php
WordPress4.3から導入されたテンプレート。投稿ページと固定ページ両用のテンプレートなので、投稿ページと固定ページでテンプレートを分ける必要がない場合は、これだけ用意しておくとラク。
↓
⑥index.php
これをテキストエディタで開くと、Silence is golden.(沈黙は金なり)というふざけたコメントアウトが出てきます。つまり、これが読み込まれる事態は想定されていないということらしいですね。

固定ページの場合、この順番で、テンプレートファイルが読み込まれます。
クローラーのようなものがファイルを探していって、該当するものがなければ次へ次へと進んでいく、というイメージでしょうか。
つまり、カスタムテンプレートファイルを作成して、それを有効にしておけば、真っ先にそのテンプレートが適用される、ということです。

①早速、固定ページ用テンプレート（PHPファイル）を作成しよう

テキストエディタを開いて、コメントアウトの記述をします。

Template Name: 固定ページテンプレート１の、「固定ページテンプレート1」の部分は、どんな名前でもいいです。
ここで記述した名前が、【固定ページの属性】という項目のテンプレート一覧に表示されます。
もちろん、後から変更も可能なので、適当に分かりやすい名前を書いておきましょう。

そうして、コメントアウトを記述したものを拡張子.phpで保存します。
これも、ファイル名は何でもいいです。
が、テンプレートファイルなので、わかりやすく「template1.php」とかいいと思います。
ちなみにパプリ子は、固定ページでスラッグを使用する予定がないので、「page-template1.php」という名前でテンプレートファイルを作成しました。

②作成したテンプレートファイルを、FTPソフトを用いて子テーマの直下フォルダへアップロードする

お使いのFTPソフトを用いて、子テーマの直下フォルダに作成したテンプレートファイルをアップロードしましょう。
エックスサーバー
をお使いの方は、該当ドメインｰ>public_html→wp-content→themes→子テーマで進んでください。

そうして、WordPressのダッシュボードに戻って、固定ページでテンプレートを適用させてみると…

真っ白！！！

例に挙げた固定ページ、よく見ると本文に「ほげほげ」と書いてあるのですが、それが反映されていないどころか、固定ページのタイトルすら映し出されていません。
というのも、先程コメントアウトを記述して保存したファイルには、コンテンツ部分を読み込むための命令が書かれていないからです。

テンプレートというのは、いわばドレスようなもの。
衣服をまとうための肉体があってはじめて、ドレスアップを楽しむことができますよね。
そういうわけで、先程のテンプレートを、肉付けしていきましょう。

③テンプレートファイルに、コンテンツ読み込みのための記述を加える

前の段階で、固定ページ用のファイルは、読み込みの優先順位が決まっているとお話しましたね。
そして、大抵のテーマには、固定ページ用のファイルとして、page.phpがプリセットで入っていることも説明しました。
ということは、親テーマのpage.phpの中身を、そっくりそのまま引っ張ってきてしまえば、とりあえずは動くということです。

早速やっていきますよ。
Wordpressのダッシュボードを開いて、
外観→テーマの編集→親テーマのファイル→page.phpと進みます。
子テーマのリンクから進んでも結構ですし、「テーマの選択」から親テーマを選択して開いても大丈夫です。

親テーマのフォルダにアクセスしたら、「page.php」というファイルを探して、記述内容をまるっとコピーしてしまいましょう。

そうしたら、コピーした内容を、作成したテンプレートファイルに貼り付けます。
この作業は、オフラインでテキストエディタを使用→FTPソフトを使ってアップロードしてもいいですし、WordPressダッシュボードの「テーマの編集」から直に編集してもいいです。
最初と最後のPHPのタグは、重複した箇所を適当に削ってくださいね。

これで固定ページに戻って、テンプレートを適用させると…


今度はちゃんと、コンテンツが表示されましたね。
サーバー変数を用いて条件分岐させているので、このサンプルページもサイドバーがなくなっています。

ですが！
このままでは、もともと用意されていた固定ページと同じレイアウトになってしまい、テンプレートの意味がありません。
そこで、レイアウトのカスタマイズをしやすく（CSSをいじりやすく）するために、コンテンツを読み込むためのパーツを直読み込みに変更します。

③CSSデザインを容易にするため、テンプレートファイル内のパーツを直読み込みに書き換える

まず、先程と同じ手順で、親テーマのヘッダーファイルをコピペします。
外観→テーマの編集→親テーマ→header.phpの順に進んで下さい。

次に、コンテンツの本体部分となる要素もコピペします。

Simplicity2をお使いの方は、なんとなく分かるかと思いますが、このテーマの固定ページも、get_template_partという関数を使って、page-amp.phpとpage-page.phpというテンプレートファイルを読み込んでいます。
関数get_template_partは、WordPressのプリセット関数ですが、動き方としてはアクションフックのような感じです。
ヘッダーはヘッダーファイルから、コンテンツ部分はコンテンツファイルから、色々なファイルからパーツを集めてきて、ページを出力しています。

つまり、Simplicity2は、固定ページファイルに、直にコンテンツを読み込むための記述があるわけではないんですね。
それをコピペ技を使って、直読み込みに変えていくのが、この作業です。

本来ならば、コンテンツの本体部分に関する記述をコピペしてしまえば、それで事足りると思うのですが、Simplicity2の場合は、テーマのヘッダーファイルにコンテンツ本体(body)部分に関する記述もあるので、page-page.phpの中身も、一緒に引っ張ってきましょう。
ヘッダーは、先程引っ張ってきたものがあるので、

先頭のこの部分は削ってしまって大丈夫です。

④直読み込みしたパーツ部分に、任意のタグ付けをする

さて、これで直読み込みは完成しました。
ここから、CSSのデザインをして、固定ページのレイアウトをカスタマイズしていくのですが、その際にいじったCSSスタイルシートの内容は、固定ページのみに反映されるわけではありません。
例えば、コンテンツを囲っているmainというクラス名のdivの幅をwidth:1800px;などど画面いっぱいにして、margin-left:auto;とmargin-right:auto;を記述したとします。
確かにこれで、固定ページのコンテンツ幅も広がり、中央寄せもできるのですが、mainというクラス名は、固定ページ特有のものではありません。
記事ページにも、メインコンテンツを囲むものとして同じクラス名が使われているので、意図せずに記事ページまでもがサイドバーを吹っ飛ばした全幅表示になってしまうのです。
これでは、困りますよね。

それを防ぐために、作成したテンプレート内でだけ有効な独自タグを、要所要所に挿し込んでいきます。

これは、お使いのテーマごとに差があるので、なんとも言えないのですが、ヘッダーとメインコンテンツの間に、任意のタグを挿入（divなどで囲う）すると、カスタマイズがラクになります。
Simplicity2を使っているパプリ子は、ヘッダー部分のコンテンツ本体を囲っている要素のクラス名を書き換えて、独自CSSを適用させています。

都合上、コードの直貼りではなく画像で申し訳ないのですが、パプリ子はid="main"となっている部分を、id="main-template"と、書き換えています。

気になる方は、パプリコ！についてなどの1カラム設定の固定ページを、デベロッパーツールで覗いてみてくださいね。

※GoogleChromeを使っているときにF12キー（Macの方は右クリック→検証）を押すと、そのページのHTML/CSSコードが見られます。
（ただ、ページがPHPで出力されている場合、適当なHTMLコードが自動的に生成されて出力されるので、必ずしもそのページが、デベロッパーツールで表示されているコードによって成り立っている、というわけでもありません）

ちなみに、CSSはこんな感じで、固定ページコンテンツのセンタリングを実装しています。

Simplicity2をお使いの方で、グローバルメニューを削ってしまいたい方は、ヘッダーのすぐ下の

を削ってしまうと良いと思います。
これを過去の記事にあるサーバー変数を使った条件分岐と組み合わせて、遊んでみてください。

なんとなく、やりたいことは出来そうでしょうか？
自分なりに取捨選択・アレンジして、カスタマイズを楽しんでください！