WordPressテーマ化への第一歩：静的HTMLから動的サイトへ

Posted on by

〜「ただ作れる」から「更新できるサイトを作れる」へステップアップ〜

静的HTMLで作れるのに、なぜテーマ化が必要？

HTML/CSSでサイトを作れるようになると、次にぶつかる壁があります。

「デザインはできた。でも更新が大変…」
「文章を少し変えたいだけで、HTMLを開いて修正してアップするの面倒」
「クライアントが自分で更新できるようにしたい」

これがまさに、静的サイトの限界です。

静的HTMLサイトは制作そのものはシンプルですが、運用になると一気に弱くなります。

  • 更新のたびに制作会社（あなた）が必要
  • テキストの差し替えが面倒
  • ブログやお知らせなど「増えていくコンテンツ」に弱い
  • 多ページになるほど修正箇所が増えて事故が起きやすい

そこで登場するのが **WordPressの「テーマ化」**です。

テーマ化とは簡単に言うと、

HTMLで作ったサイトを「WordPressの仕組み」に組み込み、
管理画面から更新できる“動的サイト”に変える作業

です。

この記事では、静的HTMLをWordPress化するための考え方と手順を、
実務で困らない形でわかりやすくまとめます。

静的サイトと動的サイトの違いを理解しよう

まず、用語の整理から。

静的サイト（Static site）

  • HTMLファイルがそのまま表示される
  • 例：about.html、service.html、contact.html

特徴：

  • とにかく速い
  • シンプルで壊れにくい
  • 更新は「ファイル編集」が必要

動的サイト（Dynamic site / CMS）

  • PHPなどのプログラムでページを生成する
  • WordPressでは「DB（データベース）」の内容を呼び出し表示する

特徴

  • 更新が楽（管理画面から変更可能）
  • 記事・お知らせ・実績などを量産できる
  • 仕組みが複雑、設計が大事

WordPressテーマ化でできるようになること

テーマ化する最大のメリットは

「サイトが“運用できる形”になること」

です。

具体的には以下のことが実現できます

クライアントが自分で更新できる

  • トップのキャッチコピー
  • 画像差し替え
  • 料金や営業時間など

投稿機能が使える

  • お知らせ
  • ブログ
  • 実績
  • よくある質問

テンプレートを分けられる

  • 固定ページ（会社概要、サービス）
  • 投稿（ブログ、お知らせ）
  • 一覧ページ（アーカイブ）

SEO運用がしやすくなる

  • パーマリンク設定
  • タイトル・ディスクリプション
  • 構造化データ系プラグイン活用

テーマ化の全体像（最初にこれだけ把握）

WordPressテーマ化は、やることが多いように見えますが、構造は単純です。

テーマ化の流れ（全体像）

  1. 静的HTMLを「パーツ分解」する
  2. WordPressテーマフォルダを作る
  3. index.php / header.php / footer.php を作る
  4. CSS/JS/画像をテーマに移動
  5. WordPressの関数でパスを置き換える
  6. 投稿・固定ページ・一覧ページのテンプレを整える
  7. 管理画面で編集できる範囲を決める（必要ならACFなど）

まずは静的HTMLを「分解」するのが最重要

テーマ化で一番大事なのは、コードを書く前の準備です。

HTMLを“共通パーツ”と“ページ固有”に分ける

例えば静的サイトには、必ず共通のパーツがあります。

  • header（ロゴ、メニュー）
  • footer（会社情報、リンク、コピーライト）
  • 共通CSS/JS

これをWordPressでは以下のように分離します。

静的HTMLWordPressテーマ
ヘッダー部分header.php
フッター部分footer.php
メイン内容index.php や page.php など
共通CSSstyle.css / assets/css/
共通JSassets/js/

つまりテーマ化とは、

「コピペしてた共通部分をパーツ化して、呼び出す仕組みにする」

という作業なのです。

テーマフォルダの基本構成

まず、WordPressのテーマはここに置きます。

/wp-content/themes/テーマ名/

最初のおすすめ構成はこれ

mytheme/
├─ style.css
├─ functions.php
├─ index.php
├─ header.php
├─ footer.php
├─ screenshot.png
└─ assets/
   ├─ css/
   ├─ js/
   └─ img/

最低限必要なファイル

  • style.css（テーマ情報）
  • index.php（最低1つ必要）

テーマ情報（style.css）を書こう

style.cssの先頭にこれを書きます。

/*
Theme Name: My Theme
Author: Your Name
Version: 1.0
*/

これで管理画面にテーマとして表示されます。

header / footer を切り出してテンプレ化

静的HTMLの共通部分を次のように分解します。

header.php

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header>
  <!-- ここにヘッダーHTML -->
</header>

footer.php

<footer>
  <!-- ここにフッターHTML -->
</footer>
<?php wp_footer(); ?>
</body>
</html>

index.php

<?php get_header(); ?>

<main>
  <!-- ページ固有の内容 -->
</main>

<?php get_footer(); ?>

これで「テーマっぽい形」の完成です。

パスをWordPress化する（ここが一番つまずく）

静的HTMLではこう書きます

<link rel="stylesheet" href="css/style.css">
<img src="img/logo.png">

WordPressテーマでは、ファイルの場所が変わります。

WordPressのURL取得関数を使います。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/css/style.css">

<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/img/logo.png" alt="">

これができると「表示できない事故」が激減します。

CSS/JSをfunctions.phpで読み込む（正しい方法）

直書き読み込みではなく、WordPress推奨の方法で読み込むと管理が楽です。

<?php
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('theme-style', get_stylesheet_directory_uri() . '/assets/css/style.css');
  wp_enqueue_script('theme-js', get_stylesheet_directory_uri() . '/assets/js/main.js', [], false, true);
});

「固定ページ」「投稿」「一覧」を分けて実務に近づける

テーマ化の次の壁は、テンプレート構成です。

よく使うテンプレ

  • front-page.php（トップページ）
  • page.php（固定ページ）
  • single.php（投稿の詳細）
  • archive.php（一覧ページ）
  • 404.php

最初は以下の3つを作れると現場で強いです

  • トップ：front-page.php
  • 下層：page.php
  • ブログ：single.php

テーマ化で最も差がつくポイント「更新範囲の設計」

クライアントが更新できるのは強みですが、更新範囲を広げすぎると崩れます。

おすすめはこう

更新していい場所

  • 文章
  • 画像
  • ボタンURL
  • お知らせ記事

更新させない方がいい場所

  • セクション構造
  • レイアウトを変える要素
  • 複雑なHTML構造

必要ならACF（Advanced Custom Fields）で更新欄を設計します。

まとめ：テーマ化は「運用できるWeb制作」への第一歩

静的HTMLは「作る力」。
WordPressテーマ化は「運用させる力」。

つまりテーマ化を覚えると、

  • 案件単価が上がる
  • クライアント満足が上がる
  • 修正の手間が減る
  • 継続契約につながる

という、Web制作における“武器”が一段増えます。

最初は難しく感じますが、やることは本質的にこうです。

共通部分を分ける
パスを置き換える
管理画面で更新できる形にする

ここを押さえれば、あなたはもう「テーマ化できる人」です。

#WordPress #WordPressテーマ #WordPress制作 #テーマ化 #Web制作 #コーディング #HTMLCSS #PHP #フロントエンド #Webデザイン #初心者向け #静的サイト #動的サイト #サイト制作 #Web制作初心者