Claude CodeでWordPressをカスタマイズする｜子テーマ改修を実演

# 例：wp-env（WordPress公式のローカル環境）
npm -g install @wordpress/env
mkdir my-wp && cd my-wp
npx wp-env start
# → http://localhost:8888 で起動する

wp-content/themes/
├── parent-theme/          # 親テーマ（触らない）
└── parent-theme-child/    # ここで作業する
    ├── style.css
    └── functions.php

cd wp-content/themes/parent-theme-child
git init
git add .
git commit -m "改修前の状態"

このプロジェクトはWordPressの子テーマです。前提を共有します。

環境：
- WordPress 6.7 / PHP 8.2
- 親テーマ：（テーマ名）
- 作業対象：wp-content/themes/（テーマ名）-child のみ
- 本番反映：私が手動で行う。あなたは本番に触らない

ルール：
- 親テーマのファイルは編集しない
- functions.php を編集する前に、必ず現在の内容を確認する
- 変更は1つずつ。複数の機能を同時に追加しない
- PHPの記述後は php -l で構文チェックを行う

まず、現在の子テーマの構成を確認して報告してください。

記事ページの本文下に「関連記事」を表示する機能を追加してください。

要件：
- 同じカテゴリの記事を、公開日の新しい順に3件
- 現在表示中の記事は除外する
- 該当がない場合は何も表示しない
- アイキャッチ画像・タイトル・公開日を出す
- 出力はテンプレートパーツに分け、functions.phpにはフックだけ書く
- CSSは子テーマのstyle.cssに追記する

制約：
- プラグインは使わない
- クエリは1回に収める
- 表示位置は the_content フィルタの末尾

<?php
/**
 * 記事下に関連記事を差し込む
 */
add_filter( 'the_content', function ( $content ) {
	// 単一記事ページの本文のみを対象にする
	if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
		return $content;
	}

	$categories = get_the_category();
	if ( empty( $categories ) ) {
		return $content;
	}

	$related = new WP_Query( [
		'category__in'        => wp_list_pluck( $categories, 'term_id' ),
		'post__not_in'        => [ get_the_ID() ],
		'posts_per_page'      => 3,
		'orderby'             => 'date',
		'order'               => 'DESC',
		'ignore_sticky_posts' => true,
		'no_found_rows'       => true,   // ページ送り不要なので高速化
	] );

	if ( ! $related->have_posts() ) {
		return $content;
	}

	ob_start();
	include get_stylesheet_directory() . '/parts/related-posts.php';
	$html = ob_get_clean();

	wp_reset_postdata();

	return $content . $html;
} );

<?php
/**
 * 関連記事の表示部分
 * @var WP_Query $related
 */
?>
<aside class="related-posts" aria-labelledby="related-heading">
	<h2 id="related-heading" class="related-posts__title">関連記事</h2>
	<ul class="related-posts__list">
		<?php while ( $related->have_posts() ) : $related->the_post(); ?>
			<li class="related-posts__item">
				<a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ) : ?>
						<?php the_post_thumbnail( 'medium', [
							'class'   => 'related-posts__img',
							'loading' => 'lazy',
						] ); ?>
					<?php endif; ?>
					<span class="related-posts__name"><?php the_title(); ?></span>
					<time datetime="<?php echo esc_attr( get_the_date( 'c' ) ); ?>">
						<?php echo esc_html( get_the_date() ); ?>
					</time>
				</a>
			</li>
		<?php endwhile; ?>
	</ul>
</aside>

このコードを追加する前に、次を確認して報告してください。

1. 既存のfunctions.phpに the_content フィルタを使っている箇所はあるか
2. あるなら、実行順序で競合しないか
3. 追加するCSSのクラス名が、既存のスタイルと衝突しないか
4. この変更で影響を受けるページの種類（記事・固定ページ・一覧など）
5. 元に戻す手順

確認結果を先に見せてください。コードの追加はその後で判断します。

<?php
/** エラー内容をログに出す（本番では表示しない） */
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

# 構文エラーの有無を確認する
php -l wp-content/themes/parent-theme-child/functions.php

# エラーログの末尾を見る
tail -n 30 wp-content/debug.log

以下のエラーが出ました。原因と修正方法を教えてください。

【エラーログ】
（debug.log の該当部分を貼る）

【直前に行った変更】
（追加したコードを貼る）

条件：
- 推測が複数ある場合は、確認方法とセットで挙げてください
- 修正は最小限の変更に留めてください

1. 本番のバックアップを取る（ファイル＋データベース）
2. 変更したファイルだけを転送する（functions.php / parts/ / style.css）
3. 表示を確認する（記事・固定ページ・一覧・404）
4. エラーログを確認する
5. 問題があれば、バックアップから該当ファイルを戻す

# 機密情報が含まれていないかチェックしてから貼る
grep -iE "password|api_key|secret|token|@.*\.(com|jp)" debug.log | head

<?php
// 危険：エスケープなしで出力している
echo '<a href="' . $url . '">' . $title . '</a>';

// 安全：用途に応じたエスケープを通す
printf(
	'<a href="%s">%s</a>',
	esc_url( $url ),
	esc_html( $title )
);

管理画面の投稿一覧に「文字数」の列を追加してください。

要件：
- 本文からタグを除いた文字数を表示する
- タイトルの右隣に配置する
- 並べ替えは不要
- 表示は投稿（post）のみ。固定ページには出さない

制約：
- 一覧の表示速度を落とさないこと
- 既存の列を削除しない

<?php
// 列を追加する
add_filter( 'manage_posts_columns', function ( $columns ) {
	$new = [];
	foreach ( $columns as $key => $label ) {
		$new[ $key ] = $label;
		if ( 'title' === $key ) {
			$new['char_count'] = '文字数';
		}
	}
	return $new;
} );

// 値を出力する
add_action( 'manage_posts_custom_column', function ( $column, $post_id ) {
	if ( 'char_count' !== $column ) {
		return;
	}
	$content = get_post_field( 'post_content', $post_id );
	$text    = wp_strip_all_tags( strip_shortcodes( $content ) );
	echo esc_html( number_format( mb_strlen( $text ) ) );
}, 10, 2 );

「お知らせ」カテゴリの一覧ページだけ、表示件数を20件にしてください。
他のカテゴリと検索結果は既存のまま（10件）にします。

制約：
- pre_get_posts を使う
- 管理画面には影響させない
- メインクエリのみを対象にする

<?php
add_action( 'pre_get_posts', function ( $query ) {
	// 管理画面・サブクエリは対象外
	if ( is_admin() || ! $query->is_main_query() ) {
		return;
	}

	if ( $query->is_category( 'news' ) ) {
		$query->set( 'posts_per_page', 20 );
	}
} );

【目的】何のためにやるか（読者・運用上の理由）
【要件】実現したい挙動を箇条書きで
【制約】使ってよい手段・使ってはいけない手段
【対象】編集してよいファイル
【確認】完了時に何を確認すればよいか

この子テーマのfunctions.phpを読んで、次を表にしてください。

| 追加している機能 | 使っているフック | 影響範囲 | 削除した場合の影響 |

条件：
- 推測が入る場合は「要確認」と明記する
- 明らかに不要と判断できるものがあれば理由とともに挙げる

# style.cssのクラス名が、テンプレート内で使われているか調べる
grep -oE '^\.[a-zA-Z0-9_-]+' style.css | sort -u | while read cls; do
  name="${cls#.}"
  hits=$(grep -rl "$name" ../ --include="*.php" --include="*.html" | wc -l)
  [ "$hits" -eq 0 ] && echo "未使用の可能性: $cls"
done

このテーマのテンプレートを読んで、表示速度に影響しそうな箇所を挙げてください。

観点：
1. ループ内でクエリを発行している箇所
2. 毎回外部APIを呼んでいる箇所
3. 画像のサイズ指定が無い箇所
4. 条件分岐なしで全ページに読み込んでいるファイル

出力：該当箇所（ファイル名と行番号）→ 問題 → 改善の方向性

# 機能単位でコミットする
git add functions.php parts/related-posts.php style.css
git commit -m "記事下に関連記事を追加（同カテゴリ3件・the_contentフィルタ）"

# 本番反映した時点にタグを打つ
git tag -a deploy-20260901 -m "本番反映：関連記事機能"

# 問題があれば直前の状態へ戻す
git revert HEAD