固定ページのデザインを変える方法

この記事では固定ページのデザインを変える方法を紹介していきます。
固定ページはホーム画面に使ったり、何かの説明ページに使ったりあまり変動しないページで利用されることが多いです。

まとめ用途の記事一覧などのカスタマイズするときなど使えますよ。

WordPressの固定ページのデザインを変える方法を攻略！！

WordPressの固定ページ

固定ページに関する公式ヘルプは下記の通りです。

固定ページは投稿と似ています。どちらもタイトル、本文、関連メタデータがありますが、固定ページが投稿と違うのは時系列のブログの流れの中には含まれず、永久的な投稿のようなものであるという点です。固定ページにはカテゴリーやタグを追加することはできませんが、階層化ができます。固定ページを他の “親”固定 ページの下に配置し、グループを作成することが可能です。

固定ページ作成は投稿作成とよく似ており、投稿編集画面と同様に画面上のボックスのドラッグ＆ドロップや展開・折り畳み、表示設定タブでカスタマイズできます。この画面にはバージョン 3.2 から導入された集中執筆モードも含まれており、ビジュアル・HTML エディタの両方でフルスクリーンボタンをクリックして利用できます。ページエディタはほぼ投稿エディタと同じように動作しますが、ページ属性ボックスには特有の機能が含まれています。

親 – ページ間に階層構造を持たせることができます。たとえば、“自己紹介” ページの下に “身の上話” や “愛犬のこと” といったページを置くことができます。ページ階層の深さに制限はありません。

テンプレート – 一部のテーマには、特定のページのために特別な機能やレイアウトを追加するカスタムテンプレートが用意されています。お使いのテーマにそれがあればこのドロップダウンメニューに表示されます。

順序 – 固定ページは通常アルファベット順に並べられますが、この欄に数字を入力 (例: 最初にくるものは 1) することで好きな順序に変更できます。

固定ページについて

WordPressでは、投稿記事とは”別に”静的ページを作成することができます。
この機能を持つページが【固定ページ】です。

固定ページを使う例として

それほど頻繁に変更がないページで使用されることが多いです。

固定ページの設定は非常に簡単。

管理画面の固定ページの項目から追加することができます。

WordPressの固定ページ

投稿記事との違い

ページ属性

親

ページに親子の階層機能をもたせます。

階層化すると、ウィジェットで表示させるときなどで下記のように表示されます。

テンプレート

デザインのもとになるテンプレートを決めることができます。
これが本題です。

固定ページを表示させるためのphpファイルは
固定ページテンプレート(page.php)です。
どの固定ページにも共通のデザインで反映させるためにはpage.phpを編集します。

順序

ページの表示順序を指定します。
数値が小さいページが先に来ます。

[4]固定ページのデザインを変える方法

初期はデフォルトテンプレートが指定されています。
デフォルトテンプレートはpage.phpを示します。

各固定ページごとにデザインを変更できます
page.phpを複製します。
名前はページ内容を表すわかりやすいものにしましょう。
今回はjourney.phpとして複製します。

複製したjourney.phpの頭に

[code]

[/code]

を記載します。
[TemplateName]の名前は何でも良いです。例えばこのように。

[code]

[/code]

テンプレート選択をするために、このコメントが必要です。

管理画面に戻り、固定ページの編集画面へ移ります。
ページ属性のテンプレートのプルダウンに
コメントのTemplate Nameで書きたした名前が追加されますので、選択し更新します。

固定ページのカスタマイズをしているのに編集できていない場合には、
このテンプレート設定がうまくされているのか？を確認してください。

特定の固定ページのみデザインを変える方法

[4]とは別のやり方です。
page.phpを複製するのは同じですが、
ファイル名にpageIDもしくはスラッグを加えます。

■pageIDの場合
page-[pageID].php
page-24.php とするとpageIDが24の固定ページに対してpage-24.phpのテンプレートが適応されます。

pageIDはページ編集するURLの引数をみるとわかります。

このURLはpageIDが16の固定ページです。

■スラッグの場合
page-[slug].php
例）page-inquiry.php　とするとスラッグがinquiryの固定ページに対してpage-inquiry.phpのテンプレートが適応されます。

■参考URL

WordPress固定ページの作成方法
固定ページのテンプレート－page.php | WordPress の部屋