【AI×Web制作 爆速ワークフロー⑥】WordPressテーマ化のPHPは“生成して調整”で怖くない | SkillhubAI（スキルハブエーアイ）

【AI×Web制作 爆速ワークフロー⑥】WordPressテーマ化のPHPは“生成して調整”で怖くない

by 吉田光利

｜ 81 PV ｜ 2026.02.25

favorite_border

「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。 今こそ「作る側」から「教える側」へ回るチャンスです。

AI時代を勝ち抜くための「億を稼ぐスクールビジネス」を、期間限定で公開しています。無料ですのでチェックしましょう。

（無料公開、限定100名、3月1日まで）


» 今すぐ億を稼ぐマニュアルをゲットする

WordPressサイトを制作する際、テンプレート階層やPHPの記述でつまずいた経験はありませんか。

「ループや分岐で混乱する」
「少し触っただけで画面が真っ白になった」
そんな苦手意識を持っている人は少なくありません。

ですが、今は、AIと一緒に制作できる時代です。
テンプレートの土台やループ構造などのコードの置き換えは、AIが行ってくれます。 人間は方向性を示し、動作確認と調整を主に行えば良いのです。

AIと協働しながら進めていけば、WordPressテーマ制作も決して怖いものではありません。

【AI×Web制作 爆速ワークフロー】について

この連載では、AIを使ってWeb制作を“爆速化”するリアルな制作フローを紹介していきます。

テーマはAIを使って、1ヶ月分の仕事を3日で終わらせる。
実際の制作フローに準じて、重要なポイントごと全6回に渡ってAI活用術を取り上げていきます。

  1. 要件定義・サイト構成決定
  2. ワイヤーフレーム制作とライティング
  3. Webデザイン制作
  4. HTML＆CSSによるベースコーディング
  5. Javascript・リッチアニメーション
  6. WordPressサイト化

なお、この連載は「AIに丸投げして完成！」という話ではありません。
実際のWeb制作ではクライアントの要望を理解し、Webサイト（ページ）に落とし込んでいく必要があります。このため、我々Skillhubでは「Web制作業務を請け負う」ことを前提にした、AI活用術を中心に紹介しています。

前回までで、静的ページ（HTMLページ）の作成が終わりました。
今回はこのHTMLページをベースに、WordPressサイトとして運用していける形を作ります。

AI×Web制作 爆速ワークフロー
第6回｜WordPressテーマ制作

file

今回行うこと｜静的サイトからのWordPress化

これまで①〜⑤で作ってきた静的Webサイトを、今回はWordPressテーマとして機能する形に変換します。

デモでは基本的なWordPressテーマ構成に使える、以下の5ページを用意しました。
静的HTMLをベースにしながら、必要なテンプレートへと変換していきます。

  • index.html：サイトのトップページ（front-page.php）
  • company.html：固定ページ - 親（page-company.php）
  • company-overview.html：固定ページ - 子（page.php）
  • info.html：投稿の一覧表示ページ（home.php もしくは archive.php）
  • info-article.html：投稿の詳細ページ（single.php)

WordPressテーマ制作経験があまりない方だと、この割り当て見た時点で「うわぁ…」と思ってしまうかもしれません。WordPressサイト制作、それもテーマをイチから作成する案件になると、以下のような不安が出てくると思います。

WordPress案件で不安な要素

  • 何から手を付ければいいかわからない
  • ファイル名やテンプレート階層がややこしい
  • PHPの基礎がよくわからない
  • WordPress関数を調べるのに時間がかかる
  • コードを書いたら画面が真っ白になったことがあり、トラウマ

WordPressがテーマとして認識するためのファイル構成、PHPの基礎知識、WordPress関数を使った記法、プラグインを導入する場合はブラグインが指定するコードの書き方……これら全てを行おうとすると、必要な知識・情報量はかなりのものになります。
一人で調べながらコードを書くのは、かなり大変です。

AIとの協働 なら大丈夫です

ですが、今はAIと一緒に制作できる時代です。
人間がゼロからすべてを書く必要はありません。
テンプレートの土台やループ構造はAIに生成してもらい、人間は動作を確認しながら整えていきます。

難しいコードを書くことよりも
「どこまで動的にするか」
「どう分割するか」
「どのテンプレートにするか」
という設計判断に集中できるようになります。

今回のWordPress編は、AIに丸投げする回ではありません。
AIと協働しながら、テーマを一つずつ組み立てていく体験です。

ポイントと事前準備

■ 今回の作業のポイント

今回の作業は、静的HTMLをそのままWordPressテーマに変換することです。
ただし、「この静的サイトをWordPressテーマにして」と一気に依頼するのではなく、

・index.php と functions.php でテーマとして成立させる
・共通パーツを分割する
・front-page.php を作る
・home.php や single.php を順番に作る

というように、ステップごとに区切って進めることがポイントになります。
一つのテンプレートを作ったら必ず表示確認をする。
この積み重ねが、AI時代の安全なWordPress制作のコツです。

■ 事前準備｜ローカル環境の用意

この記事では、WordPress導入済の前提で進めます。

MAMP、XAMPP、Localなどを導入したローカル環境構築方法については、別の無料講座・記事でご紹介しています。
はじめて設定する、という方は以下をご参照ください。

はじめてローカル環境を導入する方は、手軽に使えるLocalがおすすめです。

テーマの最低限ファイルを用意する

今まで作成してきた静的サイト静的サイトを元に、WordPressのthemeを作成していきます。

使用するWordPressの wp-content > themes を開いてください。
今まで作成してきたWebページ（HTMLやCSS）が入ったフォルダを丸ごとコピーします。
file

そして、追加したテーマディレクトリを VScode などのエディタにドラッグアンドドロップ。
エディタでテーマディレクトリを開いている状態にします。
file

この状態では、まだ中身は静的サイトそのままです。
file

WordPressテーマとして使用できるよう、まずはAIに最低限のセットアップをしてもらいましょう。 

このフォルダをWordPressのテーマとして使用できる状態にしたい。
以下の設定を行ってください。

・index.phpとfunctions.phpを新規作成して、最低限の記述を入れる
・style.cssにTemplateヘッダーを入れる

上記の指示をチャットボックスに入力して送信します。
file

AIが指示した作業を実行してくれます。
対応完了の表示が出たら、ファイルを確認してみましょう。

index.phpとfunctions.phpが追加されました。
style.cssも、最初にTemplateヘッダーが記述されています。
file

WordPressの管理画面から、外観 > テーマ を開いてみます。
きちんとテーマとして認識され、有効化ができるようになっています。 file

次からの作業・表示確認がしやすいように、制作中のテーマを有効化してください。

共通パーツの分割・インクルードを行う

静的HTMLのままでは、ヘッダーやフッターがすべてのページに書かれています。
このままでは、修正が発生したときに全ページを編集する必要があります。
WordPressでは共通部分を分割し、必要な場所で読み込む形にすることで更新・修正の手間を省略できます。

今回のデモでは、次の3つを分割します。

・ヘッダー
・フッター
・下部CTA

file

1. AIに分割を依頼する

まずは、全ページ共通で使用するheaderとfooter部分を分割しましょう。
以下のように、AIに「headerとfooterを別ファイルにしたい」という旨を伝えます。

フォルダ内に入っているHTMLをWordPressテーマに置き換える作業をしています。
選択した共通箇所のHTMLを、WordPressテーマ用に分割してください。  
ヘッダー部分はheader.php、フッター部分はfooter.phpにしてください。

デモでは記述の少ないinfo-article.html（投稿詳細/ single.phpにする予定) で範囲指定をしています。
file

プロンプトを送信して、しばらく待ちましょう。
（※以下は待ち時間を編集でスキップしているので、実際にはもう少し時間がかかります）
file

ヘッダーとフッターのコードがそれぞれ独立したファイルとして生成されます。
また、デモ操作を行ったときは、静的HTMLもphpファイルとして新規追加されました。
file

ここがAIにコーディングを任せる場合の落とし穴です。
このページは投稿の詳細（ single.php ) にする予定でしたが、今のファイル名では使えません。
single.phpに変更しましょう。
自分でファイルをリネームしても良いですが、せっかくなのでAIにお願いしてみます。

追加してくれたinfo-article.phpは、通常投稿の表示ページとして使用する予定です。
single.phpに変換してください。

file

single.phpに変更されました。

※ AIによるコーディングは生成のたびに異なります。
「変更点：」の表示や、生成されたコードを確認して、AIが更新してくれた箇所が適切かを確認してください。

2. ボトムCTAは parts ディレクトリにまとめる

デモサイトの場合、下部CTAは、いくつかのページで共通して使用するパーツです。 見本ファイルでもトップページと、投稿詳細ページ（info-article.html → single.php ）の2ファイルで使用していますね。

複数テンプレートで使用する共通パーツも分割しておくと、修正が一瞬で済みます。
ですが、headerやfooterのように、ほぼ全ページで使うというわけではありません。
こうしたパーツはテーマフォルダ直下に置くとゴチャついてしまうので、業務では共通パーツを入れるディレクトリを作成し、その中に配置する場合が多いです。

この下部CTAセクションは他のテンプレートでも共通パーツとして使用したいです。
partsディレクトリを作成し、その中に cta-bottom.php として配置してください。

追加したいディレクトリ（フォルダ）名や、ファイル名を指定すると、AIは忠実に再現してくれます。
file
　　↓
file

3. 表示を確認する

では、WordPressサイトで投稿ページの表示を確認してみましょう。

まだWordPressのエディタに入力した内容を動的に出力はしていません。 初期登録されている『Hello world!』の表示を確認して、HTMLページと同じ見た目かを確認しましょう。
file
崩れなくページが表示されていて、JSも動いていれば成功です。

トップページをWordPress用に最適化する

single.phpはいったん置いておいて、まずはトップページを完成させます。
今回は、これまで作成してきた index.html をベースに、front-page.php を作成します。
WordPressでは、front-page.php がトップページ専用のテンプレートとして読み込まれます。

1. AIに変換を依頼する

AIに次のように指示します。

index.html のコードを、WordPressの front-page.php 用に変換してください。  
・ header.php と footer.php はすでに存在するものを読み込みます。
・ 下部のCTAもparts/cta-bottomを読み込む形にしてください。
・ その他の部分はHTMLのままで良いです。動的に出力する箇所はありません。

最後の一文は、AIが一般的なWordPressサイトを想定して不必要なループを入れないように書いています。
このあたりは、作成するサイト/ページのデザインに合わせて調整してください。
file
　　↓
file
リクエストした、header, CTA, footer部分は分割したPHPファイルを読み込む形でfront-page.php が生成されました。

2. 表示を確認し、おかしな部分は修正する

作成中のWordPressサイトを開いて、表示を確認します。
front-page.php がテーマ内にあれば自動的にトップページに適用されているはずです。
file

デモのページでは、header, CTA, footer部分は問題なく読み込まれていました。 ヘッダーとファーストビューとの間が空いているのは、WordPressの管理バー（wpadminbar）との兼ね合いなので問題ありません。不安な方は、シークレットウィンドウや別ブラウザなどを使って、非ログイン状態での表示確認をしてみてください。

ただ、画像が読み込めていませんね。
front-page.phpを見てみると、画像パスがHTMLファイルの時のままでした。

「どうするんだったかな…」という場合は、AIに指示して直してもらいます。

front-page.phpに書かれているimg要素が表示されません。
画像パスの記述を、WordPressテーマに最適な形に直してください。

「get_template_directory_uri(); を使えば良い」と分かった場合は、エディタの一括置換を使ってパスを置き換えても良いです。特定の記述を単純に置き換える場合は、AIに作業させるよりも、一括置換を使ったほうが早いことが多いです。
file

業務としては「正しく画像が表示される」状態に直せれば問題ありません。
WordPressサイトでもHTMLコーディング時と同じ表示になっていれば完成です。 file

3. 次の準備 | ページ割り当てを選択する

ここまでで、トップページ（front-page.php）のWordPress変換は完了しました。
front-page.php は、ファイルを置くだけで自動的にトップページとして読み込まれます。

しかし、すべてのページが同じように自動判定されるわけではありません。
これから作る「お知らせ一覧」は、投稿（post）を表示するためのページです。
この役割は、ファイル名だけでは決まりません。 そこで次のステップに進むために、管理画面でページの役割を割り当てます。

まず、固定ページの新規追加から「お知らせ一覧」というページを作成します。

  • 本文は空で問題ありません。
  • スラッグの欄に、お知らせ一覧の表示に使いたいurlを入力します。
  • 固定ページを公開状態にします。

file

下図で黄色くハイライトした３ケ所が設定できていればOK。
file

もう一つ、固定ページを新規追加します。
こちらはタイトルに「フロントページ」と入力して公開するだけで良いです。

2つ固定ページが追加できたら、管理画面の設定 > 表示設定を開きます。
file

『ホームページの表示』の選択を固定ページに変更。
ホームページと投稿ページのプルダウンから、それぞれ先ほど作成した固定ページを選択します。 その下にある 1ページに表示する最大投稿数も、必要があればデザインに合わせて調整してください。
file これで、投稿の一覧は指定したページに表示されると設定は完了です。
WordPress側の準備は整いました。

投稿一覧/投稿詳細ページを作成する

1. 投稿一覧を作る｜home.php

投稿一覧を表示するためのテンプレートを作成します。

通常であれば、ループ構造や条件分岐を自分で書く必要があります。
ですが今回は、AIに依頼してコードを書いてもらいます。

WordPressの投稿一覧ページ用に home.php を作成してください。

・ 元となるデザインはinfo.htmlです。
・ header.php と footer.php はすでに存在するものを読み込みます。
・ 投稿タイトルと投稿日を一覧表示し、投稿が無い場合の表示も含めてください。
・ ページネーションも実装してください。

file

AIに指示を送信して待つと、WordPressのループを含んだコードが生成されます。
file

2. 投稿詳細ページを作る｜single.php

一覧ページの次は、投稿の詳細ページを整えます。 通常の投稿（post）の表示に使われるテンプレートは single.php です。

デモでは共通パーツの分割・インクルードで既に半分くらいは出来ていますが、まだsingle.phpがない方も大丈夫。テーマへの変更度合いに合わせて、AIに送信するプロンプトを調整します。

single.phpがまだ無い場合

WordPressの投稿詳細ページ用に single.php を作成してください。  
・ 元となるデザインは〇〇〇.htmlです。
・ header.php と footer.php はすでに存在するものを読み込みます。
・ 下部のCTAはparts/cta-bottomを読み込む形にしてください。
・ 投稿タイトル、投稿日、更新日、本文を動的に表示させてください。

single.phpがあり、デモと同じくらいの進捗の場合

single.php を WordPress からの出力に対応させてください。 
投稿タイトル、投稿日、更新日、本文を動的に表示させてください。

　　↓
file
デモサイトで試すと、タイトルなどの表示部分はWordPressのコードに置き換わっていました。しかし、h1タイトル周りのデザインに必要なラッパー要素が削除されてしまっており、そのまま表示させるとページの見た目が変わってしまいそうです。

こういう時は、AIに「ここ違う」「無くさないで」と追加指示を出しましょう。

h1や投稿日を囲うセクションを無くさないでください。
<section class="hdg hdg-article">やパンくず用のコードもデザインとして必要です。

file
　　↓
file
消されていたsectionがタグやCSSクラス、パンくず表示が復活しました。
これでレイアウトは崩れなさそうですね。

3. 投稿を追加し、表示を確認する

実際に投稿一覧・詳細ページの表示を確認してみましょう。

まずは、投稿を追加して本文部分を加えます。
info-article.htmlのコンテンツ部分を、WordPressのエディタ側で設定するイメージです。
file
file

投稿を公開したら、投稿一覧ページを開いて表示を確認。
投稿一覧ページは サイトアドレス/固定ページに設定したスラッグ、もしくは固定ページの「表示」から開けます。
file
HTMLページのデザインを維持し、追加した投稿が表示されていれば成功です。
そのまま、リンクをクリックして投稿詳細ページの表示も確認してください。

一覧ページの下部にあるページネーション（ページ送り）は、投稿数が少ないと表示されません。 タイトルだけのダミー投稿を作るなどして、表示を確認してください。

表示確認をしている中で問題のある個所が見つかれば、AIに該当箇所を伝えて修正してもらいます。
下図は一例です。
file

固定ページをWordPress化する

ここまでで、トップページと投稿機能はWordPress化できました。
次は「会社情報」などを固定ページを使って整えていきます。

1. 固定ページを追加する

管理画面を開いて、HTMLページを置き換える用の固定ページを２つ作ります。
固定ページ > 新規追加からページを作成してください。

まずは一つ目、会社情報の一覧を表示するページを作ります。
デモファイルのcompany.htmlに該当するページです。

  • タイトル：会社情報
  • スラッグ：company

この２か所だけ設定して、公開します。
file

続いて、もう一度「新規追加」をクリックします。
次は会社情報の中で細分化されているページ、デモファイルのcompany-overview.htmlを作ります。

  • タイトル：会社概要
  • 本文：WordPress側から出力したい情報を入力（デモの場合は カスタムHTML で table要素を貼り付けています）
  • スラッグ：overview
  • 親ページ：会社情報

file

こちらのページも公開してください。
これで準備完了です。

2. page.php を作成する

固定ページの基本テンプレートは page.php です。

まずはAIに依頼して、このテンプレートを作ってもらいましょう。
プロンプトも、行っていることも、ここまでとほぼ同じです。

WordPressの固定ページ用に page.php を作成してください。 
・ 元となるデザインはcompany-overview.htmlです。
・ header.php と footer.php はすでに存在するものを読み込みます。
・ 固定ページのタイトル、本文を動的に表示させてください。

file

追加した固定ページ、本文を設定した子ページの方を開いて商事を確認します。
タイトルと本文が表示されていれば成功です。

上図でAIが提案しているように、パンくずに親ページ階層を動的表示すると、なお便利。
AIに依頼して作成してみてもらってください。
コードとしては以下のような形になります。

<nav class="breadscrum container" aria-label="パンくず">
    <ol>
        <li><a href="<?php echo esc_url(home_url('/')); ?>" class="link">ホーム</a></li>
        <?php
        $ancestor_ids = array_reverse(get_post_ancestors(get_the_ID()));
        foreach ($ancestor_ids as $ancestor_id) :
        ?>
            <li><a href="<?php echo esc_url(get_permalink($ancestor_id)); ?>" class="link"><?php echo esc_html(get_the_title($ancestor_id)); ?></a></li>
        <?php endforeach; ?>
        <li><?php the_title(); ?></li>
    </ol>
</nav>
<div class="container fadein-BtoT">
    <h1><?php the_title(); ?></h1>
</div>

3. 親ページ専用テンプレートを作る

次に、「会社情報」ページ。
ここは他のページ（子ページのリンク）を載せたいので、別途作成しましょう。

とりあえず簡単に、以下のようにAIに依頼します。

WordPressの固定ページに独自で割り当てられるよう、company.htmlをpage-company.phpに変換してください。
・ header.php と footer.php はすでに存在するものを読み込む形に直してください。
・ 画像パスをWodPressテーマ向けに変更してください。

page-company.phpが作成されます。
多少の差異はありますが、以下のようなコードになると思います。

<?php
/**
 * Template Name: Company Page
 *
 * @package edbaseTheme
 */

get_header();
?>

<main class="pages">
  <section class="hdg hdg-top">
    <nav class="breadscrum container" aria-label="パンくず">
      <ol>
        <li><a href="<?php echo esc_url(home_url('/')); ?>" class="link">ホーム</a></li>
        <li>会社情報</li>
      </ol>
    </nav>
    <div class="container fadein-BtoT">
      <h1>会社情報</h1>
      <p class="lead">
        <span class="text-highlight highlight-light highlight-bold">教育事業に、本当に必要なものを。</span><br>
        エドベース株式会社の理念や、行っている取り組みをご紹介します。
      </p>
    </div>
    <div class="hdg-top-bg">
      <img src="<?php echo esc_url(get_template_directory_uri() . '/images/hgg.png'); ?>" alt="" />
    </div>
  </section>

  <section class="page-content">
    <div class="container">
      <h2 class="fadein-BtoT">会社案内</h2>
      <ul class="link-list -col3 fadein-stagger stagger-160">
        <li class="page-card fadein-BtoT">
          <a href="<?php echo esc_url(home_url('/overview/')); ?>">
            <div class="page-card-icon">
              <img src="<?php echo esc_url(get_template_directory_uri() . '/images/icon-c-overview.png'); ?>" alt="会社概要" />
            </div>
            会社概要
          </a>
        </li>

会社情報の固定ページを確認して、作成したテンプレート（page-company.php）が適用されているかを確認してください。

動作確認と調整

これでHTMLで作成した5種類のページが、WordPressのテーマに変換できました。
それぞれのページの表示、リンクなどを確認してください。

必要に応じて、以下のようなところを直していくと更に使い勝手の良いテーマになります。
AIと相談しながら、実装にチャレンジしてみてください。

  • ヘッダーやフッターのリンク項目を、WordPressのメニューから設定できるようにする
  • 投稿一覧で使用するページネーションの作り込み
  • page-company.phpで、子ページを動的に出力する
  • パンくずリストの出力を共通ファイル化して/partsに入れる

まとめ

AI時代のWordPress制作は“直す”と”整える”がメイン

今回のWordPress化では、テンプレートの土台やループ構造をAIに書いてもらいました。

以前であれば、調べながら何時間もかけて書いていたコードが、数十秒～数分待っているだけで生成されます。WordPressテーマに必要な記述を覚えたり、調べたりする時間はほぼゼロになったといっても良いでしょう。
file

その分、人間がやるべきことは変わります。
従来のように「書く」ことではなく、 生成されたものを「確認し、整え、修正する」部分に時間を使うのが、AI時代の制作スタイルと言えます。

■ AIを使うメリット

・テンプレートの初期構造を一瞬で作れる
・ループや条件分岐を自分で組まなくてよい
・エラーの原因を相談しながら修正できる

特に初心者にとっては、「書けないから進めない」という時間が減ります。
動く形がすぐに手に入るため、理解と実践を同時に進められます。

■ AIを使う注意点

ただし、すべてを一気に作らせるのはおすすめしません。
知識が浅い状態で一気に大量のコードを生成すると、どこで何が動いているのか分からなくなり、修正できなくなります。

【爆即】がテーマではありますが、今回のようにテンプレートごとに動作確認をしながら進めたほうが、早く・確実に仕上げることができます。
AIは強力ですが、最終的に判断し修正するのは人間です。
一つずつ確認しながら積み上げていくことで、知識も実力も確実に身につきます。

最後に

ここまで【AI×Web制作 爆速ワークフロー】として、クライアントへのヒアリングからWordPressサイト制作までを順に紹介してきました。

AIの力を借りることで、制作スピードは確実に上がります。
迷う時間は減り、形にするまでのハードルも下がります。

ですが、AI時代だからこそ、Web制作スキルで本当に差がつくのは「なぜそうなるのか」を理解しているかどうかです。

AIは答えを出してくれますが、その答えを判断し、直し、より良くするのは人間の役割です。
その力があれば、AIは最強の相棒になります。

Skillhubのご案内

この連載で紹介しているフローは、基礎があってこそ再現できるものです。
Skillhubでは、以下のようなことを、初心者向けに体系的に学べるカリキュラムを提供しています。

  • Webサイトの構造の考え方
  • なぜその構成・デザインになるのか
  • AIが出したコードや提案を“理解して直せる力”

基礎知識を学べる無料講座もご用意しています。
この機に、AIを活用するために必要な基礎力を身につけちゃいましょう！

まずは無料で7講座から始めましょう！

ハイクオリティな7講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
3月1日まで
募集 人数
100名 （残りわずか）

こちらもオススメ

【初心者向け】Web記事・ブログ用アイキャッチ/サムネイルの作成の8大ポイント

4281 PV ｜ 2026.02.25

favorite_border

PhotoshopのAI機能『生成塗りつぶし』は何がすごい? 使い方も解説します

3757 PV ｜ 2026.02.25

favorite_border

WebデザイナーにAIって必要ですか？

1022 PV ｜ 2026.02.25

favorite_border
expand_less