WordPressテーマファイル構成を徹底解説!

WordPressテーマファイル構成の図解。style.css、index.php、header.phpなどのファイル構成をブラウザ風のウィンドウで表示。
WordPressテーマを構成する基本ファイルの一例。style.cssやindex.phpなどの役割を視覚的に理解できます。

WordPressでオリジナルテーマを作るには、まずその「ファイル構成」を理解することが欠かせません。この記事では、WordPressテーマを構成する基本ファイルとその役割をわかりやすく解説します。

1. WordPressテーマの構成とは?

WordPressテーマは、複数のPHPファイル・CSSファイル・画像・JSファイルなどで構成されるテンプレート群です。これらのファイルが、WordPressの「見た目」や「表示の仕方」を決定しています。

2. 最低限必要なファイル

WordPressで「テーマ」として認識されるには、最低限以下の2つのファイルが必要です。

style.css

テーマ情報を記述するスタイルシートファイル。上部にテーマ名などの情報を記載します。

/*
Theme Name: My Original Theme
Theme URI: https://example.com
Author: Your Name
Version: 1.0
*/

index.php

すべてのテンプレートの最終的な代替として使われる基本ファイル。コンテンツの表示処理をします。

3. よく使われるテンプレートファイル一覧

ファイル名用途
header.phpヘッダー部分の共通テンプレート
footer.phpフッター部分の共通テンプレート
sidebar.phpサイドバーの表示
single.php投稿(シングル記事)の表示
page.php固定ページの表示
archive.phpアーカイブページの表示(カテゴリなど)
search.php検索結果ページの表示
404.php404エラーページの表示
functions.phpテーマの機能追加やカスタマイズ設定

4. フォルダ構成のおすすめ例

以下のようなフォルダ構成にすると、テーマが整理されて管理しやすくなります。

my-theme/
├── style.css
├── index.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
├── search.php
├── 404.php
├── functions.php
├── assets/
│   ├── css/
│   ├── js/
│   └── images/
└── template-parts/
    ├── content.php
    └── content-single.php
  • assets/:CSS・JS・画像などの静的ファイルを格納
  • template-parts/:再利用するテンプレートパーツを分離

5. functions.phpの役割

functions.php は、テーマ専用のプラグインのような存在です。以下のような処理を記述します。

  • メニューの登録
  • ウィジェットの有効化
  • カスタム投稿タイプの定義
  • スクリプトやスタイルの読み込み

例:

<?php
function mytheme_setup() {
  add_theme_support('title-tag');
  register_nav_menu('global', 'グローバルナビゲーション');
}
add_action('after_setup_theme', 'mytheme_setup');

6. まとめ

WordPressテーマのファイル構成は、見た目と機能の設計図そのものです。最初はファイル数が多く感じるかもしれませんが、それぞれの役割を理解すれば、カスタマイズや拡張も自由自在。

まずは最小構成からスタートして、必要に応じてテンプレートを追加していきましょう!

関連記事