ローカルでWordPress環境を作る(VScode&Mac)

選択肢
🔧 MAMP + WordPress + VSCode セットアップ手順（Mac）
VSCode で sanitize_text_field() や ABSPATH, wp_mkdir_p() が「未定義」になる理由
1. 解決策
2. 補完をもっと快適にする方法
ローカルでAPIをテストする時
APIエンドポイントを叩いても404エラーが出る時
1. 🔍 簡易チェック方法
ローカル環境のMAMP + WordPressのREST APIから外部ネットワークのAPIを叩いても問題なし

選択肢

① ローカル環境を用意する

Macなら以下のどれでもOKです：

Local (by Flywheel)：GUI操作で簡単、初心者向け
MAMP：王道、Apache + MySQL + PHP をまとめて提供
Docker：慣れてきたら便利、再現性が高い

👉 まずは「Local」か「MAMP」をおすすめします。

② WordPressをセットアップする

例えば MAMP の場合：

WordPress公式から zip をダウンロード
/Applications/MAMP/htdocs/wordpress/ に展開
ブラウザで http://localhost:8888/wordpress/ にアクセス → インストール画面
データベースは MAMP の phpMyAdmin で新規作成し、インストール時に指定

③ VSCodeで開発する

VSCode で htdocs/wordpress/wp-content/plugins/your-plugin/ を開く
PHP拡張（Intelephense, Debug など）は既に入っているので補完や構文チェックが効く
php -S localhost:8000 などでも動かせるのでシンプルに試したいときにも便利

⑤ デバッグ・開発を快適にする工夫

Git管理 → バージョン管理して「壊したら戻す」が楽
ステージング環境（Xserverの機能） → 本番反映前に安全確認できる
VSCode Remote – SSH / SFTP → 必要なら本番も直接編集可能

💡まとめ

Macに WordPress をローカルインストール
VSCodeで plugins/your-plugin/ を編集
ローカルでAPIエンドポイントをテスト
問題なければ zip で本番にアップロード or SFTPで反映

🔧 MAMP + WordPress + VSCode セットアップ手順（Mac）

① MAMP をインストール

公式サイトから MAMP をダウンロード
Applications フォルダに入れる
起動して「Start Servers」を押すと Apache と MySQL が立ち上がる
- デフォルトでは http://localhost:8888/ が動作確認用のURL

② WordPress を配置

WordPress 日本語版をダウンロード
解凍して wordpress フォルダを /Applications/MAMP/htdocs/ にコピー
- 例: /Applications/MAMP/htdocs/wordpress/
ブラウザで http://localhost:8888/wordpress/ にアクセスするとインストール画面が出る
- ローカル（MAMP）に入れる WordPress は Xserver 上の本番環境とは完全に別物 なので、データベース名やユーザー名・パスワードは 新しく作成してOK です。
- おすすめの設定（MAMP標準）
- データベース名: wordpress
- ユーザー名: root
- パスワード: root
- ホスト: localhost
- （この設定は MAMP デフォルトなのでハマりにくいです）

③ データベースを作成

MAMP の「WebStart page」を開く → Tools > phpMyAdmin
wordpress という名前のデータベースを作成（照合順序は utf8mb4_general_ci）
インストール画面で以下を入力
- データベース名: wordpress
- ユーザー名: root
- パスワード: root
- ホスト: localhost
- プレフィックス: wp_

👉 これで WordPress のセットアップが完了します。

④ VSCode で開発環境を整える

VSCode で /Applications/MAMP/htdocs/wordpress/wp-content/plugins/your-plugin/ を開く
拡張機能（すでに入れてある）
- PHP Intelephense（補完）
- PHP Debug（ブレークポイント）
プラグイン用のディレクトリを作成

wp-content/plugins/my-custom-api/
   ├── my-custom-api.php
   └── includes/...

wp-content/plugins/my-custom-api/

├── my-custom-api.php

└── includes/...

みたいな形にして整理していくと管理しやすいです。

⑤ デバッグ実行（任意）

MAMP の PHP に Xdebug が同梱されているので有効化すればデバッグ可能です。

/Applications/MAMP/bin/php/phpX.X.X/conf/php.ini を開く
xdebug.mode=debug を追記 (すでにdebugは含まれていて何もしなかった気がする)
VSCode の .vscode/launch.json を作成

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/Applications/MAMP/htdocs/wordpress": "${workspaceFolder}"
      }
    }
  ]
}

{

"version": "0.2.0",

"configurations": [

{

"name": "Listen for Xdebug",

"type": "php",

"request": "launch",

"port": 9003,

"pathMappings": {

"/Applications/MAMP/htdocs/wordpress": "${workspaceFolder}"

}

]

}

⑥ 本番（Xserver）へ反映

方法1: zipでまとめてアップロード
→ WordPress 管理画面の「プラグイン → 新規追加 → アップロード」
方法2: SFTP/SSHでアップロード
→ VSCodeの SFTP 拡張を使って wp-content/plugins/ へ送る

💡まとめ

MAMP を入れると Mac 上に簡単に WordPress が立ち上がる
VSCode で plugins/your-plugin/ を編集すれば API 開発が楽になる
本番に反映する時は zip でアップロード or SFTP

VSCode で sanitize_text_field() や ABSPATH, wp_mkdir_p() が「未定義」になる理由

これは VSCode（正確には PHP IntelliSense）が WordPress のコアファイルを参照できていない からです。
実際には MAMP 上の WordPress 本体には存在していますが、VSCode の補完や型チェックがそれを知らない状態になっています。

sanitize_text_field() → wp-includes/formatting.php に定義
ABSPATH → wp-load.php 内で定義される定数
wp_mkdir_p() → wp-includes/functions.php に定義

解決策

✅ WordPress のコアファイルを VSCode に認識させる
MAMP に WordPress をインストール済みなら、そのディレクトリを プロジェクトとして VSCode で開く のが一番シンプルです。

/Applications/MAMP/htdocs/my-wp-site/

1	/Applications/MAMP/htdocs/my-wp-site/

を VSCode で開く。
こうすると補完が効くようになります。

補完をもっと快適にする方法

VSCode 拡張機能 PHP Intelephense を入れる
.vscode/settings.json に WordPress のパスを指定しておく

{
  "intelephense.environment.includePaths": [
    "/Applications/MAMP/htdocs/my-wp-site/wp-includes",
    "/Applications/MAMP/htdocs/my-wp-site/wp-admin"
  ]
}

{

"intelephense.environment.includePaths": [

"/Applications/MAMP/htdocs/my-wp-site/wp-includes",

"/Applications/MAMP/htdocs/my-wp-site/wp-admin"

]

}

ローカルでAPIをテストする時

プラグインを有効化

ブラウザでローカル WordPress にアクセス
http://localhost:8888/wordpress/wp-admin/plugins.php
「プラグインを有効化」
有効化エラーが出る場合は wp-config.php の WP_DEBUG を true にすると原因がわかります：

define('WP_DEBUG', true);

1	define('WP_DEBUG', true);

APIエンドポイントの確認

自作APIの場合、多くは REST API 形式で登録しているはず：

register_rest_route('myplugin/v1', '/test', [
    'methods' => 'GET',
    'callback' => 'myplugin_test_callback'
]);

register_rest_route('myplugin/v1', '/test', [

'methods' => 'GET',

'callback' => 'myplugin_test_callback'

]);

この場合、ブラウザや Postman でアクセス：

http://localhost:8888/wordpress/wp-json/myplugin/v1/test

1	http://localhost:8888/wordpress/wp-json/myplugin/v1/test

テスト方法

A. ブラウザで確認

GETリクエストなら直接URLにアクセスして JSON 返ってくるか確認

B. Postman / curl

POSTやヘッダー付きのリクエストも確認可能

curl -X GET http://localhost:8888/wordpress/wp-json/myplugin/v1/test

1	curl -X GET http://localhost:8888/wordpress/wp-json/myplugin/v1/test

iOSアプリから呼ぶ場合

http://192.168.x.x:8888/wordpress/wp-json/...
- 192.168.x.x は Mac のローカルIP
- 実機やシミュレーターからアクセス可能
iOS側でエンドポイントをローカルURLに切り替えてデバッグ

💡 ポイント

本番コードをそのままコピーしても動作しますが、DB接続情報やパスの定数がローカル用に変更されていることを確認
ローカルで動作確認 → 問題なければ本番に反映、が安全です

APIエンドポイントを叩いても404エラーが出る時

./MAMP/conf/apache/httpd.conf ファイルの LoadModule rewrite_module modules/mod_rewrite.so この記述がMAMPのアップデートによりコメントアウトされているのが原因

🔍 簡易チェック方法

1. htaccess-test.php を WordPress のルートに置く

<?php
// htaccess-test.php
echo "直接アクセスできています（.htaccess 経由してない）";

<?php

// htaccess-test.php

echo "直接アクセスできています（.htaccess 経由してない）";

2. .htaccess にリライトルールを追加

WordPress ルートの .htaccess に、RewriteRule を 1行入れます。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On

# ▼これを追加
RewriteRule ^htaccess-check$ htaccess-test.php [L]

RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

# BEGIN WordPress

RewriteEngine On

# ▼これを追加

RewriteRule ^htaccess-check$ htaccess-test.php [L]

RewriteBase /

RewriteRule ^index\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.php [L]

</IfModule>

# END WordPress

3. テスト実行

ブラウザで次を開きます：

http://localhost:8888/wordpress/htaccess-check

1	http://localhost:8888/wordpress/htaccess-check

✅ 表示されれば成功
「直接アクセスできています（.htaccess 経由してない）」と出たら .htaccess が機能している証拠。

❌ 404や違う挙動ならNG
→ mod_rewrite がオフ、もしくは .htaccess が無視されている状態です。

💡 応用

このルールはチェックが終わったらコメントアウトしてOKです。
定期的に「環境変えた後に htaccess-check を叩いて動作確認」すれば、不具合にすぐ気づけます。

ローカル環境のMAMP + WordPressのREST APIから外部ネットワークのAPIを叩いても問題なし

✅ 可能な理由

MAMP の PHP は Mac の PHP と同じように動いているので、wp_remote_get() や wp_remote_post()、file_get_contents()、cURL などは普通に外部リクエストを送信できます。
WordPress の HTTP API (wp_remote_get() など) は内部的に cURL を使うので、外部への通信もOK。

⚠️ 注意点

Macのファイアウォールやネットワーク設定
- 特定のポートや外部アクセスが制限されていると通信できません。
- ただし通常の80,443（HTTP/HTTPS）なら大丈夫です。
SSL証明書の検証
- https:// の API を叩くときに「SSL 証明書の検証エラー」が出る場合があります。
- そのときは wp_remote_get() に以下のようにオプションを付けて一時的に回避できます：

$response = wp_remote_get( 'https://api.example.com/data', [
    'sslverify' => false,
]);

$response = wp_remote_get( 'https://api.example.com/data', [

'sslverify' => false,

]);

ただし本番では sslverify => true が推奨です。

MAMP の php.ini の制約

allow_url_fopen が OFF だと file_get_contents("https://...") が失敗します。
cURL (wp_remote_get()) なら問題なし。

APIキーや認証情報

ローカル環境でも当然必要になります。
本番と同じキーを使うと「APIリクエスト数の制限」に達するリスクがあるので、可能なら テスト用のキー を発行するのがおすすめ。

💡 まとめ

技術的にはOK（外部API叩ける）
SSL証明書やMAMPの設定だけ注意
APIキーや利用制限は本番と分けた方が安心