✅この記事でわかること
- HTML/CSSで作ったサイトをWordPressテーマにする手順と構造
- functions.phpの役割やループ処理の基礎知識
- 実務案件でよくある失敗とその回避方法
はじめに｜なぜ「テーマ化」が必要なのか？
WordPressはテーマという仕組みによって、サイトのデザインとレイアウトをコントロールしています。
「静的HTMLをそのままコピペ」ではWordPressは動かず、PHPで分割・関数化・動的化する必要があります。
この記事では、HTMLファイル一式を持っている状態から、WordPressテーマとして完成させるまでの流れをステップごとに解説。学習者にも実務者にも役立つ内容です。
【前提条件】
- HTMLファイル一式（index.html、style.css、images/ など）がローカルにある
- WordPressローカル環境（例：Local, MAMP, XAMPPなど）が動作している
- WordPressの基本操作（インストール・テーマ切り替え）ができる
STEP 1：WordPressテーマの基本構造を理解しよう
WordPressは /wp-content/themes/テーマ名/ にあるファイルを読み込みます。
✅ 最低限必要なファイル
| ファイル | 役割 |
|---|---|
| style.css | テーマ情報・CSS |
| index.php | メインテンプレート（投稿一覧など） |
| functions.php | 機能追加（CSS読込・メニュー登録など） |
📝 推奨追加ファイル：
header.php, footer.php, page.php, single.php, screenshot.png
STEP 2：HTMLをベースにテーマフォルダを作成
2.1 テーマフォルダを作成
/wp-content/themes/mytheme/ という新しいフォルダを作成し、HTMLの中身をコピーします。
2.2
style.css
を編集
/*
Theme Name: My Custom Theme
Author: あなたの名前
Description: HTMLをWordPressに変換したテーマ
Version: 1.0
*/📌 ここで書いたテーマ名が「外観 → テーマ」で表示される名前になります。
STEP 3：HTMLの構造をWordPress化する（PHP化）
3.1
index.php
に HTML の内容をコピー
元の index.html のコードを index.php に貼り付けてスタート。
3.2 共通パーツの分割
WordPressでは「共通部分をPHPで分ける」のが基本。
header.php
（例）
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>footer.php
（例）
<footer>
<p>© <?php echo date('Y'); ?> MySite.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>3.3
index.php
で共通パーツを呼び出す
<?php get_header(); ?>
<main>
<h2>トップページのメインコンテンツ</h2>
</main>
<?php get_footer(); ?>
STEP 4：functions.phpでCSSやJSを読み込む
<?php
function mytheme_enqueue_scripts() {
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/style.css');
wp_enqueue_script('main-script', get_template_directory_uri() . '/js/main.js', [], false, true);
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');
// メニューの有効化
register_nav_menus([
'global' => 'グローバルメニュー',
]);
?>📝 HTML内で直接CSSやJSを読み込まず、WordPress流に登録しましょう。
STEP 5：投稿のループ（the_loop）を理解する
WordPress最大の特徴は投稿が動的に増えること。
それを表示するのが「ループ処理（the Loop）」です。
index.php
に投稿ループを追加（例）
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; ?>
<?php else : ?>
<p>記事がありません</p>
<?php endif; ?>STEP 6：その他テンプレートを作って拡張する
| ファイル名 | 用途 |
|---|---|
| single.php | 投稿の個別ページ表示 |
| page.php | 固定ページの表示 |
| 404.php | 404エラーページ |
| archive.php | アーカイブやカテゴリー一覧 |
| search.php | 検索結果ページ |
これらも index.php を元に複製し、適宜編集すればOKです。
STEP 7：テーマを有効化して表示確認
- WordPress管理画面 > 外観 > テーマ → 作ったテーマを「有効化」
- トップページや投稿ページを確認
- デザイン崩れや読み込み漏れがないかチェック
STEP 8：よくあるトラブルとその対処法
| 問題 | 原因と対処 |
|---|---|
| CSSが反映されない | wp_enqueue_style()で正しいパスを指定しているか確認 |
| 画像が表示されない | 相対パスを get_template_directory_uri() に置き換える |
| メニューが表示されない | register_nav_menus()とwp_nav_menu()が正しく設定されているか確認 |
| 投稿が表示されない | the_loopの構文エラー or 投稿が存在しない |
まとめ｜HTMLをWordPressテーマにすることで得られること
- 更新しやすいサイト管理が可能になる
- クライアントでもノーコードで投稿ができるようになる
- 1つのデザインを再利用・拡張可能なテーマ化できる
テーマ化の作業は最初は難しく感じるかもしれませんが、慣れればCMS開発の基礎スキルとして大きな武器になります。
(Visited 30 times, 1 visits today)