WordPressテーマ開発の基本構造解説

2026.02.26

WordPress

WordPressテーマ開発は、サイトのデザインと機能を自由にコントロールできる重要なスキルです。既存テーマのカスタマイズとは異なり、ゼロからテーマを設計することで、軽量で拡張性の高いWebサイトを構築できます。

本記事では、WordPressテーマの基本構造から必須ファイル、テンプレート階層、開発の流れまでを体系的に解説します。基礎を確実に理解できる内容です。

WordPressテーマとは何か

WordPressテーマとは、サイトの見た目と表示ロジックを制御するファイル群です。テーマを変更すると、同じコンテンツでもデザインやレイアウトが変わります。

テーマは以下の要素で構成されています。

テンプレートファイル（PHP）
スタイルシート（CSS）
JavaScript
画像ファイル
functions.phpによる機能拡張

WordPress本体とテーマは分離されており、テーマを変更しても投稿データは失われません。この仕組みによって、安全にデザイン変更が可能になります。

テーマ開発に必要な最低限のファイル

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

style.css

テーマ情報を記述するための必須ファイルです。

/*
Theme Name: Sample Theme
*/

このコメントヘッダーが存在しない場合、WordPressはテーマとして認識しません。

index.php

すべての表示の基盤となるテンプレートファイルです。
最小構成ではこの2つだけでテーマとして動作します。

基本的なテーマファイル構成

実務レベルのテーマでは、次のような構成になります。

theme-name/
├── style.css
├── index.php
├── functions.php
├── header.php
├── footer.php
├── sidebar.php
├── single.php
├── page.php
├── archive.php
└── screenshot.png

functions.phpの役割

functions.phpはテーマ専用の機能追加ファイルです。

CSS・JavaScriptの読み込み
アイキャッチ画像の有効化
メニュー機能の登録
ウィジェットエリアの登録

functions.phpの基本的な書き方については、
**「functions.phpの使い方｜テーマ機能拡張の基礎」**の記事で詳しく解説しています。

テンプレート階層（Template Hierarchy）

WordPressには「テンプレート階層」という優先順位ルールがあります。

たとえば、投稿ページを表示する場合：

single-{posttype}.php
single.php
singular.php
index.php

この順番で存在確認が行われます。

アーカイブページや固定ページも同様に、細かい優先順位が定義されています。
この仕組みを理解していないと、意図しないテンプレートが読み込まれることがあります。

header.php・footer.phpの分離

多くのテーマでは共通部分を分離します。

header.php

<head>タグ
wp_head() の記述
ナビゲーション

footer.php

フッター情報
wp_footer() の記述

共通化することで、保守性が向上します。

WordPressループの理解

テーマ開発の中心となるのが「WordPressループ」です。

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php endwhile; ?>
<?php endif; ?>

このループが投稿データを取得・表示します。

ループの仕組みを理解するには、
**「WordPressの表示の仕組みを理解する」**の記事もあわせて確認すると理解が深まります。

add_theme_supportの活用

テーマ開発では add_theme_support() を使って機能を有効化します。

例：

add_theme_support('post-thumbnails');
add_theme_support('title-tag');

これにより、

アイキャッチ画像
タイトルタグ自動出力

などが使用可能になります。

詳しい設定方法は
**「add_theme_supportの使い方完全解説」**で詳述しています。

CSS・JavaScriptの正しい読み込み方法

直接 <link> や <script> を書くのではなく、wp_enqueue_scripts を使用します。

function theme_enqueue_files() {
  wp_enqueue_style('theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'theme_enqueue_files');

この仕組みを理解していないと、表示崩れや競合が発生します。

WordPressのフック概念については、
**「add_actionとadd_filterの違いを基礎から解説」**の記事が参考になります。

子テーマと親テーマの違い

テーマ開発には2つの選択肢があります。

親テーマを自作する

完全オリジナルテーマを構築できます。

子テーマで拡張する

既存テーマの機能を活かしながら安全にカスタマイズできます。

実務では、既存テーマを基盤に子テーマを作成するケースも多いです。

ブロックエディター対応テーマのポイント

現在のWordPressはブロックエディター（Gutenberg）が標準です。

テーマ開発では以下を意識します。

editor-style.css の作成
ブロック幅の制御
alignwide対応
theme.jsonの活用

ブロック対応を行わないと、エディターと実際の表示が乖離します。

開発の基本ステップ

テーマ開発の流れは次の通りです。

テーマフォルダ作成
style.cssとindex.php作成
header.php・footer.php分離
functions.php追加
テンプレート分割
CSS設計
レスポンシブ対応

いきなり高度な設計を目指すのではなく、最小構成から段階的に拡張するのが安全です。

よくある失敗例

wp_head() / wp_footer() を忘れる
直接CSSを読み込む
テンプレート階層を理解していない
ループ外でテンプレートタグを使用する

基礎構造を理解していれば、これらは防げます。

まとめ

WordPressテーマ開発の基礎は次の4点に集約されます。

必須ファイル構造を理解する
テンプレート階層を把握する
WordPressループを理解する
functions.phpで機能を拡張する

これらが整理されると、テーマ開発は難解な作業ではなく、設計作業として理解できるようになります。

テーマ開発はWeb制作全体の理解と密接に関係しています。
基礎を固めることで、より自由度の高いサイト構築が可能になります。