サイトアイコン WEBデザインMATOME

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

小清水 和真

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

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

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

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

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

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

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

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

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

です。

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

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

まず、用語の整理から。

静的サイト（Static site）

特徴：

動的サイト（Dynamic site / CMS）

特徴

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

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

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

です。

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

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

投稿機能が使える

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

SEO運用がしやすくなる

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

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

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

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

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

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

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

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

これを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）を書こう

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);
});

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

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

よく使うテンプレ

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

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

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

おすすめはこう

更新していい場所

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

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

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

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

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

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

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

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

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

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

モバイルバージョンを終了