WPの自作テーマの基本ファイル構成のまとめ | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

技術ブログ

WPの自作テーマの基本ファイル構成のまとめ

2025.03.06.

WordPress

タグ

X Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPressで自作テーマを作成する際には、テーマファイルをどこに配置するかと、各テンプレートファイルがどのように読み込まれるかを理解しておくことが重要です。以下では、ファイルの保存場所・ファイル名・読み込み優先度をざっくり整理していますので、ぜひ開発の参考にしてみてください。

テーマの保存場所

WordPressのフォルダ構成は通常、wp-content/themes/ というディレクトリが用意されています。その中に自作テーマ用のフォルダを作成し、その配下へ各種ファイルを格納します。

wp-content/
 └─ themes/
     └─ my-original-theme/   ← ここが自作テーマフォルダ
         ├─ style.css
         ├─ functions.php
         ├─ header.php
         ├─ footer.php
         ├─ sidebar.php
         ├─ ... etc
         └─ images/ (画像を格納する場合)
         └─ js/ (JavaScriptファイルを格納する場合)
         └─ css/ (独自CSSファイルを格納する場合)
  • テーマフォルダの名前は自由ですが、スペースや日本語は避けるほうが無難です。
  • imagesjscss などのフォルダを作成し、リソースをまとめておくと管理がしやすくなります。

トップページ(フロントページ)

WordPressは設定によってトップページ(ホームページ)に表示する内容が異なりますが、以下の優先度でテンプレートが読み込まれます。

front-page.php

  • 「フロントページ」 として設定した場合に最優先されるテンプレート。
  • 通常、固定ページをトップページに割り当てる場合などに使います。

home.php

  • 投稿一覧をトップに表示したいときなどに使われるテンプレート。
  • ブログのトップページ(最新の投稿一覧など)に使う場合が多いです。

index.php

  • すべてのテンプレートの最終フォールバック。
  • 他に該当するファイルがない場合は、index.php が呼ばれます。

投稿ページ(single.php)

通常の投稿(post)の単一ページ

single.php

  • ブログ投稿(Postタイプ)1件分を表示するデフォルトのテンプレート。

投稿ページ専用テンプレート

投稿タイプやスラッグごとに専用テンプレートを作りたい場合、以下のようなファイル名を使うと優先度が高くなります。

  1. single-スラッグ名(or テンプレート名).php
  2. single-投稿タイプ名.php
  3. single.php

たとえば、投稿タイプが news なら single-news.php があればそれが優先されます。また、スラッグ名を活用して個別の投稿だけデザインを変えたい場合は、single-〇〇.php と名付けることで柔軟に対応できます。

固定ページ(page.php)

通常の固定ページ

page.php

  • 固定ページ全般(aboutページやcontactページなど)の標準テンプレートです。

固定ページ専用テンプレート

特定の固定ページだけデザインを変えたい場合に、ファイル名を工夫すると優先度が高くなります。

  1. page-スラッグ名(or テンプレート名).php
  2. page.php

また、先ほどのサンプルと同様、冒頭に以下のようなコメントを入れると、管理画面の「固定ページを編集」画面でテンプレートを選択できるようになります。

<?php
/*
Template Name: テンプレート名
*/
?>

一覧ページ(archive.php)

archive.php

カテゴリー一覧やタグ一覧、カスタム投稿タイプの一覧など、アーカイブ一覧ページを表示するのに使われます。

もし archive-{post_type}.php が存在すれば、その投稿タイプ専用のアーカイブテンプレートが優先されます。

固定ページ

  • page.php

基本的な部品テンプレート

WordPressテーマの中では、以下のファイルが**「共通パーツ」**としてよく使われます。

ヘッダー

header.php

<header>タグだけでなく、<head>要素やメニューも含むことが多い

サイドバー

sidebar.php

ブログやウェブサイトの右(または左)に配置されるメニューやウィジェットエリア

フッター

footer.php

<footer>タグ内のコピーライト表示やSNSリンクなど

functions.php

テーマに必要な機能やフックをまとめるファイル。スクリプトやCSSの読み込み、カスタム投稿タイプ登録など

CSS(スタイルシート)

style.css

テーマのメインスタイルシート。テーマ情報(Theme Name など)もここにコメントとして書く必要があります。

WordPressがテーマとして認識するための必須ファイルです。

/*
Theme Name: My Original Theme
Author: Your Name
Version: 1.0
...
*/

カスタム投稿タイプ用のテンプレート

独自の投稿タイプ(例えば eventproduct など)を使う場合、下記のファイルを用意しておくと便利です。

single-{投稿タイプ名}.php

カスタム投稿タイプ「event」の単一投稿を表示する場合 → single-event.php

archive-{投稿タイプ名}.php

カスタム投稿タイプ「event」の一覧ページを表示する場合 → archive-event.php

さらに、固定ページのデザインを別にしたければ page-{投稿タイプ名}.php なども検討できます(ただし、厳密に言うとカスタム投稿タイプと固定ページは別物です)。

まとめ

テーマフォルダの配置場所

wp-content/themes/ の直下に自作テーマ用のフォルダを作る

テンプレートファイルの優先度

トップページ:front-page.phphome.phpindex.php

投稿ページ:single-{slug}.php / single-{post_type}.phpsingle.php

固定ページ:page-{slug}.phppage.phpindex.php

アーカイブ:archive-{post_type}.phparchive.phpindex.php

共通パーツ

header.php, sidebar.php, footer.php

functions.php はテーマの各種機能を定義する重要ファイル

必須ファイル

style.css(テーマ情報を定義)

WordPressはテンプレート階層という仕組みを使って、ページの種類や条件ごとに適切なテンプレートを呼び出す柔軟性を備えています。
自作テーマを開発する際には、ファイル名や優先度をしっかり理解しておくことで、余計な混乱を防ぎ、効率的にサイトを構築できます。ぜひ参考にしてみてください。

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

板浪雅樹 のアバター

経歴: 映像制作の専門学校を卒業後、映像制作(編集・撮影)でのアシスタント、カーナビゲーション用の3DCG制作、PS2用の3DCGゲーム背景制作、16ミリフィルムのデジタル変換業務等を経てWEB制作部門のある会社に就職。株式会社TREVOでディレクション、SEO対策、CMS開発、3DCG制作、映像制作を担当

X Facebook Pocket LINE はてブ
WEB無料相談