「CSSはこれです。管理画面に貼り付けてください」。AIに相談しても、最後の操作は人が行うことが多いのではないでしょうか。APICE AI WORKFORCEでは、その先の「AIが実際に作業を行い、成果を確認する」ところまで試しました。
今回、独自の接続機能「APICE WordPress Control」を使い、ChatGPTへの指示だけでWordPressの追加CSSを読み取り、テスト用コメントを保存し、保存結果を確認して、変更前の状態へ復元できました。この記事では、実際の設定画面に沿って、導入と操作の手順、途中で発生したエラーの対処を説明します。
検証日：2026年9月13日。対象：APICE AI WORKFORCE、テーマ：SWELL、独自プラグイン：V0.1.1（接続検証版）。以下の画面名は今回確認した環境に基づきます。アカウントや画面更新によって表示が異なる場合があります。
1．今回できたことと、まだできないこと
今回確認できたのは、接続先サイトの確認、WordPress標準の追加CSSの取得、CSSの変更・保存、保存後の読み直し、変更前バックアップからの復元です。CSS操作の実証にはWPVibeを使用していません。
記事本文・カテゴリー・グローバルメニューの登録内容を変更する機能は、このV0.1.1には含まれていません。また、パソコン全体を自由に操作する接続でもありません。WordPress側に用意した操作を、ChatGPTが呼び出す仕組みです。今回の記事のWordPressへの投稿には、CSS専用の独自接続とは別に既存の投稿用接続を使っています。
「CSSが保存されたこと」と「画面の見た目が意図どおりになったこと」は別の確認です。今回のテストは見た目を変えないコメントの追加・復元で、保存と復元を検証しています。デザイン変更では最後に公開ページも確認します。
2．仕組みを理解する：設定する場所は2か所
WordPress側には、操作を受け付けるプラグインを入れます。ChatGPT側には、そのプラグインへの接続先を登録します。この2つがそろうことで、チャットの指示がWordPressの実際の操作につながります。
MCPは、AIが外部の操作機能を呼び出すための共通の仕組みです。OAuthは、WordPressへのアクセスを許可するための認証の仕組みです。管理者パスワードをチャット本文に貼り付ける必要はありません。認証画面でログインし、対象サイトを確認して許可します。
3．開始前に用意するもの
HTTPSで公開されているWordPressサイト、プラグインを導入できる管理者アカウント、追加CSSを編集する権限、ChatGPTの開発者モードと独自接続の追加画面を用意します。今回のプラグインは通常の単一サイト向けです。マルチサイトやテーマ独自のCSS管理欄は対象としていません。
導入ファイルは「apice-wp-control-0.1.1.zip」です。これは今回開発した独自プラグインであり、WordPress公式プラグイン検索から入れるものではありません。ZIPの入手が導入の前提です。この記事では不特定多数向けのダウンロード提供は行っていません。導入を希望する場合はAPICEへお問い合わせください。
先にWordPressの「外観 → カスタマイズ → 追加CSS」を開き、現在の内容をコピーして手元に保存します。検証中は、別の画面や担当者が同じ追加CSSを同時編集しないようにします。
4．WordPressにプラグインを入れる
① ZIPをPCへ保存します。解凍せず、そのまま使います。
② 対象サイトの管理画面で「プラグイン → 新規プラグインを追加」を開きます。
③ 上部の「プラグインのアップロード」を押し、「ファイルを選択」でZIPを指定します。
④ 「今すぐインストール」を押し、完了後に「プラグインを有効化」を押します。
⑤ 「設定 → APICE WP操作」を開きます。「APICE WP操作 V0.1.1（接続検証版）」が表示されれば、導入を確認できます。Code SnippetsへJSONを取り込む操作とは異なります。
旧版から更新する場合もZIPのアップロードを使い、「アップロードしたもので現在のものを置き換える」を選びます。今回の更新では、先にプラグインを削除したり、全接続をリセットしたりする必要はありませんでした。
5．まず読み取り専用で接続を有効にする
① APICE WP操作の設定画面で、対象サイト名とURLが正しいことを確認します。
② 「ChatGPTからの接続を有効にする」にチェックを入れます。「CSSの書き込みを許可する」は、まだチェックしません。
③ 「設定を保存」を押します。これで、最初は読み取りだけを試せます。
④ 同じ画面を下へ進み、「ChatGPTに入力する内容」にある「サーバーのURL」をコピーします。読者のサイトでは、必ず自分の設定画面に表示されたURLを使ってください。
今回の検証サイトに表示された接続先は次のURLです。これは検証例であり、別サイトの接続設定に流用する値ではありません。
https://godere.blog/apice-wp-control/mcp⑤ 「OAuth設定を開く」「接続情報を開く」のリンクも確認します。英語の項目名とURLが並ぶJSONが表示されます。これは接続に必要な情報です。表示できても、この時点ではChatGPTからの読み取り成功までは確認できていません。
6．ChatGPTの開発者モードを有効にする
① ChatGPTのプロフィールから「設定」を開きます。
② 今回の画面では「セキュリティとログイン」を開き、下へスクロールすると「開発者モード」がありました。これをONにします。
③ 設定を閉じ、左メニューの「プラグイン」を開きます。上部のプラグイン検索欄の右にある丸い「＋」を押します。
④ 「新規プラグイン」の画面が開けば、次の接続登録へ進めます。開発者モードや追加画面が見つからない場合は、ここでアカウントの利用条件・管理者設定を確認してください。この画面が使えることが、本手順の前提です。
7．独自接続を登録する
名前には「APICE WordPress操作」、説明には「WordPressの追加CSSを取得・変更・復元する接続」と入力します。接続は「サーバーのURL」を選び、WordPress側からコピーしたURLを貼り付けます。認証は「OAuth」を選びます。アイコンは任意です。
この実装はクライアントの動的登録（DCR）を使います。クライアントIDとシークレットは自動発行する設計なので、別サービスのIDやシークレットを入力しないでください。
画面に表示される接続の注意事項を読み、理解したうえでチェックし、「作成する」を押します。WordPressの認証・許可画面が表示されたら、対象サイトと要求内容を確認して許可します。ログインを求められた場合は、その認証画面で管理者としてログインします。
作成時にエラーが出た場合は、次の章を確認してください。接続が作成できた場合は「9．操作一覧を読み込む」へ進みます。
8．今回つまずいたOAuthエラーと、サブディレクトリ設置の対処
今回、作成時に「OAuth構成の取得でエラーが発生しました」と表示され、次のメッセージが出ました。
'utf-8' codec can't decode byte 0xa5 in position 488: invalid start byteV0.1.1ではJSONの文字コード指定などを修正しましたが、それだけでは解消しませんでした。その後、認証情報の取得先の一つが404になっていることを確認しました。WordPressがドメイン直下ではなく「/ai-workforce」に置かれている構成でした。
WordPress配下の認証情報は表示できていた一方、次のURLはXserverの「404 File Not Found」でした。
https://xs961951.xsrv.jp/.well-known/oauth-authorization-server/ai-workforceそこで、Xserverのファイルマネージャーで、ドメインの公開フォルダーに認証情報のJSONファイルを配置しました。配置後、同じURLでJSONが表示され、ChatGPT側の接続作成が先へ進みました。ただし、エラー時の応答の生データまでは取得していないため、文字コードエラーの内部原因を断定するものではありません。
今回の配置手順は次のとおりです。この対応は、同じ取得先が404になる構成で確認した方法です。すべてのサイトで必要になる作業ではありません。
① Xserverのファイルマネージャーで、対象ドメインの「public_html」を開きます。今回は「xs961951.xsrv.jp → public_html」です。WordPressが入っている「ai-workforce」フォルダーの中へは入りません。
② public_htmlの中に「.well-known」フォルダー、その中に「oauth-authorization-server」フォルダーを用意します。同名のフォルダーがあれば、その中を開きます。
③ その中へ、今回のサイト用に作成した認証情報ファイル「ai-workforce」を配置します。最後の「ai-workforce」はフォルダーではなく、拡張子なしのファイルです。
public_html/.well-known/oauth-authorization-server/ai-workforce④ ファイルの内容は、対象プラグインの認証情報と一致するJSONにします。issuer、認可先、トークン発行先、登録先のURLが自分のサイトの値であることが必要です。別サイト用のファイルをそのまま置かないでください。今回用意した補助ZIPも検証サイト専用です。
⑤ 上記の公開URLをブラウザで開き、404ではなくJSONが表示されることを確認してから、ChatGPTの接続作成を再試行します。今回、既存の.htaccessの編集は行いませんでした。
この補助ファイルは静的な情報なので、サイトURLや認証先を変更した場合には更新が必要です。エラーを消すために認証を「なし」に変更したり、サイト全体のセキュリティ設定を無効にしたりする対応は、本手順には含みません。
9．操作一覧を読み込み、専用チャットを開く
接続の詳細画面で「まだ利用できるアプリアクションはありません」と表示された場合、今回の環境では「情報」の右にある「更新する」を押すことで操作一覧が表示されました。
アクションに「css_get」が表示され、必要なスコープが「css.read」となっていることを確認します。「出力スキーマ推奨」という表示は今回の画面にもありましたが、その後の読み取り・書き込み・復元は成功しました。
プラグインのページへ戻り、右側の黒い「チャットで試す」を押します。開いたチャットで「APICE WordPress操作」が選択されていることを確認します。今回、設定前から開いていた会話では新しい操作が利用できず、接続を選んだ別チャットで検証しました。
10．最初の操作：サイト情報と追加CSSを読み取る
次の文章をチャットへ送ります。ここでは変更を依頼しません。
APICE WordPress操作のsite_infoとcss_getを実行し、接続先のサイト名・URLと現在の追加CSSを表示してください。変更は行わないでください。WPVibeは使用しないでください。成功すると、サイト名、URL、テーマ、書き込み許可の状態、現在の追加CSSが表示されます。今回の結果はサイト名「APICE AI WORKFORCE」、テーマ「swell」、書き込み許可「無効（読み取りのみ）」でした。サイト名とURLが意図した接続先か、必ず確認します。
11．書き込みを有効にして、変更と復元を試す
① WordPressの「設定 → APICE WP操作」へ戻ります。② 「CSSの書き込みを許可する」にチェックを入れます。③ 「設定を保存」を押します。④ 先ほどの専用チャットへ戻り、次の指示を送ります。URLの部分は自分のサイトへ置き換えてください。
APICE WordPress操作だけを使い、接続先
https://あなたのサイトのURL
でCSSの書き込みと復元をテストしてください。
まずsite_infoとcss_getで、接続先と書き込み許可、現在のCSSを確認してください。
既存のCSSを保持したまま、末尾に次のコメントだけを追加してください。
/* APICE 接続テスト */
保存後にcss_getで追加を確認し、その変更直前のバックアップを使って元に戻してください。最後にcss_getで、CSS全文がテスト前と完全に一致することを確認してください。
各操作の結果を報告してください。WPVibeは使用しないでください。コメントはCSSの見た目に影響しない文章です。このため、画面を変えずに保存と復元を試せます。ChatGPT側で操作確認が出た場合は、接続先と変更内容を読んでから進めます。
12．実証結果：追加も復元も成功
検証チャットの実行結果では、site_infoで対象サイトと書き込み許可を確認し、css_getで元のCSSを取得した後、css_replaceでコメントを追加できました。追加後のcss_getでは「元のCSS＋指定コメント」と完全に一致しました。
続いてcss_restoreで追加直前のバックアップから復元し、最後のcss_getでCSS全文とSHA256の両方がテスト前と一致したと報告されました。SHA256は、内容が同じか比較するための値です。今回の記録では、本文の比較とこの値の比較の両方で復元を確認しています。
これにより、「現状を読む → 変更する → 保存する → 読み直す → 元に戻す → 元どおりか確認する」という一連の操作を、独自接続で実行できたことが確認できました。
13．日常の依頼は、対象と確認方法をセットで伝える
実際の修正では、何を変更するかに加え、既存内容の保持と保存後の確認を伝えると、作業範囲が明確になります。例えば、次のように依頼します。
APICE WordPress操作を使って、指定サイトの追加CSSを確認してください。グローバルメニューの説明文を非表示にするCSSを、既存の他の設定を保持して反映してください。対象のHTMLやクラス名が不明な場合は推測で変更せず、不足情報を伝えてください。保存後はCSSを読み直し、変更内容と復元に使うバックアップを報告してください。今回のSWELLサイトでは、メニュー説明文の要素を確認した結果、次のCSSで非表示にできました。すでに設定済みのため、接続試験では重複追加していません。
.c-smallNavTitle.desc {
display: none !important;
}これは説明文のデータを削除する処理ではなく、該当クラスの表示を隠す処理です。同じクラスを使う他の箇所にも影響する可能性があるため、別サイトへ無条件に流用せず、対象ページやスマートフォン表示も確認します。
14．困ったときの確認順序と停止方法
読み取りはできるが書き込めない場合は、まずWordPress側の書き込み許可を確認します。取得後にCSSが変わったというエラーでは、最新のCSSを読み直してから変更内容を再確認します。古い取得結果を使って上書きを続けないようにします。
保存できたのに見た目が変わらない場合は、対象のCSSクラス、適用範囲、優先順位、キャッシュを確認します。今回の独自接続だけで、すべての画面表示の検査まで自動で完結するわけではありません。
読み取りだけの運用に戻したい場合は、「CSSの書き込みを許可する」のチェックを外して保存します。接続自体を停止する場合は「ChatGPTからの接続を有効にする」をOFFにします。「全接続をリセットして停止」は、登録を作り直す場合の操作です。通常のCSS修正のたびに押す必要はありません。
プラグインを無効化しても、変更済みCSSが自動で元に戻るわけではありません。元に戻す必要がある場合は、先に復元を行って結果を確認してください。
15．AI WORKFORCEとしての成果と、次の拡張
今回の成果は、AIが回答文を作るだけでなく、許可された範囲でWordPressのデータを実際に変更し、結果を検証できたことです。最初から全操作を開放するのではなく、追加CSSという対象を決めて、読み取りから復元まで確認しました。
今後、記事・カテゴリー・メニューなどを扱う場合も、それぞれに取得・変更・確認の機能を追加する必要があります。CSSで成功したからといって、現在のプラグインがWordPressの全項目を変更できるわけではありません。この実証を出発点に、実務で必要な操作を順次広げていきます。
コメント