WordPressテーマのコーディングにAIを使う ─ テンプレート階層とループ処理の壁

株式会社ファストコーディングでフロントエンド開発と技術戦略を担当している黒田です。

うちのコーディング代行案件の中で、WordPress関連の比率は依然として高いです。静的HTMLからWordPressテーマへの変換、既存テーマの改修、カスタムフィールドの出力対応。こうした案件でもAIを活用していますが、React/Next.jsの案件と比べて「AIが出すコードをそのまま使える率」が低いと感じています。

理由は、WordPressのテンプレート階層やループ処理が、AIにとって推測しにくい構造だからです。今回は、WordPressテーマのコーディングでAIが何を間違えるのか、どこに人間の判断が必要かを具体的にまとめます。

AIが得意な部分

まず、AIがWordPressテーマのコーディングで問題なく対応できる領域を整理します。

静的HTMLの生成。デザインカンプからHTML/CSSを作る工程はReact案件と同様に得意です。セクション単位で指示すれば、骨格となるHTMLは正確に出てきます。

基本的なテンプレートタグ。the_title()、the_content()、the_permalink()、the_post_thumbnail()といった標準的なテンプレートタグの使い方は正確です。これらはWordPressの公式ドキュメントに明確に記載されており、AIの学習データにも豊富に含まれています。

functions.phpの基本設定。テーマサポートの有効化（add_theme_support()）、メニューの登録（register_nav_menus()）、スタイルシートの読み込み（wp_enqueue_style()）など、定型的なfunctions.phpの記述は正確です。

AIが間違えるパターン

問題はここからです。

パターン1：テンプレート階層の理解不足

WordPressには「テンプレート階層」という仕組みがあり、URLに応じて使用されるテンプレートファイルが決まっています。たとえば、カテゴリーページは以下の優先順位でテンプレートが選択されます。

1. category-{slug}.php
2. category-{id}.php
3. category.php
4. archive.php
5. index.php

AIに「カテゴリーページのテンプレートを作って」と依頼すると、category.phpを作ってくれます。ここまでは正しい。

ところが、「お知らせカテゴリーだけ別のレイアウトにしたい」という要件になると、AIはcategory.phpの中にif文で分岐を書こうとすることがあります。

// AIが出したコード（動くが設計として良くない）
<?php if (is_category('お知らせ')) : ?>
  <!-- お知らせ用レイアウト -->
<?php else : ?>
  <!-- 通常レイアウト -->
<?php endif; ?>

動作はしますが、WordPressの設計思想としてはcategory-news.phpのようにスラッグ別のテンプレートファイルを作るのが正しいアプローチです。テンプレート階層を活用することで、コードの見通しが良くなり、将来的に別カテゴリーの対応が必要になっても影響範囲が小さく済みます。

AIは「動くコード」を優先し、WordPressのテンプレート階層という設計パターンを考慮しない傾向があります。

パターン2：ループ処理の書き方

WordPressのループはいくつかの書き方があり、場面によって使い分ける必要があります。

メインクエリのループ（archive.phpやindex.phpで使う）：

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php endwhile; endif; ?>

サブクエリのループ（特定の投稿を取得して表示する）：

<?php
$args = array(
  'post_type' => 'news',
  'posts_per_page' => 5,
);
$query = new WP_Query($args);
if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post();
    the_title();
  endwhile;
  wp_reset_postdata();
endif;
?>

AIが間違えやすいのは以下の2点です。

wp_reset_postdata()の漏れ。サブクエリの後にwp_reset_postdata()を呼ばないと、その後のメインクエリの投稿データが壊れます。AIはこれを忘れることがあります。ページ内に1つのループしかない場合は問題が表面化しないため、テスト時に見逃しやすい。

query_posts()の使用。AIが古い書き方であるquery_posts()を使うことがあります。query_posts()はメインクエリを書き換えてしまうため、ページネーションの動作がおかしくなるなどの副作用があります。サブクエリにはWP_Queryを使うべきです。WordPress公式でもquery_posts()の使用は推奨されていません。

パターン3：カスタムフィールドの出力

Advanced Custom Fields（ACF）を使っている案件で、AIにカスタムフィールドの出力コードを書かせると、get_field()とthe_field()の使い分けが曖昧になることがあります。

// AIが出したコード（間違いではないが非効率）
<?php if (get_field('company_name')) : ?>
  <p><?php echo get_field('company_name'); ?></p>
<?php endif; ?>

get_field()は値を取得して返します。the_field()は値を取得して直接出力します。上のコードではget_field()を2回呼んでおり、the_field()を使えば1回で済みます。

// 人間が修正したコード
<?php if (get_field('company_name')) : ?>
  <p><?php the_field('company_name'); ?></p>
<?php endif; ?>

パフォーマンスへの影響は小さいですが、ループ内で大量のカスタムフィールドを出力する場合は差が出ます。また、リピーターフィールドやグループフィールドなど、ACFの複雑な構造では、AIがデータの取り出し方を間違えるケースが増えます。

パターン4：ページネーションの実装

アーカイブページのページネーションで、AIはpaginate_links()の基本形を正しく書いてくれますが、カスタムクエリを使った場合のページネーションで引数の指定を間違えることがあります。

特に、WP_Queryでカスタムクエリを使った場合、$query->max_num_pagesをpaginate_links()のtotal引数に渡す必要があります。AIはこの引数を省略し、メインクエリのページ数が使われてしまうケースがありました。

パターン5：子テーマの改修

既存テーマの改修で子テーマを使う場合、「親テーマのどのファイルをオーバーライドするか」の判断がAIには難しい。

お客様から「ヘッダーのロゴを変えたい」と言われたとき、親テーマのheader.phpをそのまま子テーマにコピーしてロゴ部分だけ変更するのか、get_template_part()で分割されたパーツファイルだけをオーバーライドするのか。親テーマの構造を理解した上で、最小限の変更で済むアプローチを選ぶ必要があります。

AIは親テーマのコードを渡さない限り、この判断ができません。

WordPress案件でのAI活用の現実的な分担

これらの経験を踏まえて、うちではWordPress案件でのAI活用を以下のように分担しています。

静的HTML→WordPressテンプレート化の工程で、AIが担えるのは「テンプレートタグの埋め込み」まで。テンプレート階層の設計やループ構造の判断は人間が行う必要があります。

まとめ

WordPressテーマのコーディングにAIを活用した結果を整理します。

AIが得意な領域は、静的HTMLの生成、基本的なテンプレートタグの使用、functions.phpの定型設定です。ここはAIに任せることで確実に工数を削減できます。

一方、AIが苦手な領域は、テンプレート階層の設計判断、ループ処理の適切な使い分け（WP_Query vs メインクエリ）、カスタムフィールドの複雑な出力、既存テーマの改修です。これらはWordPressの設計思想や親テーマの構造を理解した上での判断が必要であり、現状は人間が担う領域です。

WordPress案件でのAI活用は「静的HTMLまではAI、WordPress化は人間が主導」が現時点での現実的な分担だと考えています。

コーディング代行でのWordPressテーマ開発やAI活用について相談したいという方は、株式会社ファストコーディングのお問い合わせフォームからお気軽にご連絡ください。