HTMLサイトをWordPressオリジナルテーマに変換する方法｜テーマフォルダの構成からheader・footer分割まで

はじめに

これまでの連載でHTML・CSS・JavaScriptを使ったポートフォリオサイトやお問い合わせフォームを一から作り上げてきました。今回からは新しいフェーズとして、作成したHTMLサイトをWordPressのオリジナルテーマに変換する方法を数回にわたって解説します。第一弾となる今回は、テーマフォルダの構成・HTMLファイルをPHPに変換する手順・style.css へのテーマ情報の記載・WordPress関数を使ったCSS・画像の読み込み・index.php を header.php・footer.php・sidebar.php に分割する方法までをお届けします。

1. WordPressオリジナルテーマとは

1.1 テーマとは何か

WordPressのテーマとはサイトの見た目と構造を定義するファイルのまとまりです。管理画面から切り替えて使うことができ、テーマを変えるだけでサイトのデザインが丸ごと変わります。

種類内容
既製テーマSWELLやCocoonのように配布されているテーマ
オリジナルテーマ自分でゼロから作るテーマ。HTMLサイトを変換するのがこの方法
子テーマ既製テーマをベースに部分的にカスタマイズしたテーマ

1.2 HTMLサイトをテーマ化するメリット

これまで作ったHTMLサイトをそのままWordPressテーマとして使えるようにすることで、以下のメリットが得られます。

メリット内容
管理画面から記事を投稿できるようになるHTMLを直接編集しなくても記事が追加できる
デザインを完全に自分でコントロールできる既製テーマの制約なしに思い通りのレイアウトを実現できる
Web制作の案件獲得につながるオリジナルテーマ制作はフリーランス案件でニーズが高い

2. テーマフォルダの構成を理解する

2.1 wp-contentフォルダの中を確認する

WordPressをサーバーにインストールするとルートディレクトリに以下のファイル・フォルダが生成されます。テーマ関連のファイルは wp-content/themes/ の中に置きます。

WordPress ルートディレクトリ
├── wp-admin/
├── wp-includes/
├── wp-content/
│   ├── plugins/         ← プラグインのフォルダ
│   ├── themes/          ← テーマのフォルダ（ここに作る）
│   │   ├── twentytwentyfive/  ← デフォルトテーマ
│   │   └── my-theme/         ← 自作テーマ（今回作るもの）
│   └── uploads/         ← 画像などのアップロードファイル
├── wp-config.php
└── index.php

2.2 最低限必要なファイル

WordPressがテーマとして認識するために最低限必要なファイルはたった2つです。

ファイル役割
index.phpテーマのメインテンプレートファイル
style.cssテーマのスタイルシート兼テーマ情報の定義ファイル

💡 まずはこの2ファイルから始めて、徐々に分割していきましょう： WordPressテーマの開発は「最小限の構成で動かす→少しずつ機能を追加する」という進め方が挫折しにくいです。

3. HTMLファイルをPHPに変換する

3.1 拡張子を.htmlから.phpに変更する

作成済みのHTMLサイトの index.html を index.php に変更します。

Windowsでの変更方法：

  1. エクスプローラーでファイルを右クリックします。
  2. 「名前の変更」を選択します。
  3. index.html → index.php に変更します。
  4. 「拡張子を変更すると、ファイルが使えなくなる可能性があります」と警告が出た場合は「はい」をクリックします。

⚠️ 拡張子が表示されていない場合は設定を変更しましょう： Windowsのエクスプローラーで「表示」タブ→「ファイル名拡張子」にチェックを入れると拡張子が見えるようになります。

Macでの変更方法：

  1. Finderでファイルを選択してリターンキーで名前変更モードにします。
  2. index.html → index.php に変更します。
  3. 「拡張子を変更」の確認ダイアログが出たら「変更を使用」をクリックします。

VSCodeを使う場合：

エクスプローラーパネルでファイルを右クリック→「名前の変更」から変更できます。

3.2 テーマフォルダを作成してファイルを配置する

wp-content/themes/ の中に新しいフォルダを作成する

例：my-portfolio-theme

my-portfolio-theme/
├── index.php       ← 変換したHTMLファイル
├── style.css       ← テーマ情報を書くファイル（新規作成）
├── css/
│   └── style.css   ← もともとのCSSファイル
├── js/
│   └── main.js
└── images/
    └── （画像ファイル群）

💡 フォルダ名は半角英数字とハイフンのみ使いましょう： スペースや日本語はURLで問題が起きることがあります。my-portfolio・yamada-portfolio のような形式が無難です。

4. style.cssにテーマ情報を記載する

4.1 テーマ情報の書き方

style.css の先頭に以下の形式でテーマ情報をコメントとして記述します。この記述がなければWordPressはテーマとして認識しません。

/*
Theme Name: My Portfolio Theme
Theme URI: https://yourname.com
Author: 山田太郎
Author URI: https://yourname.com
Description: HTMLサイトから変換したポートフォリオ用のオリジナルテーマです。
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-portfolio-theme
*/

/* 以下にCSSを記述するか、@importで別ファイルを読み込む */
項目内容必須
Theme Nameテーマの名前（管理画面に表示される）✅ 必須
Author作者名任意
Descriptionテーマの説明任意
Versionバージョン番号任意
Text Domain翻訳などに使うテキストドメイン任意

⚠️ Theme Name だけは必ず記載してください： この項目がないとWordPressの管理画面のテーマ一覧に表示されません。

4.2 管理画面でテーマを確認する

  1. WordPress管理画面にログインします。
  2. 「外観」→「テーマ」を開きます。
  3. 作成したテーマが一覧に表示されていることを確認します。
  4. 「有効化」をクリックしてテーマを適用します。

5. WordPress関数でCSSと画像を正しく読み込む

5.1 なぜパスの書き換えが必要なのか

HTMLサイトではCSSや画像のパスを以下のように相対パスで書いていました。

<!-- HTMLサイトでの書き方 -->
<link rel="stylesheet" href="css/style.css">
<img src="images/profile.jpg" alt="プロフィール写真">

WordPressテーマに変換したとき、このパスのままではCSSや画像が読み込まれません。理由はWordPressのURLは https://example.com/ のようなドメインルートから始まるのに対して、相対パスはファイルの場所を基準にするためズレが生じるからです。

5.2 get_template_directory_uri()を使う

WordPressでは get_template_directory_uri() という関数を使うと、現在有効なテーマフォルダへのURLを自動的に取得できます。

<?php echo get_template_directory_uri(); ?>

この関数が返す値の例：

https://example.com/wp-content/themes/my-portfolio-theme

5.3 CSSの読み込みを書き換える

<!-- ❌ 変換前：相対パスの書き方 -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/reset.css">

<!-- ✅ 変換後：WordPress関数を使った書き方 -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">

5.4 JavaScriptの読み込みを書き換える

<!-- ❌ 変換前 -->
<script src="js/main.js"></script>

<!-- ✅ 変換後 -->
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

5.5 画像のパスを書き換える

<!-- ❌ 変換前 -->
<img src="images/logo.png" alt="ロゴ">
<img src="images/hero.webp" alt="ヒーロー画像">

<!-- ✅ 変換後 -->
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ">
<img src="<?php echo get_template_directory_uri(); ?>/images/hero.webp" alt="ヒーロー画像">

💡 VSCodeの一括置換（Ctrl+H）を活用しましょう： src="images/ を src="<?php echo get_template_directory_uri(); ?>/images/ に一括置換すると作業が大幅に短縮できます。

5.6 CSSのbackground-imageの場合

CSSファイル内の background-image はWordPress関数が使えません（PHPはCSSの中では動かないため）。この場合は index.php のインライン <style> タグ内に書くか、別途対応が必要です。

<!-- index.php内にインラインスタイルで書く場合 -->
<style>
.hero {
    background-image: url('<?php echo get_template_directory_uri(); ?>/images/hero-bg.webp');
}
</style>

6. headタグにwp_head()を追加する

WordPressテーマには必須のフック（特定のタイミングで処理を差し込む仕組み）を追加する必要があります。

<!-- </head>タグの直前に追加する -->
<?php wp_head(); ?>
</head>

⚠️ wp_head() がないとプラグインが正常に動作しないことがあります： Yoast SEOやCF7など多くのプラグインはこのフックを使ってスクリプトやスタイルを出力します。必ず </head> の直前に追加してください。

同様に </body> の直前にも追加します。

<!-- </body>タグの直前に追加する -->
<?php wp_footer(); ?>
</body>

7. index.phpをheader・footer・sidebarに分割する

7.1 なぜ分割するのか

HTMLサイトでは1ファイルにすべて書いていましたが、WordPressではページが増えるにつれてナビゲーションやフッターを複数のファイルで共有する必要が出てきます。分割することで「ヘッダーを1箇所修正するだけで全ページに反映される」という管理しやすい構造になります。

分割前（index.phpにすべて入っている状態）：
index.php = <head> + <header> + <main> + <footer>

分割後：
index.php    ← メインコンテンツのみ
header.php   ← <html>〜<header>まで
footer.php   ← <footer>〜</html>まで
sidebar.php  ← サイドバーのHTML

7.2 header.phpを作成する

index.php の先頭から <header> タグを含むナビゲーションまでを切り出して header.php という新しいファイルに保存します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>山田太郎のポートフォリオ</title>

    <!-- CSSの読み込み（WordPress関数を使用） -->
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">

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

<body>

<header class="site-header">
    <div class="header-inner">
        <a href="<?php echo home_url(); ?>" class="site-logo">
            <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ロゴ">
        </a>

        <nav class="global-nav">
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#works">Works</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

💡 home_url() でサイトのトップURLを取得できます： ロゴのリンク先などトップページへのリンクには href="<?php echo home_url(); ?>" を使うと、ドメインが変わっても自動的に対応されます。

7.3 footer.phpを作成する

index.php の末尾の <footer> タグ以降を切り出して footer.php として保存します。

<footer class="site-footer">
    <div class="footer-inner">
        <p class="copyright">
            &copy; <?php echo date('Y'); ?> 山田太郎 All Rights Reserved.
        </p>
    </div>
</footer>

<!-- JavaScriptの読み込み -->
<script src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>

<?php wp_footer(); ?>

</body>
</html>

💡 date('Y') で著作権表示の年号を自動更新できます： &copy; 2025 のように固定値を書くと毎年手動で更新が必要ですが、<?php echo date('Y'); ?> にすると自動的に現在の年が入ります。

7.4 sidebar.phpを作成する（サイドバーがある場合）

サイドバーが必要な場合は sidebar.php に切り出します。

<aside class="sidebar">
    <section class="widget">
        <h3 class="widget-title">プロフィール</h3>
        <div class="widget-content">
            <img src="<?php echo get_template_directory_uri(); ?>/images/profile.jpg" alt="プロフィール写真">
            <p>山田太郎。Web制作を学習中のエンジニアです。</p>
        </div>
    </section>
</aside>

7.5 index.phpに読み込み関数を追加する

分割した各ファイルを index.php で読み込むには専用のWordPress関数を使います。

<?php get_header(); ?>

<main class="site-main">
    <div class="container">

        <!-- メインコンテンツ -->
        <section class="hero">
            <h1>山田太郎のポートフォリオ</h1>
            <p>HTML / CSS / JavaScript / WordPress</p>
        </section>

        <!-- Works・About・Contactなどのセクション -->

    </div>
</main>

<?php get_sidebar(); ?>

<?php get_footer(); ?>
関数読み込むファイル
get_header()header.php
get_footer()footer.php
get_sidebar()sidebar.php

8. 変換後のテーマフォルダ構成

ここまでの作業を終えた後のフォルダ構成です。

my-portfolio-theme/
├── index.php        ← メインコンテンツのみ
├── header.php       ← <html>〜<header>
├── footer.php       ← <footer>〜</html>
├── sidebar.php      ← サイドバー（必要な場合）
├── style.css        ← テーマ情報のみ記載
├── css/
│   ├── reset.css
│   └── style.css    ← もとのCSSファイル
├── js/
│   └── main.js
└── images/
    ├── logo.png
    ├── profile.jpg
    └── hero.webp

9. 動作確認チェックリスト

✓ wp-content/themes/ の中にテーマフォルダを作成したか

✓ style.css の先頭に Theme Name を含むテーマ情報を記載したか

✓ 管理画面の「外観」→「テーマ」に作成したテーマが表示されるか

✓ index.html を index.php にリネームして配置したか

✓ CSSと画像のパスを get_template_directory_uri() を使った書き方に変換したか

✓ </head> の直前に <?php wp_head(); ?> を追加したか

✓ </body> の直前に <?php wp_footer(); ?> を追加したか

✓ header.php・footer.php を作成して index.php で get_header()・get_footer() を呼び出しているか

✓ ブラウザで表示してCSSと画像が正しく反映されているか

✓ Chrome DevToolsのコンソールにエラーが出ていないか

まとめ

今回はHTMLサイトをWordPressオリジナルテーマに変換する第一弾として、テーマフォルダの構成から header.php と footer.php への分割まで解説しました。ポイントをまとめると：

  • WordPressテーマは wp-content/themes/ の中のフォルダに配置する
  • テーマとして認識されるための最低限のファイルは index.php と style.css の2つ
  • style.css の先頭にコメント形式でテーマ情報（特に Theme Name）を書く
  • 相対パスのCSS・画像は <?php echo get_template_directory_uri(); ?> を使った書き方に変換する
  • </head> の直前に wp_head()・</body> の直前に wp_footer() を必ず追加する
  • header.php・footer.php・sidebar.php に分割して get_header()・get_footer()・get_sidebar() で読み込む
  • ロゴのリンクには home_url()・著作権年号には date('Y') が便利

次の記事では、WordPressの投稿一覧ページや固定ページの作り方を解説します。functions.php を使ってテーマをさらに使いやすくする方法も合わせてお届けします。お楽しみに！

スポンサーリンク

コメント

タイトルとURLをコピーしました