Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

ローカル開発環境でワードプレスオリジナルデザインを開発しよう3フォルダ構成編【HTML, CSS, JavaScript, PHP, WordPress初心者】

f:id:sgwshu:20181208133104j:plain
こんにちは。どうも!今回もワードプレス続編です。
復習はこちらから
www.fran-shushoku.com
www.fran-shushoku.com

ワードプレスのフォルダ構成

今日はシンプルにワードプレスのフォルダ構成について書いていきます。
ワードプレスを使えば記事の投稿、ページ作成をすると自動で無限大にページを作ることができます。しかし、実際に読み込んでるファイルはたった5〜8個あり大量のhtmlファイルがあるわけではありません。例えば今作ってるテーマのフォルダ内に新規でsingle.phpと言うファイルを作ります。そしてユーザーが記事ページに移動するとワードプレスが「記事ベージが開かれたのでsingle.phpを開きます」と開いて、開かれたsingle.phpの中でユーザーが開いた記事が何月何日のやつだからこの記事を開くと言う判断を自動で行いデータベースにアクセスして記事を持ってくるというイメージです。ちなみにこのsingle.phpとワードプレスが理解することができるファイルを”テンプレートファイル”と言います。
超簡単に言うと
ホームページが開かれる=>index.phpが開かれる
記事が開かれる=>single.phpが開かれてデータベースの参照して、指定の記事が開かれる

基本ページテンプレートファイル

index.php :

テーマ作成の際に必須(初期値ではホームページ用)

single.php :

投稿ページ用

page.php :

固定ページ

404.php :

URLが間違えてる時用

archive.php

記事リスト用

category.php

カテゴリーリスト用(タグに準じてリストを表示します)

search.php

検索結果のページ用
php(ワードプレス)では要素をパーツ化して再利用ができます。例えばヘッダーを1つのファイルとして作ってそれを短いコードで呼び出せたりします。

パーツ用テンプレート

header.php

footer.php

名前からわかるように、ヘッダとフッター用です。

sidebar.php

サイドバー用(主にウィジェット)

searchform.php

サーチバー用

その他

home.php

個別投稿ページのテンプレート。

page.php

固定ページのテンプレート。

category.php

カテゴリーページのテンプレート。

search.php

検索結果ページのテンプレート。

archive.php

記事一覧のテンプレート。

ホームページ用

front-page.php

home.php

どちらもホームページ用です。
なぜ3つもindex.php、home.php、front-page.phpなどとホームページ用のものがあるかって?それを今から説明します。

ワードプレスのテンプレート階層

今まで説明してきたフォルダーたちには実は優先順位があってテーマファイルの中に存在するかしないかでフォルダ構成が大きく変わってきます。
例えば:
テーマフォルダの中に

  • front-page.php
  • category.php
  • index.php
  • style.css

があるとするとホームページとして使われるのはfront-page.phpでindex.phpはホームページとしては使われません。
そしてこの時にタグからアーカイブページに行った時に使われるファイルはcategory.phpです。しかしこの時にこのphpファイルがない場合はワードプレスが「あれ?category.phpなくね?」ってなりますよね。その際に呼ばれるのがindex.phpなんです。
要は優先順位が決まっていてfront-page.phpがないならindex.php、category.phpがないならindex.phpと最終的にはindex.phpを開きます。
その順番がわかりやすくイラストになってるのでまずこれを理解するとワードプレス開発がわかりやすくなるのではないかと思います。
詳しくはこちらに載ってます。
テンプレート階層 - WordPress Codex 日本語版

よく使われるファイルのフォルダ構成

最下部のフォルダ

該当ファイルがない場合は

index.php

が開かれます。例でどんな風に使うことがあるかと言いますと:
あえてcategory.phpもarchive.phpも作らないでいるとカテゴリータグがクリックされてもアーカイブのリンクがクリックされても同じデザインをindex.phpに書き込めば2つの役割を自動でになってくれると言うことです。

絶対的にトップにあるファイルたち

要はこのファイル名を使えば間違いなくそれが呼ばれて上の例で言うとcategory.phpもarchive.phpも違うデザインを使うことができると言うわけです。

  • archive.php
  • page.php
  • front-page.php
  • 404.php
  • search.php

(他にも自分でカスタムしたものを作れますが後日解説します)

ってなわけで今回は長々とワードプレスのフォルダ構成について書きました。次回はこれを踏まえつつ、コードを書いていこうと思います。

Seee Yaaaaaaa!!!!