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

こんにちは。どうも！今回もワードプレス続編です。今回はワードプレスがどういった順番でテーマファイルを読み込んでるかを簡単に解説していきます。

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

今日はシンプルにワードプレスのフォルダ構成について書いていきます。
ワードプレスを使えば記事の投稿、ページ作成をすると自動で無限大にページを作ることができます。しかし、実際に読み込んでるファイルはたった５〜８個あり大量の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を開きます。その順番がわかりやすくイラストになってるのでまずこれを理解するとワードプレス開発がわかりやすくなるのではないかと思います。詳しくはこちらに載ってます。

wpdocs.osdn.jp

外部リンク

 

31 Users

117 Pockets

テンプレート階層 - WordPress Codex 日本語版

https://wpdocs.osdn.jp/テンプレート階層

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

最下部のフォルダ

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

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!!!!

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。