「最初からWordPress化を見据えてHTMLを書いておけばよかった…」
こんなことを思ったことはありませんか？
静的ページとしては完璧に見えるコーディングも、いざWordPressに組み込もうとすると「あれ？この書き方だと分割しづらい」「パーツ化してないから超手間…」と、後悔するケースもあります。
本記事では、WordPress化（テーマ化）しやすい静的HTMLの作り方を、設計・コーディング・画像管理・フォルダ構成の4つの観点から解説していきます。
これからWordPress化の可能性がある案件や、自社サイトの拡張を見越している方は、ぜひチェックしてみてください。
静的HTMLをWordPress化する方法については、下記記事をご覧ください。
WordPress化しやすい静的ページとは？
まず、「WordPress化しやすい静的ページ」とは何か。
ざっくり言うと、
- ヘッダーやフッターなどの共通パーツが明確に分かれている
- 投稿やカスタム投稿で管理しやすいようにループ構造を意識している
- 拡張や差し替えが前提の設計になっている
これらの要素を押さえていると、後からWordPress化する際に大きな手戻りが発生しません。
では、実際の設計とコーディングでは何を意識すれば良いのか？
順を追って見ていきましょう。
1.共通パーツを明確にしておく
WordPress化を前提にするなら、「この部分は共通で使いまわすだろうな」というパーツを、なるべく明確にしておくことが重要です。
たとえば以下のようなものは、
ほぼ間違いなく共通パーツ化されます。
- ヘッダー（header）
- フッター（footer）
- ナビゲーションメニュー
- パンくずリスト
- サイドバー（必要であれば）
HTMLファイルは1ページ構成だったとしても、「このあたりは後で get_header() で呼び出すだろうな」と想定しておくと、WordPress化のときにスムーズです。
可能であればコメントで、「ここからheader」「ここまでheader」「ここからfooter」など、将来的に分割されるパーツの区切りを明示しておくと、後工程の自分（あるいは別のコーダー）がラクになります。
WordPress化で苦労するのは、こうした共通部分の境界線があいまいな状態にある場合です。
最初から「これは共通」「これは固有」と頭の中でパーツを分けておくと、スムーズにWordPress化できます。
ちなみに、ページによっては、デザインが異なったり、そのページでしか使わないCSSやJSだったりがあるケースもあると思います。
その場合、別途そのページ用の header.php を用意するという手段もありますが、一般的には条件分岐でスクリプトやスタイルを切り替える方法が多く使われます。
たとえば、functions.php に以下のようなコードを追加することで、特定のページでのみCSSやJSを読み込ませることができます。
function my_custom_assets() {
// 固定ページ「about」にだけCSSを読み込み
if (is_page('about')) {
wp_enqueue_style('about-css', get_template_directory_uri() . '/css/about.css');
wp_enqueue_script('about-js', get_template_directory_uri() . '/js/about.js', array(), false, true);
}
}
add_action('wp_enqueue_scripts', 'my_custom_assets');
このように条件を細かく指定しておけば、共通の header.php を維持しながら、ページ単位での柔軟な出し分けが可能になります。
また、テンプレートファイル自体を分ける方法（page-about.php など）もありますが、数が増えると管理が煩雑になるため、メンテナンス性を重視するなら条件分岐の活用がおすすめです。
もちろん、デザインの方向性がまったく異なるランディングページなどでは、header-lp.php や footer-lp.php を用意し、get_header(‘lp’) のように呼び分ける方法も有効です。
要は、「将来WordPress化する可能性がある」という前提で、どの程度共通化しておくべきか・分岐に備えるべきかを見極めておくことが大切なのです。
2.ボディ直下にページ固有のclassをつけておく
WordPressでは、たとえば page-contact や single-post といったクラスが <body> タグに自動で出力されますが、静的HTMLの段階ではそれがありません。
そのため、将来的にWordPress化することを見越して、あらかじめ <body> タグにページ固有のクラス名を自分でつけておくと便利です。
<body class="page-seo-contact">こうしておけば、WordPress側でテンプレートごとに出力される body_class() を差し替える形で、任意のクラスを引き継ぐことができます。
WordPress化の際にテーマファイル内で以下のように出力します。
<body <?php body_class(); ?>>このとき、functions.php にフィルターを追加すれば、静的HTMLで使用していたクラス名も簡単に追加できます。
function add_custom_body_class($classes) {
if (is_page('seo')) {
$classes[] = 'page-seo-content';
}
return $classes;
}
add_filter('body_class', 'add_custom_body_class');このようにbodyにクラス名を付与すれば、別ページで同じクラス名が存在したとしても、
.page-seo-contact .btn {
color: #fff;
}といった指定が可能になります。
3. 投稿・カスタム投稿化を見越して繰り返しパーツを構築
静的ページでは「記事一覧」「実績一覧」「お知らせ」など、繰り返し要素もHTMLで書く必要がありますが、これを投稿ループとして設計しておくと、WordPress側で the_post() などに置き換えやすくなります。
<ul class="news-list">
<li>
<span class="date">2025.07.25</span>
<a href="#">お知らせのタイトル</a>
</li>
<!-- ↑この部分を1件分としてループ前提でコーディング -->
</ul>あらかじめこのように「繰り返し前提」で設計しておくことで、後から foreach や WP_Query に書き換えがしやすくなります。
4. 画像ファイルの命名と配置に注意する
WordPress化を見据える場合、画像のパスの書き方には特に注意が必要です。
静的HTMLでは、よく以下のように記述します。
<img src="./assets/images/common/logo.png" alt="ロゴ">このように ./ で始まるパスは、HTMLファイルを基準にした相対パスです。
一方、WordPressに移行すると、ファイル構造が大きく変わり、テンプレート階層やディレクトリの深さもページごとに異なるため、この相対パスがそのまま使えなくなるケースがほとんどです。
WordPressでは、以下のように 関数を使ってテーマディレクトリを指定する書き方が一般的になります。
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/common/logo.png" alt="ロゴ">そのため、静的HTMLの時点で「ここは置き換える箇所ですよ」という目印として、./ を付けておくと、あとでPHPコードに差し替える際に非常にスムーズです。
また、以下のような工夫もおすすめです：
- 画像は「共通（common）」「トップ（top）」「下層ページ（sub）」など、用途別にディレクトリを分ける
- ファイル名にはlogo-main.pngやhero-kv.jpgなど、意味が伝わる名前をつけておく
- 命名規則をプロジェクト内で統一しておく（例：すべて小文字＋ハイフン区切り）
こうすることで、WordPress移行時の置き換え作業や、CSS・JS内での参照の調整が圧倒的に楽になります。
HTMLファイルの階層構造をテンプレートに対応させる
WordPressのテンプレート階層にあわせて、HTMLのディレクトリ構造もある程度意識しておくと、組み込みがスムーズになります。
about.html → page-about.php
index.html → front-page.php
single.html → single.phpこのように、WordPressで使われるファイル命名・テンプレートの流れに沿って設計しておくことで、移行が格段にラクになります。
6. style.cssは細かくモジュール分割しておく
WordPressテーマには style.css が必要になりますが、すべてを1ファイルで管理するとメンテナンスが大変です。
静的HTMLの段階から以下のように分割しておくと、後から functions.php での読み込みやビルドも簡単です。
/css/
├─ base.css
├─ layout.css
├─ module.css
├─ page.css
├─ responsive.cssまた、最近思ったのですが、生成AIなどにCSSを読み込ませる際に、量が多いとエラーが発生する場合があるので、その点からも、一つにまとめてしまうのは非効率かもしれません。
7. JavaScriptも分割＋関数化しておく
WordPressでは、JSも functions.php 経由で読み込むことが多いです。
静的HTMLの時点で、必要な関数をモジュールごとに分けておくと、移行がスムーズになります。
// js/common.js
function menuToggle() {
…
}
// js/form.js
function validateForm() {
…
}また、jQueryを使う場合は、WordPress側での読み込みとのバッティングに注意してください。
※WordPress自体にjQueryが用意されている。
まとめ：設計段階からWordPress化を見据えておこう
静的HTMLを「あとでWordPress化するかも」という前提で作るなら、設計段階から分割・再利用・拡張を意識することが命です。
- パーツはファイルで分ける
- 繰り返し要素はループ前提で書く
- 画像やCSSの構成もWordPress流に寄せておく
これらを押さえることで、後からのWordPress化は「ほぼ置き換えるだけ」で完了するようになります。
逆に、静的コーディング時に目の前の完成だけを意識してしまうと、後々大きな修正コストがかかることになるので注意しましょう。
ぜひこの記事を参考に、「WordPress化しやすいコーディング」を心がけてみてください。