WordPress

【WordPressテーマ開発入門】これだけは押さえたい！必須ファイル5選と役割の完全ガイド

こんにちは、コーダーのhisaです👋
寒い日は毛布にくるまって、ぬくぬくしながらコーディングしてます（笑）
今回は、WordPressを触るなら絶対に知っておきたい「必須ファイル5選とその役割」について、実例を交えながら解説していきます！

目次[-]

その挫折、ファイルの役割を知らないだけかも？

「WordPressで自作テーマを作ろう！」

そう意気込んでみたものの、
index.php？ front-page.php？ functions.phpって何？
と、たくさんのPHPファイルを前にして頭が真っ白に…。
気づけば、エディタをそっと閉じてしまった——そんな経験はありませんか？

安心してください。それはあなただけではありません。
多くのWordPress初学者が、まったく同じ壁にぶつかります。

けれどこの壁の正体は、実はとてもシンプル。
「どのファイルが、どんな役割を持っているか」
——この基本ルールを知らないだけなんです。

この記事では、テーマ開発の“核”となる必須ファイル5つを、役割とともにわかりやすく解説します。
読み終わるころには、テーマ構成の全体像がスッキリ整理され、もう迷うことはありません。

なぜファイルの役割を知ることが重要なのか？

WordPressには、ユーザーがどのページにアクセスしたかによって、どのテンプレートファイル（PHPファイル）を読み込むかを自動で判断する「テンプレート階層」という賢い仕組みがあります。

たとえば、トップページが表示されたとき、WordPressはこんなふうに動きます。

「front-page.phpはあるかな？ …なければhome.php？ …それもなければ最終手段でindex.phpを使おう」

このように、ファイル名には明確な“優先順位”があるんです。

このルールを知らないと、こんなことが起こります👇

  • 「トップページを作りたいのに、どのファイルを編集すればいいかわからない」
  • 「index.phpを直したのに、トップページが変わらない（front-page.phpが優先されていた）」

つまり、ファイルの役割を理解していないと、無駄な時間と試行錯誤を繰り返すことになってしまいます。

逆に言えば、このテンプレート階層の基本と各ファイルの役割を理解すれば、WordPressを自在にコントロールできるようになります。
それは、“思い通りのデザインを形にできる第一歩”なのです。

🎯 テーマ開発の「土台」となる必須ファイルたち

ここでは、WordPressテーマの骨格をつくる、最低限知っておきたい5つのファイルを紹介します。
まずはこの5つを押さえておけば、テーマはしっかり動きます。

1. style.css – テーマの「名札」兼「スタイリスト」

すべてのテーマに絶対に必要なファイルです。
CSSを書くためだけのものではありません。

このファイルの先頭に、以下のような特別なコメントを書くことで、WordPressに「これは●●という名前のテーマです」と認識させます。

/*
Theme Name: My First Theme
Author: Your Name
Description: はじめて作るWordPressテーマ
Version: 1.0
*/

このコメントがないと、WordPressの管理画面でテーマとして認識されません。
まさにテーマの「名札」です。

そして同時に、デザインを司る「スタイリスト」としても働く、テーマの要でもあります。

2. index.php – 最後の「砦」

このファイルも絶対に必要です。
テンプレート階層の仕組みで、WordPressが表示すべきファイルを見つけられなかった時に、最終的に読み込まれる「最後の砦」です。

極論、style.cssと、中身が<h1>Hello World</h1>だけのindex.phpがあれば、それはもう立派なWordPressテーマとして動作します。
まずはこの2つから手を動かしてみるのがおすすめです。

ウェブサイトのヘッダー（ロゴやナビゲーション）やフッター（コピーライトなど）は、どのページでも同じ表示になりますよね。
これらの共通部分をまとめておくのが header.php と footer.php です。

  • header.php：<html> タグの開始から、メインコンテンツが始まる前までを記述します
  • footer.php：メインコンテンツが終わった後から、</html> タグの終わりまでを記述します

他のテンプレートファイル（例：index.php）からは、次のように一行で呼び出すことができます。

<?php get_header(); ?>
<?php get_footer(); ?>

これにより、共通部分を一箇所で管理でき、デザイン変更やメンテナンスがぐっと楽になります。

WordPressの header.php と footer.php には、
必ず記述しなければならない WordPress 専用の関数があります。

これを書き忘れると、
CSSやJavaScriptが読み込まれない・プラグインが動かない
といった不具合の原因になります。

header.php に書く wp_head()

header.php の </head> タグの直前に、必ず次のコードを記述します。

  <?php wp_head(); ?>
</head>

wp_head() の役割

wp_head() は、WordPress本体やプラグインが必要とする情報を
自動的に <head> 内へ出力するための関数です。

たとえば、以下のようなものがここから読み込まれます。

  • functions.php で読み込んだ CSS
  • プラグインの CSS / JavaScript
  • metaタグなどの各種設定情報

💡
functions.php で wp_enqueue_style() を使っても、
この wp_head() がなければ CSS は反映されません。

footer.php の </body> タグの直前に、必ず次のコードを記述します。

    <?php wp_footer(); ?>
    </body>

wp_footer() は、主に JavaScript関連の処理を出力するための関数です。

  • JavaScriptファイル
  • プラグインのスクリプト
  • アクセス解析コード（Google Analytics など）

多くのJavaScriptは、ページの一番最後で読み込まれるため、
この関数はとても重要です。

⚠️ 初心者がつまずきやすいポイント

HTMLからWordPressへ移行した直後によくあるのが、

「CSSやJSを読み込んでいるはずなのに、なぜか反映されない…」

という状態です。
その原因の多くは、wp_head() や wp_footer() の書き忘れです。

👉
header.php と footer.php を作ったら、
この2つは“必ずセットで書く”
と覚えておきましょう。

4. functions.php – テーマの「頭脳」

テーマに機能を追加するための、非常にパワフルなファイルです。
ここにPHPコードを書くことで、次のようなことが可能になります。

  • CSSやJavaScriptファイルを読み込ませる（wp_enqueue_script）
  • 「アイキャッチ画像を使えるようにする」といったテーマ機能を有効化する（add_theme_support）
  • サイト独自のショートコードを定義する

たとえば、テーマにCSSファイルやJSファイル、フォントオーサム等を追加したい場合は以下のように書きます👇

function script_init() {

    // Font Awesome
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', array(), '6.5.1');
    // GoogleFonts（例：M PLUS Rounded 1c と Inter）
    wp_enqueue_style('googlefonts_M+PLUS+Rounded+1c', 'https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;500;700;800&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet', array(), null);

    // jQuery読み込み（WordPressに同梱されているもの）
    wp_enqueue_script('jquery');

    // CSS
    wp_enqueue_style('my_style', get_theme_file_uri('css/style.css'), array(), filemtime(get_theme_file_path('css/style.css')), 'all');

    // JS
    wp_enqueue_script('my_script', get_theme_file_uri('js/main.js'), array('jquery'), filemtime(get_theme_file_path('js/main.js')), true);

}
add_action('wp_enqueue_scripts', 'script_init');

実際の現場でもよく使われる形ですのでそのままコピペしても大丈夫です！

関連記事

functions.php は、あなたのテーマをただの見た目だけでなく、機能的なテーマへと進化させるための「頭脳」です。

💡 注意点
functions.php はテーマごとに読み込まれるため、他のテーマやプラグインと同じ関数名を使うとエラーになる場合があります。
できるだけ固有の関数名（例：mytheme_〜）を使うようにしましょう。

5. front-page.php – 「トップページ専用」のVIPルーム

サイトの顔であるトップページだけ、他のページとはまったく違うデザインにしたい場合がありますよね。
そのために使うのがこの front-page.php です。

このファイルが存在すると、WordPressはテンプレート階層のルールに従い、トップページを表示する際に最優先でこのファイルを読み込みます。
つまり、index.phpよりも優先順位が高いのです。

例：

  • トップページだけヒーロー画像を出したい
  • サービス紹介を並べたい
  • お知らせを下に出したい
    こうした場合は front-page.php に専用のレイアウトを組み込みましょう。

このように、テンプレート階層を理解して適切なファイルを使い分けることで、WordPressテーマはより自由に、思い通りの構成に仕上げられるようになります。

🚀 さあ、最初のテーマを動かしてみよう！

ここまで読んで、WordPressテーマ開発の全体像が少し見えてきたのではないでしょうか？

知識は「知っている」だけでは意味がありません。
手を動かして、実際に動く感動を味わうことで、本当の理解が始まります。

🧩 ステップ1：テーマフォルダを作成

wp-content/themes/ の中に、
my-first-theme のような新しいフォルダを作ってみましょう。

📝 ステップ2：基本ファイルを準備

フォルダ内に、以下の2つのファイルを作成しましょう。

  • style.css
    （テーマ情報をコメントで記載する）
  • index.php
    （すでにある静的HTMLファイルの内容を移してOK）

もし手元に静的サイト（例：index.html）がある場合は、
その中身をそのままindex.phpへコピーして構いません。
WordPressでは .php という拡張子に変わるだけで、HTMLも同じように使えます。

🎨 ステップ3：テーマを有効化

WordPress管理画面の
［外観］>［テーマ］ にアクセスし、
「My First Theme」を有効化してみましょう。

🌟 サイトを表示して、これまでの静的HTMLがWordPress上で表示されれば、
あなたはすでに「テーマ開発者」のスタートラインに立っています。

ここからは、header.php や footer.php を切り出して、
共通パーツをテンプレート化していく段階へと進んでいきましょう。

hisa

関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA