WordPressのオリジナルテーマ　テンプレートの分割とHTMLのWordPress化

目的

index.html の中身を WordPressのテンプレート構造（header.php, footer.php）に分割する
style.css を反映し、デザインが適用されることを確認する
画像が表示されない問題を解決し、パスの考え方を理解する

index.htmlの分割

まず、下記のコードをベースに、WordPressで使えるように分割していきます。

index.htmlコード

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>UNNHANBUR（アンハンバー）｜新しいスタイルのハンバーガーショップ</title>
    <meta name="description" content="新鮮な野菜をメインに考えた新しいスタイルのハンバーガーショップ UNNHANBUR（アンハンバー）">
    <meta name="keywords" content="ハンバーガーショップ,ハンバーガー,広尾">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Caveat:wght@500&display=swap"
        rel="stylesheet">
    <script src="js/custom.js" defer></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="style.css?ver=20230830">
</head>

<body id="top">
    <header id="header">
        <div class="header-area">
            <a href="index.html">
                <img src="images/logo.svg" alt="UNNHANBUR(アンハンバー)" width="195" height="36" class="logo">
            </a>
            <div class="openbtn" aria-label="メニューを開く" role="button" tabindex="0">
                <span></span><span></span><span></span>
            </div>
            <div class="circle-bg"></div>
            <nav id="g-nav" aria-label="グローバルナビゲーション">
                <ul class="gnavi">
                    <li><a href="#top" class="current">HOME</a></li>
                    <li><a href="#menu">MENU</a></li>
                    <li><a href="#staff">STAFF</a></li>
                    <li><a href="#map">MAP</a></li>
                    <li><a href="#news">BLOG</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <figure class="key">
        <figcaption class="key_d">
            新鮮な野菜をメインに考えた<br>
            新しいスタイルのハンバーガーショップ<br>
            「UNNHANBUR（アンハンバー）」が<br>
            広尾にOPEN
        </figcaption>
    </figure>


    <main class="home">
        <section id="menu" class="bk-pink p_xl p_sm">
            <div class="container">
                <div class="title">
                    <h2>MENU</h2>
                    <p>new line up</p>
                </div>
                <ul class="menu_list container">
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask"><img src="images/menu01.jpg" alt=""></span>
                                <figcaption class="bk-white">
                                    <h3>Cheeseburger and Fries</h3>
                                    <p>ジューシーなビーフパティに、フレッシュな野菜とチーズが絶妙に相性抜群!
                                        モチモチのバンズとの絶妙なハーモニーが口いっぱいに広がります。さらに、シャキシャキのフレンチフライと冷たいドリンクもセットになって、心もお腹も満足度MAX!
                                    </p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask"><img src="images/menu02.jpg" alt=""></span>
                                <figcaption class="bk-white">
                                    <h3>Ice Cafe Mocha</h3>
                                    <p>氷のように冷たく濃厚なカフェモカ、ひと口で心がとろける贅沢な一杯。豊かなコーヒーの香りが広がり、口に広がる滑らかなチョコレートの風味が極上の幸福を運んできます。氷の上に浮かぶミルククリームは、舌をくすぐる甘さで心地よい余韻を与えてくれます。
                                    </p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask"><img src="images/menu03.jpg" alt=""></span>
                                <figcaption class="bk-white">
                                    <h3>Chocolate Donut</h3>
                                    <p>口溶けなめらかなチョコレートドーナッツ。ふわふわ生地に包まれた濃厚なチョコレートが口いっぱいに広がり、至福の味わいが心を虜にします。ほんのり甘く、ほろ苦いバランスが絶妙です。一度食べるとやみつきになること間違いなし。ぜひおひとついかがですか？
                                    </p>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
                <a href="sub.html" class="btn_andmore">And More</a>
            </div>
        </section>
        <section id="staff" class="bk-lightgray p_xl p_sm">
            <div class="container">
                <div class="title">
                    <h2>Staff</h2>
                    <p>Looking for staff</p>
                </div>
                <div class="zoomIn fadeUp">
                    <a href="#">
                        <img src="images/sutaff.jpg" alt="">
                    </a>
                </div>
            </div>
        </section>
        <article id="news" class="bk-renga p_xl p_sm">
            <div class="container">
                <header class="title mb-m">
                    <h1>What's News</h1>
                </header>
                <ul class="blog_list">
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask">
                                    <img src="images/lunch.png" alt="">
                                </span>
                                <figcaption>
                                    <h2>ランチ始めました！</h2>
                                    <time datetime="2023.04.15">2023.04.15</time>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask"><img src="images/lunch.png" alt=""></span>
                                <figcaption>
                                    <h2>ランチ始めました！</h2>
                                    <time datetime="2023.04.15">2023.04.15</time>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                    <li class="zoomIn fadeUp">
                        <a href="#">
                            <figure>
                                <span class="mask"><img src="images/lunch.png" alt=""></span>
                                <figcaption>
                                    <h2>ランチ始めました！</h2>
                                    <time datetime="2023.04.15">2023.04.15</time>
                                </figcaption>
                            </figure>
                        </a>
                    </li>
                </ul>
                <a href="sub.html" class="btn_andmore">過去の投稿一覧</a>
            </div>
        </article>


        <section id="map" class="bk-pink p_xl p_sm">
            <div class="container">
                <div class="title">
                    <h2>MAP</h2>
                    <p>Access to stores</p>
                    <div class="zoomIn fadeUp">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6484.00366324806!2d139.7071237445278!3d35.65232650775349!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b6c01764c2d%3A0xe3041b91dbed22ba!2z44CSMTUwLTAwMTIg5p2x5Lqs6YO95riL6LC35Yy65bqD5bC-!5e0!3m2!1sja!2sjp!4v1693356885119!5m2!1sja!2sjp"
                            width="800" height="600" style="border:0;width:100%;height:20rem" allowfullscreen=""
                            loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
                <!-- google map -->
            </div>
        </section>

    </main>
    <footer id="footer">
        <a href="#top" class="backtoTop">
            ▲
        </a>
        <div class="container">
            <figure class="mb-m">
                <a href="index.html">
                    <img src="images/logo_white.svg" alt="UNNHANBUR(アンハンバー) ロゴ" width="195" height="36">
                </a>
            </figure>
            <p>OPEN 11:00〜23:00</p>
            <h3>本店</h3>
            <p><a href="tel:035466XXXX">TEL 03−5466-XXXX</a></p>
            <address>東京都渋谷区広尾１丁目23−22 WWD NLD 1F</address>
        </div>
        <p class="copyright"><small>&copy; 2025 UNNHANBUR（アンハンバー）</small></p>
    </footer>

</body>

</html>

`<header>` までを `header.php` に分割

<!DOCTYPE html>から</header>までのコードをコピーし、header.phpを作成後貼り付けます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>UNHANBUR（アンハンバー）｜新しいスタイルのハンバーガーショップ</title>
    <meta name="description" content="新鮮な野菜をメインに考えた新しいスタイルのハンバーガーショップ UNHANBUR（アンハンバー）">
    <meta name="keywords" content="ハンバーガーショップ,ハンバーガー,広尾">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Caveat:wght@500&display=swap"
        rel="stylesheet">
    <script src="js/custom.js" defer></script>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/custom.css">
    <link rel="stylesheet" href="style.css?ver=20230830">
</head>

<body id="top">
    <header id="header">
        <div class="header-area">
            <a href="index.html">
                <img src="images/logo.svg" alt="UNNHANBUR(アンハンバー)" width="195" height="36" class="logo">
            </a>
            <div class="openbtn" aria-label="メニューを開く" role="button" tabindex="0">
                <span></span><span></span><span></span>
            </div>
            <div class="circle-bg"></div>
            <nav id="g-nav" aria-label="グローバルナビゲーション">
                <ul class="gnavi">
                    <li><a href="#top" class="current">HOME</a></li>
                    <li><a href="#menu">MENU</a></li>
                    <li><a href="#staff">STAFF</a></li>
                    <li><a href="#map">MAP</a></li>
                    <li><a href="#news">BLOG</a></li>
                </ul>
            </nav>
        </div>
    </header>

`<footer>` 〜 `</html>` を `footer.php` に分割

同様に<footer>から</html>までをコピーし、footer.phpを作成後貼り付けます。

 <footer id="footer">
        <a href="#top" class="backtoTop">
            ▲
        </a>
        <div class="container">
            <figure class="mb-m">
                <a href="index.html">
                    <img src="images/logo_white.svg" alt="UNNHANBUR(アンハンバー) ロゴ" width="195" height="36">
                </a>
            </figure>
            <p>OPEN 11:00〜23:00</p>
            <h3>本店</h3>
            <p><a href="tel:035466XXXX">TEL 03−5466-XXXX</a></p>
            <address>東京都渋谷区広尾１丁目23−22 WWD NLD 1F</address>
        </div>
        <p class="copyright"><small>&copy; 2025 UNNHANBUR（アンハンバー）</small></p>
    </footer>

</body>

</html>

`index.php` の中身をシンプルにしてテンプレートを読み込む

<?php get_header(); ?>

<main>
  <h1>トップページです</h1>
  <p>このエリアにコンテンツが入ります。</p>
</main>

<?php get_footer(); ?>

画像が表示されないときの注意点

WordPressでは、相対パス（images/logo.svg）ではなく、テーマ内のファイルURLを動的に取得する関数を使うのが推奨されます。特に子テーマを使用する場合や、セキュリティを考慮する場合には次のような書き方がベストです。

<img src="<?php echo esc_url( get_theme_file_uri('images/ファイル名') ); ?>" alt="">

get_theme_file_uri()：テーマ内のファイルパスを動的に取得（子テーマにも対応）
esc_url()：URLを安全に出力するための関数

これにより、画像のパスミスやセキュリティ上の問題を避けることができます。

header.phpの書き換え

WordPressの管理画面「設定 > 一般設定」で入力された「サイトのタイトル」や「キャッチフレーズ（説明）」を、header.php に反映させます。

<!DOCTYPE html>
<!-- HTMLタグに言語情報を自動で挿入（例: lang="ja", dir="ltr"） -->
<html <?php language_attributes(); ?>>
<head>
  <!-- 文字コード（WordPressの設定に合わせて出力） -->
  <meta charset="<?php bloginfo('charset'); ?>">

  <!-- タイトルとサイトの説明を動的に出力 -->
  <title><?php bloginfo('name'); ?>｜<?php bloginfo('description'); ?></title>
  <meta name="description" content="<?php bloginfo('description'); ?>">

  <!-- レスポンシブ対応 -->
  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <!-- フォントの読み込み（Google Fonts） -->
  <!-- ※この部分は次の章で functions.php に移行します -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Caveat:wght@500&display=swap" rel="stylesheet">

  <!-- CSSとJavaScriptファイルの読み込み（仮） -->
  <!-- ※この部分も後ほど functions.php に移動して整理します -->
  <script src="js/custom.js" defer></script>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/menu.css">
  <link rel="stylesheet" href="css/custom.css">

  <!-- テーマのメインスタイル（style.css） -->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

  <!-- WordPressのheadフック（必ず最後に記述） -->
  <?php wp_head(); ?>
</head>

<!-- bodyにWordPress推奨のクラスを追加 -->
<body id="top" <?php body_class(); ?>>

<!-- WordPress推奨　テーマ・プラグインによる処理挿入に対応 -->
<?php wp_body_open(); ?>

<!-- ヘッダー開始 -->
<header id="header">
  <div class="header-area">

    <!-- トップページへのリンク（サイトロゴ） -->
    <a href="<?php echo home_url(); ?>">
      <img src="<?php echo esc_url( get_theme_file_uri('images/logo.svg') ); ?>" alt="<?php bloginfo('name'); ?>">
    </a>

    <!-- ハンバーガーメニューボタン -->
    <div class="openbtn" aria-label="メニューを開く" role="button" tabindex="0">
      <span></span><span></span><span></span>
    </div>

    <!-- ハンバーガー展開時の背景 -->
    <div class="circle-bg"></div>

    <!-- グローバルナビゲーション -->
    <!-- ※後の章で WordPress のメニュー機能に置き換えます -->
    <nav id="g-nav" aria-label="グローバルナビゲーション">
      <ul class="gnavi">
        <li><a href="#top" class="current">HOME</a></li>
        <li><a href="#menu">MENU</a></li>
        <li><a href="#staff">STAFF</a></li>
        <li><a href="#map">MAP</a></li>
        <li><a href="#news">BLOG</a></li>
      </ul>
    </nav>

  </div>
</header>

テンプレートの中で使われる以下のようなコードは、WordPressに登録された情報を動的に表示するための関数です。

関数名	表示される内容	解説
`<?php bloginfo('name'); ?>`	サイトのタイトル	「設定」＞「一般設定」で入力したサイト名を表示します
`<?php bloginfo('description'); ?>`	サイトのキャッチフレーズ	「キャッチフレーズ」に入力された説明文が表示されます
`<?php echo home_url(); ?>`	トップページのURL	トップページへのリンクを出力します（相対パスより安全）
`<?php echo get_stylesheet_uri(); ?>`	style.cssのURL	テーマフォルダ内の `style.css` へのURLを出力します
`<?php echo get_template_directory_uri(); ?>`	テーマフォルダのURL	画像やJS、CSSのパスを出力する時に使います

このように、WordPress関数は動的な情報の置き換えができるのが特徴です。
手打ちで書くより、管理画面の設定に従って自動的に反映される仕組みになっているのがポイントです。

footer.phpへの追加

footerには<?php wp_fooyer();?>を追加しておきましょう。

    <!-- フッター開始 -->
    <footer id="footer">

        <!-- ページ先頭へ戻るボタン -->
        <a href="#top" class="backtoTop">
            ▲
        </a>

        <div class="container">
            <!-- ロゴ画像（白バージョン） -->
            <!-- トップページへのリンクに変更（index.htmlではなく home_url() を使うのが推奨） -->
            <figure class="mb-m">
                <a href="<?php echo home_url(); ?>">
                    <img src="<?php echo esc_url( get_theme_file_uri('images/logo_white.svg') ); ?>" alt="UNNHANBUR(アンハンバー) ロゴ" width="195" height="36">
                </a>
            </figure>

            <!-- 営業情報と住所 -->
            <p>OPEN 11:00〜23:00</p>
            <h3>本店</h3>

            <!-- 電話リンク（スマホでタップすると発信） -->
            <p><a href="tel:035466XXXX">TEL 03−5466-XXXX</a></p>

            <!-- 住所タグでマークアップ -->
            <address>東京都渋谷区広尾１丁目23−22 WWD NLD 1F</address>
        </div>

        <!-- コピーライト表記 -->
        <p class="copyright">
            <small>&copy; 2025 UNNHANBUR（アンハンバー）</small>
        </p>
    </footer>

    <!-- WordPress用：フッター前のフック（プラグインが必要なコードを出力する） -->
    <?php wp_footer(); ?>

</body>
</html>

`wp_head()` と `wp_footer()` は必須です。

関数	使う場所	主な役割
`<?php wp_head(); ?>`	header.phpの`<head>` タグの中で</head>　の上の行に配置	WordPressやプラグインが必要なCSSやJS、metaタグなどを追加できるようにする
`<?php wp_footer(); ?>`	footer.phpの`</body>` のタグの上に配置	フッターまわりに必要なスクリプト（JS）などを追加できるようにする

<?php wp_head();?>と<?php wp_footer();?>があることで、WordPress本体・テーマ・プラグインが必要に応じて以下を自動で出力します。そのため、必須のコードになります。

CSS（例：ブロックエディタ用）
JavaScript（jQueryなど）
メタ情報（OGPなど）
その他の追加スクリプト（Google Analyticsなど）
jQueryの読み込み
スライダーやアニメーション用のJS
Google AnalyticsやGA4のタグ管理

index.htmlよりコードをコピー

<main>エリアにHTMLファイルの<figure>から</main>までをコピーペーストして書き換えておきましょう。

<?php get_header(); ?>

<main>
  <h1>トップページです</h1>
  <p>このエリアにコンテンツが入ります。</p>
</main>

<?php get_footer(); ?>

補足：画像を使う場合は…
HTMLファイルから <img src="images/ファイル名"> という相対パスをそのまま使うと、WordPressでは画像が正しく表示されないことがあります。
WordPressでは以下のように、get_theme_file_uri() を使ってテーマ内の画像パスを動的に取得するのが一般的です

<img src="<?php echo esc_url( get_theme_file_uri('images/ファイル名') ); ?>" alt="">

images フォルダは、テーマフォルダ直下にある前提です。
esc_url() を付けることで、URLとして安全に出力されるようになります。

WordPressのオリジナルテーマ テンプレートの分割とHTMLのWordPress化

目的