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

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


公式ヘルプは下記の通り

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

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

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

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

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

[1]固定ページについて

投稿記事とは別に静的ページを作成することができます。
この機能を持たしたページが固定ページです。
主にWordpressを企業向けサイトで使用したとした場合、会社概要やサイトマップなど
変更が少ないページで使用されます。

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

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

[2]投稿記事との違い

固定ページには投稿記事の投稿時間のような作成時刻のデータは持っていません。
カテゴリやタグを設定できません。
編集方法は投稿記事と同じく、ビジュアルエディタ、htmlエディタを使用します。
ページ属性を持ちます。

[3] ページ属性

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

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

テンプレート

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

順序

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

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

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

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

複製したjourney.phpの頭に

<?php
/*
Template Name: [TemplateName]
*/
?>

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

<?php
/*
Template Name: journey
*/
?>

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

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

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

[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 の部屋

「固定ページのデザインを変える方法」への15件のフィードバック

  1. ピンバック: ESPERANZA » WordPress_pacos

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>