WordPressでテンプレートファイル(固定・投稿・カスタム投稿)を作る方法
ホームページを制作していると、同じフォーマットでテキストや画像だけが入れ替わっているページがよくあります。そういったページを全てコーディングしていると、時間も作業量も多くなり効率が悪くなります。
また、労働時間が多くなると制作費とのバランスも取りにくくなってきます。
WordPressでは、そういったフォーマットが同じページは、テンプレート化することができます。
今回は、WordPressでのテンプレートファイルの作成方法をご紹介します。
ファイルの種類を確認しよう
テンプレート自体はファイルの種類を気にせず作ることができますが、しっかりと把握しておかないと今後の管理や修正に時間がかかったりもします。
ページの種類 | 優先順位[.php]( 高い–低い ) | ||||
---|---|---|---|---|---|
固定 | ページテンプレート | page-{slug} | page-{id} | page | index |
個別投稿 | single-post | single | – | – | index |
カスタム投稿 | single-{post_type} | single | – | – | index |
このように固定ページ・投稿ページ・カスタム投稿ページなよってファイルの種類が違ってきます。まずは、これを理解するようにしましょう。
>>その他のファイル優先順位は
「WordPress(ワードプレス)のテンプレートファイル優先順位」の記事から
テンプレートになるファイル名
固定ページであればpage-xxxx.phpを作成し、投稿ページであればsingle-xxxx.phpを作成します。カスタム投稿ページのファイル名は投稿ページと同じでsingle-xxxx.phpになります。
注意する点としては、xxxxに入る部分は任意になりますが、ファイルを見て一目でどんなファイルなのかわかるようにしておくと後々の修正や管理が便利です。
ファイルをテンプレート化する
上記のようにファイル名をつけたら、後はWordpressの管理画面にテンプレートを選択できるようにするだけです。
テンプレートにするファイルの中身は制作や構成によって違いますが、必ずファイルの最初に下記のコメントを記入してください。
固定ページの場合
1 2 3 4 5 6 |
<?php /* Template Name: 商品紹介 Template Post Type: page */ ?> |
固定ページの場合は、Template Post Type: pageを省略することができます。
投稿ページの場合
1 2 3 4 5 6 |
<?php /* Template Name: 商品紹介 Template Post Type: post */ ?> |
Template Post Type: に入る値をpostにします。
カスタム投稿ページの場合
1 2 3 4 5 6 |
<?php /* Template Name: ニュース記事 Template Post Type: news */ ?> |
Template Post Type: に入る値をカスタム投稿タイプの値を入れます。
作成したカスタム投稿タイプがnewsであれば、それが値になります。
コードの解説
Template Post Type: で上記のように指定することで固定ページ・投稿ページ・カスタム投稿ページに振り分けて表示することができます。
また、Template Name:は管理画面に表示するテンプレートの名前になります。こちらは管理画面に表示され、管理者だけが把握できるようになっているので、わかりやすいテンプレートの名前を付けるようにしましょう。
1つのテンプレートファイルを複数に適用する場合
1 2 3 4 5 6 |
<?php /* Template Name: 商品紹介 Template Post Type: post,menu */ ?> |
Template Post Type:の値を「,(カンマ)」で区切って指定することで複数に指定することができます。
※上記の例は、投稿タイプとカスタム投稿タイプ(menu)を指定しています。カスタム投稿タイプ(menu)を作成していると仮定しています。
テンプレートを作成したら
テンプレートファイルを作成したら、後は管理画面で「ページ(投稿)の属性」にあるテンプレートで変更するだけになります。
これでテンプレートの変更が完了です。デザインや構成はお好みで変更がしてください。
固定ページのテンプレート作成方法は検索するとよく出てきますが、投稿ページやカスタム投稿ページのテンプレートを作る方法は固定ページに比べて情報が少なかったりもします。
今回、この記事を観覧して頂いた方は、是非一緒に覚えておきましょう!