第1回:WordPress テーマ開発の始め方 - Local by Flywheel で環境構築からテーマフォルダ理解まで

backham
技術

はじめに

Miyagi です。WordPress 初学者の私が、テーマ開発にチャレンジすることになりました！ 普段は Vue.js や Tailwind、TypeScript を使ったフロントエンド開発をしているのですが、PHP や WordPress についてはほぼ初心者レベル。WordPress のテーマ開発なんて難しそう…と思っていたのですが、Claude に相談しながら「1 日 2 時間 ×10 日間」の短期集中でマスターすることにしました。

この記事は、その 10 日間プロジェクトの初日（Day 1）の記録です。まずは開発環境の構築から始めて、WordPress テーマの基本構造を理解するところまで、実際に手を動かしながら進めていきます。同じように WordPress 初学者の方の参考になれば嬉しいです。

目次

 

概要

先に結論を書いておくと、WordPress テーマ開発は「Local by Flywheel」で、1 時間ほどで開発環境が整いました。 不慣れなので時間がかかりましたが、慣れれば 10 分ほどで開発環境が整いそうです。

Local by Flywheel は無料の WordPress ローカル開発環境ツールで、複雑なサーバー設定なしに WordPress サイトをローカルで動かせます。初心者でも迷わずに環境構築ができるよう、必要な手順を時系列で整理しました。

 

Local by Flywheel のインストール

⏰ 0:00-0:30 | ダウンロードから起動まで

まずは公式サイトからダウンロードしましょう。

Step 1: ダウンロード

  1. 公式サイトにアクセス：https://localwp.com/

  2. 「DOWNLOAD」ボタンをクリック（Mac をお使いの方は Mac 版が自動選択されます） WordPress Day 1 Step 1

    初回ダウンロード時は利用規約の確認画面が表示されます。「I have read and agree to Local’s Terms of Service」にチェックを入れて「I agree」をクリックします。

    WordPress Day 1 Step 2

    次に「Welcome to Local!」画面が表示されます。アカウント作成を促される画面ですが、右上の「×」ボタンでスキップできます。

  3. メールアドレス入力画面はスキップ可能（無料で利用できます）

Step 2: インストール

  1. ダウンロードした local-x.x.x-mac.dmg を開く
  2. Applications フォルダにドラッグ&ドロップ

Step 3: 初回起動 初回は「開発元を確認できません」と表示されることがありますが、右クリック →「開く」で起動できます。

所要時間：約 5 分

 

WordPress サイトの作成

⏰ 0:30-0:45 | サイト作成と環境設定

Local を起動したら、新規サイトを作成していきます。

Step 1: 新規サイト作成

WordPress Day 1 Step 3

  1. 「+ CREATE A NEW SITE」をクリック WordPress Day 1 Step 4

  2. サイト名を入力：demo-wordpress-thema（英数字とハイフンのみ推奨） WordPress Day 1 Step 5

  3. 環境設定で「Preferred」を選択 WordPress Day 1 Step 6

    • PHP、MySQL、Web サーバーが自動で最適化されます
    • 特に理由がなければこれで OK です

Step 2: WordPress 設定

Username: admin
Password: password（後で変更可能）
Email: your-email@example.com

WordPress Day 1 Step 7

「ADD SITE」をクリックすると、2-3 分で WordPress が自動インストールされます。コーヒーでも飲みながら待ちましょー

WordPress Day 1 Step 8

 

管理画面の基本操作

⏰ 0:45-1:00 | WordPress 管理画面を触ってみる

サイトが完成すると、画面に 「ADMIN」（管理画面）と 「OPEN SITE」（サイト表示）のボタンが表示されます。

WordPress Day 1 Step 9

管理画面の探検

  1. 「ADMIN」をクリックしてログイン WordPress Day 1 Step 10 Admin

  2. 左メニューを確認：

    • 投稿：記事管理
    • メディア：画像管理
    • 固定ページ：ページ管理
    • 外観：★ テーマ管理（重要！）
    • 設定：サイト設定

  3. 「外観 → テーマ」をクリック 現在はデフォルトテーマ（Twenty Twenty-Five など）が有効になっています。

  4. 「OPEN SITE」で実際のサイトも確認 まだデフォルトの状態ですが、WordPress サイトが動作していることが確認できます。

WordPress Day 1 Step 10

 

テーマフォルダの構造理解

⏰ 1:00-2:00 | ファイル構造の把握と開発準備

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

  1. Local の画面で 右上の「⋮」→「Reveal in Finder」をクリック
  2. フォルダ構成を確認：
demo-wordpress-thema/
└── app/
    └── public/
        └── wp-content/
            └── themes/        ← ★ここがテーマフォルダ
                ├── twentytwentyfive/
                ├── twentytwentyfour/
                └── (ここに自作テーマを入れる)

Step 2: Cursor でフォルダを開く ターミナルから以下のコマンドを実行するか、Cursor で Themes フォルダを直接開きます：

cd ~/Local\ Sites/demo-wordpress-thema/app/public/wp-content/themes
cursor .

Step 3: 既存テーマの構造を理解 Cursor で twentytwentyfive フォルダを開いて、ファイル構成を見てみましょう：

twentytwentyfive/
├── style.css          ← ★必須：テーマ情報
├── index.php          ← ★必須：メインテンプレート
├── functions.php      ← 機能追加
├── header.php         ← ヘッダー部分
├── footer.php         ← フッター部分
├── single.php         ← 個別投稿ページ
└── ...その他のファイル

重要なポイント：最小テーマに必要なファイルは 2 つだけです。

  1. style.css：テーマ情報（名前、作者など）
  2. index.php：HTML を出力するメインファイル

 

まとめ

Day 1 の 2 時間で、WordPress テーマ開発の基盤となる環境構築が完了しました！

✅ 今日達成したこと

  • Local by Flywheel のインストール完了
  • WordPress サイト（demo-wordpress-thema）作成完了
  • 管理画面の基本操作を理解
  • テーマフォルダの構造把握
  • Cursor での開発環境準備完了

次回は実際に最小テーマを作成して、WordPress にオリジナルテーマを認識させる手順を解説します。今日の環境構築ができていれば、テーマ開発の第一歩は準備万端です。

 

最後まで読んでいただき、ありがとうございました！
この記事が少しでもお役に立てれば嬉しいです。良い開発ライフを！