背景

なぜWordPress化するのか

ClaudeCodeで作ったHTMLの静的サイトは、速くて軽量という大きな強みがあります。ただ、それだけでは足りない場面もあります。

  • クライアントが自分でブログを更新したい制作側の手を借りずに記事を書きたいケース
  • 定期的にコンテンツを追加していきたいお知らせや実績を継続的に増やしていく運用

つまりこうした「自分で更新したい」ニーズがあるときは、更新のしくみを備えたCMSが必要になります。WordPressは世界シェアNo.1のCMSです。

準備するもの

まず必要なものをそろえる

WordPress化の作業は、自分のPCの中に用意したローカル環境で進めます。次の3つを準備します。

  • Local(旧 Local by Flywheel、無料)ローカルでWordPressを動かすアプリ
  • 21番で作ったHTMLWordPressテーマに変換する元データ
  • ClaudeCodeHTMLからテーマへの変換を担当
ステップ1

Localでサイトを作る

Localをインストールして、WordPressが動く環境を1つ立ち上げます。手順どおりに進めれば大丈夫です。

1

Localをダウンロード

localwp.com からLocalをダウンロードし、インストールする。

2

新しいサイトを作成

「Create new site」を選び、サイト名を入力して「Finish」まで進める。

3

表示を確認

ブラウザで http://localhost/サイト名 を開き、WordPressが表示されればOK。

ステップ2

テーマ変換を依頼する

用意したHTMLを、ClaudeCodeにWordPressテーマへ変換してもらいます。必要なファイルや対応してほしい機能を、条件として細かく伝えるのがコツです。

プロンプト例
以下のHTMLファイルをWordPressテーマに変換してください。
変換条件:
- テーマフォルダ名:my-custom-theme
- 必要なファイル:style.css、functions.php、index.php、
  header.php、footer.php、single.php、page.php
- ウィジェットエリアをフッターに追加
- ナビをWordPressのメニュー機能に対応
- 投稿一覧をトップページに表示

[HTMLのコードをここに貼付]
ステップ3・4

テーマを設置して動作確認

生成されたテーマフォルダを所定の場所に置き、管理画面で有効化します。崩れがあれば日本語で修正を依頼すれば大丈夫です。

1

テーマフォルダを配置

生成されたフォルダを Local/sites/サイト名/app/public/wp-content/themes/ に置く。

2

テーマを有効化

WordPress管理画面(/wp-admin)→ 外観 → テーマ から有効化する。

3

動作確認と修正

表示を確認し、崩れている部分はClaudeCodeに修正を依頼する。

参考公式ドキュメントは WordPress公式(日本語)Local by Flywheel が参考になります。

ノーコードサロン