欲しいプラグインが無かったのでClaude Codeで自作しました

欲しい機能のプラグインが見つからないとき、非エンジニアにとっては「諦める」か「制作会社に外注する」かの二択でした。いまは、そこに「Claude Codeで自分で作る」という3つ目の選択肢があります。

私の場合は、自分のECサイト（BASE）の在庫のある商品だけを、WordPressブログの記事の一番下に自動で並べたいと考えました。ただ、BASEに公式のWordPressプラグインはなく、既存のプラグインにも要件を満たすものがありません。そこでClaude Codeで自作することにしました。

要件を整理した指示文を送ってから、だいたい1時間くらいで完成（大部分はClaude Codeが実装するのを待っている時間）。

この記事では、Claude CodeでWordPressプラグインを作った流れを公開します。Claude Codeに送った指示文も載せていますので、それをコピーして自分の要件に書き換えれば、同じ流れをそのまま試せます。

この記事を読むとわかること

• Claude CodeでWordPressプラグインを自作する手順
• 実際に送った指示文の全文
• 作る前に確認する「自作するかどうか」の判断基準
• APIキーなどの秘密情報とテスト環境の安全な扱い方

この記事の著者

ボーダーヘイズ・ジャパン代表
/ ウェブ解析士 / Udemy講師

上場企業のインハウスマーケターとして営業リード・採用獲得のWeb戦略に従事したのち独立。「Webマーケティングの民主化」をミッションに、中小企業への計測環境構築やAI活用支援を行う。Udemyでは受講生8,000名超、ベストセラーコース多数。

プロフィールを見る

作ったもの：ECサイトの在庫商品を記事下に自動で並べるプラグイン

完成形から先にお見せします。ブログの記事の一番下に「取り扱いルアー」という枠が自動で追加され、ECサイトの在庫のある商品だけが、写真・商品名・価格つきで並びます。名前は「EC在庫レコメンド」と付けました。

私はハンドメイドルアーのECサイトをBASEで運営しており、集客の手段の1つとしてWordPressのブログを設置しています。このブログ記事の末尾に今回作ったウィジェットを設置し、ECへの遷移をさらに増やすという狙いです。

今回、譲れない要件が2つありました。1つは、在庫のある商品だけを出すこと。売り切れの商品を並べても、読んだ人は買えません。もう1つは、記事のカテゴリに合わせて出す商品を変えること。記事の内容と関係のない商品を並べても、押す理由がないからです。BASEとWordPressを連携するプラグインは非公式のものが公開されていますが、前述の2つ条件を満たせるものは見つからなかったため自作することにしました。

作る前の線引き：既存のプラグインがあるならそちらを使う

作り方の前に、自作しないほうがいい場合の話をします。既存のプラグインや公式ツールがあるならそちらを使うほうが安全で確実で、自作は最終手段です。

既存のプラグインは、多くの環境で検証されていて、作者が保守を続けてくれます。自作したものは、その検証も保守も自分でやらなければなりません。そうしたリスクも考えると、既存のプラグインを作る方が楽だし安全です。

こういう機能ができる既存のWordPressプラグインが、公式ディレクトリか（サービス名）公式に無いか調べてください。あるならそちらを使いたいです。まだ作らないでください。調べて報告だけしてください

また、プラグインが増えれば、サイトが重くなったり崩れたりすることもあります。WordPressの表示崩れや設定トラブルの原因をたどると、他のプラグインやテーマとの相性だったということもよく見るケースです。

この辺りのリスクも鑑みて、「それでも実装する価値がある」と判断したら、プラグインの制作に進みましょう。

Claude Codeでプラグインを制作する流れ

送ったあとに私がやったのは、確認と報告だけです。ここから完成までの間に、コードを書く場面は一度も出てきません。

STEP

Claude Codeにプロンプトを送る

Claude Codeに以下のように指示を送ります。

指示文の全文は以下に記載しています。自分の要件に書き換えてClaude Codeに貼れば、同じ流れを再現できます。

Claude Codeに送る指示文（クリックで展開）

WordPressのプラグインを作ってください。プラグイン名は「EC在庫レコメンド」でお願いします。

最初に、WordPressの記事側に表示されるウィジェットと管理画面のモックアップをHTMLで作り、
ブラウザで開いて見せてください。中のデータは仮のもので構いません。
モックアップで私がOKを出してから、実装に進んでください。

## プラグイン概要
BASEのネットショップから在庫のある商品を取ってきて、WordPressの記事の一番下に
自動で並べます。レコメンドウィジェットのような感じです。
プラグインを設置するWordPressテーマは「SWELL」を使用しています。SWELLで問題なく機能するよう作ってください。

## 商品の取り方
- BASEの公式APIを使ってください。ショップのページをスクレイピングしないでください
- 実装の前に、BASEの開発者向け公式ドキュメントを読んで、つなぎ方と必要な手続きを
  調べてください。どのページを見て何が分かったかを先に日本語で説明してから、
  実装に入ってください
- 私はエンジニアリングに詳しくないので、専門用語は噛み砕いて説明してください
- ショップから取るのは商品の情報だけです。それ以外のことができる権限は要求しないでください
- 公開中の商品を全部見て、在庫が1つ以上あるものだけを出してください
- サイズ違いなどのバリエーションがある商品は、バリエーションの在庫の合計で判定してください
- 記事が表示されるたびにBASEに取りに行かないでください。取ってきた商品はサーバー側に
  保存しておいて、1日2回、自動で取り直す形にしてください。管理画面から手動で
  取り直せるボタンも付けてください

## 表示
- 写真・商品名・価格の3つです
- 記事のカテゴリによって、表示する商品を変えたいです。カテゴリと商品の対応は管理画面で
  設定できるようにしてください。カテゴリ設定追加の機能を作り、記事のカテゴリ名とBASEの
  カテゴリID の形式で書けるようにしてください。IDはカンマ区切りで複数指定できるように
  してください
- どのカテゴリにも当てはまらない記事には、在庫のあるものを新しい順に出してください
- 並び順は「新着順」「ランダム」を管理画面で選べるようにしてください
- 記事の本文の一番下に自動で追加してください
- 本文の途中に置きたい場合用に、ショートコードも用意してください
- 表示する商品の総数は管理画面で変えられるようにしてください（初期値4点）
- レスポンシブ対応してください。1行に並べる点数は、PCは4点、スマホは2点にしてください
- 見出しと、その下の一文も管理画面で変えられるようにしてください

## 計測
- ウィジェット内のリンクがクリックされたら、Googleタグマネージャーで拾えるように
  dataLayer にイベントを送ってください。イベント名は bh_shop_click でお願いします
- 一緒に送ってほしいのは、押されたリンクのID、商品のID、リンク先のURL、今いるページのパスです
- リンクのIDは cta- で始まる形にしてください。うちのタグマネージャーが、そのIDでCTAを
  拾う設定になっているので

## 管理画面
- WordPressの「設定」の下にページを作ってください
- BASEのクライアントIDとシークレットは、私が管理画面から自分で入力します。
  コードに直接書かないでください
- シークレットは、保存したあと画面に表示しないでください。変更するときだけ入力する形に
  してください
- BASE側に登録するコールバックURLを、画面に出してコピーできるようにしてください
- 実際の記事にどう出るか、管理画面の中で見本を確認できるようにしてください

作ったら、何をどう実装したかを日本語で説明してください。

最初にモックアップを作ってもらい、OKを出してから実装に進ませる2段構えにしています。

ただ、実際には最初からここまで詳しく書く必要はなくて、「ブログの末尾にECサイトの商品を表示するウィジェットを作りたい」とか、適当な指示でも大丈夫です。

STEP

モックアップを確認する

Claude Codeに指示を送ると、今回は管理画面と記事側ウィジェットの見た目がHTMLで出してくれました。見た目に問題がなければ、OKを出して実装に進んでもらいます。

このように、実装の手間が軽い見た目の部分を先に固めてから機能を実装すると効率的です。

STEP

AIからの逆質問に答える

モックアップとあわせて、AIの側から質問が返ってきます。今回は、設置先のサイト・見出しと説明文の初期値・価格の表示形式の3点でした。こちらが伝え忘れていた前提を、AIの側から確認してくる形です。

この逆質問の質は、AIに渡してある前提情報に依存します。私の場合は、Claude Codeに自分のサイトの情報を共有してあったので、設置先のドメインを推測した上で「設置先のWordPressはどれですか」と確認してきました。何も渡していない状態では、この精度の質問は返ってきません。

STEP

実装を待つ間にBASE側でAPIキーを発行する

実装が走っている間に、BASE Developersでアプリを登録して、クライアントIDとシークレットを発行しておきます。利用権限は「商品情報を見る」だけにチェック。指示文で「商品の情報以外の権限は要求しない」と指定してあるためで、権限を絞っておけば、万一のときの影響も商品情報の読み取りだけに収まります。

外部サービスと連携しない機能なら、この手順は飛ばせます。

STEP

できたプラグインをテスト用WordPressに入れる

生成は15分ほどで終わりました。できあがったフォルダをzipに圧縮して、WordPressの「プラグインのアップロード」から追加し、有効化します。

STEP

設定画面でBASEと連携する

「設定」の下にできた「EC在庫レコメンド」のページを開くと、コールバックURLが表示されているので、コピーしてBASE側に登録します。続いて、クライアントIDとシークレットを入力して保存し、「BASEと連携する」ボタンを押しました。

ここでエラーが出ます。エラーメッセージをそのままAIに貼って調べてもらうと、コールバックURLの形式が適切でなかったという原因を特定して、修正版を返してくれました。修正版を入れ直し、新しくなったコールバックURLをBASE側にも登録し直して再連携すると、今度はBASEの認証画面までは進むものの、認証を許可したあとに「ページが見つかりません」と表示されて、まだ連携できません。この症状もそのまま伝えて、もう一度修正してもらいました。次の修正版で、連携が通りました。

外部連携が不要な機能なら、この手順はありません。

STEP

表示を確認して修正し完成

初回の実装で、見た目上は問題なく出来上がりました。ただ、私の場合はリンクのhref属性にURLが設定されていなかったり、BASEとの連携がうまくいかなかったりと、いくつかの不具合が見つかりましたので、その点を追加で何往復かして完成。

とてもシンプルなプラグインなので、Claude Codeへの最初の指示から、1時間ほどで完成させることができました。

自作するときの安全ルール：秘密情報とテスト環境

動いた、で終わりにしないための線引きが2つあります。秘密情報の扱いと、試す場所です。

1. クライアントIDやシークレットのような秘密情報は、AIに渡さない：会話に貼らず、コードにも書かせず、管理画面から自分で入力します。指示文の段階でそう指定しておけば、AIが秘密情報に触れる場面自体がなくなります。
2. 本番のサイトでいきなり試さないこと：不具合があったとき、本番だとサイトの表示にそのまま影響が出ます。今回、私はテスト用のWordPressで試しました。テスト環境が用意できない場合でも、最低でもバックアップと復元経路を確保してから入れてください。BASEの場合、アプリに登録できるコールバックURLは1つです。テストサイトから本番へ移すときは、URLの再登録（または本番用アプリの再申請）が必要になります。

本番で運用を始める前には、AIに「セキュリティ上の問題がないか」「エラーが出ていないか」の最終確認をしてもらうと安心です。

まとめ：プラグインが無いなら「自分で作る」という選択肢

機能がほしいのにプラグインが無いとき、「諦める」「外注する」以外に、「Claude Codeで自作する」という選択も可能です。

Claude Codeを使えば、コードを1行も書かずに、プラグインのような複数ファイルからなるプログラムも作れます。難しいのはコードではなく、自分の要件を言葉にできるかどうかです。逆に言えば、そこさえ固まってしまえば、作る作業はAIの側で完結します。

「実現したいことがあるのに、ツールがなくて諦めた」という方は、Claude Codeに「こんなことできないかな？」と相談してみることから始めてみてください。

ちなみに、今回のやり取りが比較的スムーズに進んだのは、Claude Codeに自分のサイトの情報をあらかじめ共有してあったからです。Claude Codeの初期設定を同じ形で始めたい方向けに、初期設定スターターキットを配布しています。

Claude Codeの初期設定キットを配布中

この記事で使っているClaude Codeの初期環境について、簡単にセッティングできるキットとミニ講座を用意しました。

以下のフォームからメールアドレスを登録いただくことで、無料で受講することが可能です。

Claude Code講座を見る

また、より詳しい使い方については、以下のUdemyコースでも解説していますので、こちらも参考にされてください。

Claude Codeと一緒に進めるWeb改善