WordPressでWebサイトを作っていると、ここのページは別のデザイン、レイアウトでいきたいな、という時があります。
その際、どのようにしてオリジナルデザインのページを作成すれば良いか、ご紹介します。
WordPressでどのテンプレート(PHPファイル)が使用されるか、決定される仕組み
実は、WordPressは内部の仕組みで、こういう条件の時は、どのテンプレートで表示する、というのが自動的に決まっています。
私もWordPressを始めた初期の頃は、そのことを知らず、テンプレートの仕組みがよく分かりませんでした。
WordPress自体が自動的に使うテンプレート(PHPファイル)を決めていたのです。
「投稿」と「固定ページ」
管理画面から投稿できる記事の種類に、「投稿」と「固定ページ」があります。
「投稿」は、singleから始まるテンプレートが使用され、「固定ページ」は、pageから始まるテンプレートが自動的に使用されます。
テンプレート階層、というもので決まっていて、こちらの本家Codexに記載があります。
左側にあるテンプレートが存在する場合、それを優先的に使用して行く仕組みになっています。
なので、あえて作成しなければ、通常は「投稿」からのポストは、single.php、「固定ページ」からの投稿は、page.php のテンプレートが使用されることになります。
オリジナルテンプレート(PHPファイル)を作りたい時
ここから、自分でオリジナルテンプレートを作成する際のお話です。
「固定ページ」でご説明します。
管理画面から固定ページをクリックし、普通に記事を書きます。
その際、パーマリンクをアルファベットで指定します。例えば、sampleと入力。
保存します。
その後、
- テンプレートファイルのあるディレクトリまで移動
htdocs/wordpress/wp-content/themes/twenty-seventeen/ 等 - page.php をコピーし、同じディレクトリに貼り付け
- pageコピー.php の名前を変更し、page-sample.php と、先ほど記事を入力した際にパーマリンクに指定したアルファベットをpage-の後に続けてファイル名にする
そして、固定ページ「sample」のページを見てみましょう。
不思議なことに自然と、page-sample.php のテンプレートが使用されていました。
page.php よりも優先度の高い、page-sample.php が出現したので、そちらのテンプレートが使用されるようになったんですね。
このようにして、各ページで使用するオリジナルテンプレートを作成することができます。
表示されているPHPファイル名がわかるプラグイン
今回、画面上部に使用しているテンプレート名を表示させていました。
これは、「Show Current Template」というプラグインで実現することができます。
どのテンプレートが使用されているか表示されるので、とても開発の役に立ちますよ!
私も、新しいWordPressをインストールしたら、まず入れるプラグインの1つです。
オリジナルデザインのページを作成していきましょう!