WordPressのテーマをClaude.aiで作ってみた話

正直に言います。

私、コーディングはある程度できるんですが、「ゼロからWordPressテーマを作る」ってなると、何から手をつければいいのか毎回迷うんですよね。functions.php に何を書けばいいんだっけ？ style.css のヘッダーってどんな形式だっけ？ってなる。

そんな私が今回やってみたのが、AIを使ってWordPressの親テーマをまるっと作るという試みです。使ったのは Claude.ai（AnthropicのAI）。結論から言うと、想像の3倍くらい実用的でした。

そもそも何を作ったの？

このブログ howto-web.com のWordPress親テーマです。

デザインのイメージはこんな感じで決めていました。

ダークテーマ（背景は #080808 の深いブラック）
アクセントカラーはオレンジ（#ff7c3d）
フォントは Noto Sans JP と JetBrains Mono
Gutenberg（ブロックエディター）対応

ターゲットはWeb開発に興味を持ち始めた方から中級者くらい。コードを読んでも大丈夫だけど、難しすぎない記事を発信したい、というイメージです。

Claudeへの伝え方

最初に「こういうテーマを作りたい」という要件を箇条書きでまとめてClaudeに渡しました。

・日本語Webエンジニアリングブログ用のWordPress親テーマ
・ダークテーマ（背景 #080808）
・アクセントカラーはオレンジ（#ff7c3d）
・CSS変数は --hw-* プレフィックスで統一
・WordPress 6.x + Gutenberg対応
・カスタム投稿タイプ「学習記録」がほしい

これだけでも十分動くコードを出してくれるんですが、私がいつも意識しているのは**「なぜそうしたいか」も一緒に伝える**こと。

たとえば「学習記録を通常の投稿と分けたい」と伝えると、Claudeは register_post_type() を使ったカスタム投稿タイプとして実装してくれました。単に「投稿タイプを追加して」じゃなくて、目的を伝えることでより適切な実装を提案してくれます。

実際に生成されたもの

今回Claudeと一緒に作ったファイルはこちら。

howto-web/
├── style.css          ← テーマ宣言 + 全スタイル
├── functions.php      ← テーマ設定・ヘルパー関数
├── theme.json         ← Gutenberg設定
├── header.php
├── footer.php
├── front-page.php
├── index.php
├── single.php
├── archive.php
├── page.php
├── 404.php
└── assets/
    ├── css/editor-style.css
    └── js/main.js

標準的なWordPressのテンプレート階層に沿った構成です。

カスタム投稿タイプ「学習記録」

個人的に気に入っているのがこれ。functions.php に以下のような関数が追加されています。

function howtoweb_register_learning_log() {
    register_post_type( 'learning_log', [
        'labels'      => [ 'name' => '学習記録', ... ],
        'public'      => true,
        'has_archive' => true,
        'rewrite'     => [ 'slug' => 'learning' ],
        'menu_icon'   => 'dashicons-welcome-learn-more',
    ] );
}
add_action( 'init', 'howtoweb_register_learning_log' );

これを書くことで、WordPress管理画面の左メニューに「学習記録」という専用の投稿管理メニューが追加されます。通常のブログ記事と学習ログを分けて管理できるので、コンテンツが増えてきたときにすっきり整理できます。

URLも /learning/記事名 という形になるので、SEO的にもカテゴリーが明確になっていい感じです。

カテゴリーバッジの自動カラーリング

記事カードに表示されるカテゴリーバッジも、スラッグに応じて自動で色が変わる仕組みを入れてもらいました。

カテゴリースラッグ	色
`ai`	オレンジ
`code` / `frontend`	シアン
`design`	レッドピンク
`tool`	ゴールド

howtoweb_category_badge() という関数で実装されていて、カテゴリーを追加するたびにCSSをいじらなくていいのが地味に便利です。

GitHubで管理してサーバーにデプロイ

テーマができたら、GitHubで管理してWordPressサーバーに反映する流れを作りました。

手順はシンプル

初回だけ：

# サーバーにSSHで接続してthemesディレクトリへ
cd /var/www/html/wp-content/themes/

# GitHubからclone
git clone https://YOUR-TOKEN@github.com/LilyPumpkin-au/howto-web.git howto-web

2回目以降の更新：

cd /var/www/html/wp-content/themes/howto-web
git pull

ローカルで編集 → GitHubにpush → サーバーで git pull するだけ。FTPでファイルをぽちぽちアップロードする時代とはおさらばです。

Personal Access Tokenの話

GitHubはパスワード認証が廃止されているので、Personal Access Token（PAT） を使います。

GitHubの設定から発行できるんですが、権限は最小限にしておくのがセキュリティ的に◎。今回は「このリポジトリのContentsをRead-onlyで読める」だけの設定にしました。サーバーはGitHubからpullするだけなので、それで十分です。

AIと一緒に開発して気づいたこと

よかったこと

ボイラープレートを書かなくていい

WordPressテーマの style.css のヘッダーコメントとか、functions.php の add_action の書き方とか、毎回調べるような定型コードをサクッと出してくれます。ドキュメントとにらめっこする時間が激減しました。

「なぜそう書くのか」を説明してくれる

コードを出すだけじゃなくて、「この関数はWordPressの初期化タイミングに合わせてinitフックで呼び出します」みたいな説明をつけてくれるので、理解しながら進められます。コピペするだけじゃなく、学びながら作れるのがいいところ。

セキュリティも考慮してくれる

XML-RPCの無効化やnonceチェックなど、「あ、それ考えてなかった」みたいな観点を指摘してくれることがあります。自分だけで作ってると見落としがちなところをカバーしてくれるのはありがたい。

注意したいこと

出力をそのまま信じすぎない

Claudeが出してくれるコードは、基本的に動くものが多いです。でも自分のサーバー環境やWordPressのバージョン、他のプラグインとの兼ね合いで動かないこともあります。必ず自分でテストするのは大前提。

要件が曖昧だと出力もぼんやりする

「いい感じのテーマを作って」みたいな指示だと、一般的なコードしか出てきません。デザインの意図や使い方、対象読者まで伝えると、ぐっと自分好みのものになります。

まとめ

Claude.aiを使ってWordPress親テーマを作ってみた感想は、

「AIはコーディングパートナーとして普通に使える」

の一言に尽きます。0から全部書いてもらうというよりは、方向性を決めて一緒に作っていくイメージ。自分がどんなものを作りたいかを言語化できていれば、それを実装に落とすスピードが格段に上がります。

WordPressテーマを自作したいけど何から始めればいいかわからない、という方はぜひ試してみてください。意外とすんなり動くものができますよ。

このブログでは、こういった実際に手を動かして試したことを発信していきます。「自分もやってみよう」と思えるような記事を増やしていく予定なので、ぜひまた読みに来てください。