STEP 1: 環境準備 - WordPressオリジナルテーマ作成

なぜローカル環境が必要なのか？

WordPressテーマの開発では、本番サーバーで直接作業するのではなく、自分のパソコン上にWordPress環境を構築する「ローカル開発環境」を使うのが一般的です。

💡 ローカル環境のメリット

インターネット接続不要で開発できる
失敗してもサイトに影響がない
何度でもテスト・やり直しができる
表示速度が速く、作業効率が高い
レンタルサーバー代が不要

ローカル開発環境の選び方

代表的なローカル開発環境を比較して、自分に合ったツールを選びましょう。

ツール名	難易度	おすすめ対象	特徴
Local by Flywheel	⭐ 簡単	初心者	クリック操作だけで環境構築。最も簡単で初心者向け。
XAMPP	⭐⭐ 普通	初心者〜中級者	Apache、MySQL、PHPを一括インストール。定番ツール。
MAMP	⭐⭐ 普通	Mac ユーザー	Mac向けの定番。操作がシンプルで使いやすい。
Docker	⭐⭐⭐ 難しい	中級者〜上級者	複数プロジェクト管理に便利。本番環境に近い設定が可能。

✅ 初めての方へのおすすめ

Local by Flywheelを強くおすすめします。インストールから環境構築まで10分程度で完了し、難しい設定は一切不要です。無料で使えて、WindowsとMacの両方に対応しています。

Local by Flywheelのインストール手順

最も簡単なLocal by Flywheelを使った環境構築方法を解説します。

公式サイトからダウンロード
Local by Flywheel公式サイト（https://localwp.com/）にアクセスし、「FREE DOWNLOAD」ボタンをクリック。OSを選択してダウンロードします。
インストーラーを実行
ダウンロードしたファイルを開き、画面の指示に従ってインストールを進めます。特別な設定は不要で、すべてデフォルトのままで問題ありません。
新しいサイトを作成
Localを起動し、「+ Create a new site」ボタンをクリック。サイト名（例: mytheme-dev）を入力します。
環境設定を選択
「Preferred」を選択すると、推奨設定で自動構築されます。PHPバージョンやWebサーバーを指定したい場合は「Custom」を選択します。
WordPress設定
管理者ユーザー名、パスワード、メールアドレスを設定します。ローカル環境なので簡単なもので構いません（例: admin / admin）。
サイトの起動
「ADD SITE」をクリックすると、自動的にWordPressがインストールされます。数分で環境構築が完了します。

✅ 環境構築完了！

「ADMIN」ボタンをクリックすると管理画面、「OPEN SITE」をクリックするとサイトが表示されます。これでWordPressテーマ開発の準備が整いました！

開発に必要なツール

1. コードエディタ（必須）

テーマファイルを編集するためのエディタが必要です。

💻 Visual Studio Code（VS Code）

最もおすすめのエディタです。無料で高機能、WordPress開発に便利な拡張機能が豊富です。

公式サイト: https://code.visualstudio.com/
おすすめ拡張機能:
- PHP Intelephense - PHP補完機能
- WordPress Snippets - WordPress関数のスニペット
- Prettier - コード整形
- Auto Rename Tag - HTMLタグの自動リネーム
- Live Server - ブラウザ自動更新

2. FTPクライアント（推奨）

本番環境へのアップロードに使用します。FileZillaやCyberduckが無料で使いやすくおすすめです。

3. ブラウザ開発者ツール（必須）

ChromeまたはFirefoxのデベロッパーツールを使って、CSSの確認やデバッグを行います。ブラウザに標準搭載されているので、別途インストールは不要です。

⚠️ ブラウザ開発者ツールの開き方

Windows: F12キーまたは Ctrl + Shift + I
Mac: Command + Option + I
右クリック → 「検証」または「要素を調査」

VS Codeの初期設定

VS Codeをインストールしたら、WordPress開発に便利な設定を行いましょう。

拡張機能のインストール方法

拡張機能パネルを開く
左サイドバーの四角いアイコン（Extensions）をクリックするか、Ctrl+Shift+X（Mac: Command+Shift+X）を押します。
拡張機能を検索
検索ボックスに「PHP Intelephense」と入力し、表示された拡張機能の「Install」ボタンをクリックします。
他の拡張機能も同様にインストール
WordPress Snippets、Prettier、Auto Rename Tagなども同じ手順でインストールします。

設定ファイルのカスタマイズ

VS Codeの設定（settings.json）に以下を追加すると、より快適に開発できます。

{
    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "emmet.includeLanguages": {
        "php": "html"
    }
}

テーマフォルダの場所を確認

作成したテーマファイルを保存する場所を確認しましょう。

📁 テーマフォルダのパス

WordPressのテーマは以下のディレクトリに保存されます：

wp-content/themes/あなたのテーマ名/

Localの場合:

Localの管理画面で「Go to site folder」をクリックすると、サイトのフォルダが開きます。その中の app/public/wp-content/themes/ がテーマフォルダです。

✅ VS Codeでフォルダを開く

VS Codeで「ファイル」→「フォルダーを開く」から、themesフォルダまたはサイト全体のフォルダを開くと、ファイルの編集がしやすくなります。

動作確認

環境構築が正しくできているか確認しましょう。

WordPressにログイン
Localで「ADMIN」ボタンをクリックし、設定したユーザー名とパスワードでログインします。
外観メニューを開く
管理画面の左メニューから「外観」→「テーマ」をクリックします。
デフォルトテーマを確認
Twenty Twenty-Fourなどのデフォルトテーマがインストールされていることを確認します。これらが表示されていれば、環境は正しく動作しています。

まとめ

STEP 1では、以下の準備が完了しました：

✅ ローカル開発環境の構築（Local by Flywheel）
✅ コードエディタのインストールと設定（VS Code）
✅ 必要なツールの準備
✅ テーマフォルダの場所の確認
✅ WordPress管理画面へのアクセス確認

🎉 次のステップへ！

環境準備が完了しました！次のSTEP 2では、実際に最小構成のテーマファイルを作成します。わずか2つのファイルでWordPressテーマが動作する仕組みを学びましょう。

🏗️ 環境準備