WordPress技術

WordPressでオリジナルデザインのページを作成したい時

WordPressでWebサイトを作っていると、ここのページは別のデザイン、レイアウトでいきたいな、という時があります。

その際、どのようにしてオリジナルデザインのページを作成すれば良いか、ご紹介します。

WordPressでどのテンプレート(PHPファイル)が使用されるか、決定される仕組み

実は、WordPressは内部の仕組みで、こういう条件の時は、どのテンプレートで表示する、というのが自動的に決まっています。
私もWordPressを始めた初期の頃は、そのことを知らず、テンプレートの仕組みがよく分かりませんでした。

WordPress自体が自動的に使うテンプレート(PHPファイル)を決めていたのです。

「投稿」と「固定ページ」

管理画面から投稿できる記事の種類に、「投稿」と「固定ページ」があります。
「投稿」は、singleから始まるテンプレートが使用され、「固定ページ」は、pageから始まるテンプレートが自動的に使用されます。

テンプレート階層、というもので決まっていて、こちらの本家Codexに記載があります。
wordpressテンプレート階層

左側にあるテンプレートが存在する場合、それを優先的に使用して行く仕組みになっています。
なので、あえて作成しなければ、通常は「投稿」からのポストは、single.php「固定ページ」からの投稿は、page.php のテンプレートが使用されることになります。
single.phpが使用される

page.phpが使用される

オリジナルテンプレート(PHPファイル)を作りたい時

ここから、自分でオリジナルテンプレートを作成する際のお話です。
「固定ページ」でご説明します。

管理画面から固定ページをクリックし、普通に記事を書きます。
その際、パーマリンクをアルファベットで指定します。例えば、sampleと入力。
保存します。
パーマリンクをsampleと指定

その後、

  • テンプレートファイルのあるディレクトリまで移動
    htdocs/wordpress/wp-content/themes/twenty-seventeen/ 等
  • page.php をコピーし、同じディレクトリに貼り付け
  • pageコピー.php の名前を変更し、page-sample.php と、先ほど記事を入力した際にパーマリンクに指定したアルファベットをpage-の後に続けてファイル名にする

そして、固定ページ「sample」のページを見てみましょう。
不思議なことに自然と、page-sample.php のテンプレートが使用されていました。
page-sample.phpが使用される

page.php よりも優先度の高い、page-sample.php が出現したので、そちらのテンプレートが使用されるようになったんですね。

このようにして、各ページで使用するオリジナルテンプレートを作成することができます。

表示されているPHPファイル名がわかるプラグイン

今回、画面上部に使用しているテンプレート名を表示させていました。
これは、「Show Current Template」というプラグインで実現することができます。

どのテンプレートが使用されているか表示されるので、とても開発の役に立ちますよ!
私も、新しいWordPressをインストールしたら、まず入れるプラグインの1つです。

オリジナルデザインのページを作成していきましょう!

  • このエントリーをはてなブックマークに追加