アルアカ - Arcadia Academia

🎯 この記事でわかること

• WordPressローカル環境「Local」のセットアップ
• テーマ・プラグインをGitで管理しつつ開発する方法
• シンボリックリンクを使った効率的な開発ワークフロー

WordPressのテーマやプラグインを開発する際、本番環境で直接作業するのは非常に危険です。予期せぬエラーやバグが発生した場合、サイト全体がダウンしてしまうリスクがあります。そこで重要になるのが「ローカル開発環境」です。ローカル環境とは、自分のPC内に本番環境と同じような開発環境を構築し、インターネットに接続せずに開発やテストを行える環境のことです。

ローカル開発環境を利用する主なメリットは以下の通りです。

• 安全性: 本番環境に影響を与えることなく、自由に開発やテストが行えます。
• 効率性: インターネット接続が不要なため、どこでも開発を進めることができます。また、ファイルの保存や変更が即座に反映されるため、開発サイクルが高速化します。
• 再現性: 複数の開発者が同じ環境を簡単に構築できるため、開発環境に起因する問題を減らすことができます。
• バージョン管理: Gitなどのバージョン管理システムと組み合わせることで、変更履歴の管理やチーム開発が容易になります。

数あるローカル開発環境ツールの中でも、本記事ではWordPressに特化した「Local」に焦点を当て、その導入から効率的な開発ワークフローまでを詳しく解説します。

※本記事では、IT用語のローカルと開発ツールの「Local」についてはカタカナ表記と英語表記で区別しています

Local (旧: Local by Flywheel) は、WordPress専用のローカル開発環境ツールです。直感的なGUI（グラフィカルユーザーインターフェース）が特徴で、数クリックでWordPressサイトを立ち上げることができます。初心者の方でも簡単に扱える一方で、PHPバージョンやWebサーバーの選択、SSHアクセスなど、エンジニアが必要とする高度な機能も十分に備えています。

• 簡単なセットアップ: WordPressサイトの作成が非常に簡単で、データベースやWebサーバーの設定も自動で行われます。
• 柔軟な環境設定: PHPのバージョン、Webサーバー（ApacheまたはNginx）、MySQLのバージョンなどをサイトごとに選択・変更できます。
• SSLサポート: ローカル環境でもSSL（HTTPS）を有効にできるため、本番環境に近い形でテストが可能です。
• Live Links: 一時的にローカルサイトを公開し、クライアントやチームメンバーと共有できる機能です。
• Blueprint: サイトのテンプレートを作成し、再利用することで、新しいサイトのセットアップ時間を短縮できます。
• SSH/WP-CLIアクセス: コマンドラインからの操作も可能で、開発の効率をさらに高めることができます。

まず、Localの公式サイト（https://localwp.com/）にアクセスし、お使いのOS（macOS, Windows, Linux）に合ったバージョンをダウンロードします。ダウンロードが完了したら、インストーラーの指示に従ってインストールを進めてください。特別な設定は不要で、数分で完了します。

Localのインストールが完了したら、アプリケーションを起動します。初回起動時には、LocalがWordPressサイトを管理するための設定を行います。その後、以下の手順で新しいWordPressサイトを作成します。

1. Localのサイドバーにある「+」ボタンをクリックするか、「Create a new site」を選択します。
2. 「Site name」に任意のサイト名を入力します。この名前はLocal内でサイトを識別するために使用されます。
3. 「Advanced Options」をクリックすると、サイトのドメインやパスを変更できます。特に変更がなければデフォルトのままで問題ありません。
4. 「Continue」をクリックします。
5. 「Environment」設定画面で、使用するPHPバージョン、Webサーバー（ApacheまたはNginx）、MySQLのバージョンを選択します。特別な要件がなければ、「Preferred」を選択することをお勧めします。これはLocalが推奨する安定した環境設定です。開発要件に応じて、特定のバージョンを選択することも可能です。
   • PHPバージョン: WordPressの動作に必要なPHPのバージョンを選択します。新しいWordPressのバージョンは新しいPHPバージョンを推奨しています。
   • Webサーバー: ApacheまたはNginxを選択します。Nginxは一般的に高速ですが、Apacheはより多くの.htaccess設定に対応しています。
   • MySQLバージョン: データベースのバージョンを選択します。

   

6. 「Continue」をクリックします。
7. 「WordPress Setup」画面で、WordPressのユーザー名、パスワード、メールアドレスを設定します。これらはWordPressの管理画面にログインするために必要になります。ユーザー名とパスワードは忘れないようにメモしておきましょう。
8. 「Add Site」をクリックすると、LocalがWordPressのインストールと設定を自動的に開始します。これには数分かかる場合があります。

サイトの作成が完了すると、Localのサイドバーに新しく作成されたサイトが表示されます。「Open Site」ボタンをクリックするとブラウザでサイトが表示され、「Admin」ボタンをクリックするとWordPressの管理画面にログインできます。

WordPressのテーマやプラグインを開発する際、Localで作成したWordPressサイトのwp-content/themes/やwp-content/plugins/ディレクトリに直接開発中のファイルを置くのは避けるべきです。これは、以下のような問題を引き起こす可能性があります。

• Localのwp-content/themes/やwp-content/plugins/に直接ファイルを作成・編集する。

1. Git管理がやりにくい: テーマやプラグインをGitでバージョン管理する場合、WordPressのコアファイルや他のテーマ・プラグインファイルと混在してしまうため、管理が非常に煩雑になります。Gitリポジトリは、開発中のテーマやプラグイン単体に限定されるべきです。
2. 他環境への移植が困難: 開発中のテーマやプラグインを別のローカル環境や本番環境に移行する際、必要なファイルだけを正確に特定してコピーするのが難しくなります。WordPressのインストールディレクトリ全体をコピーすることになり、無駄なファイルも含まれてしまいます。
3. プロジェクトとしての独立性がない: テーマやプラグインはそれぞれ独立したプロジェクトとして管理されるべきです。これにより、再利用性や保守性が向上し、他のプロジェクトへの影響を最小限に抑えることができます。
4. 開発ワークフローの非効率性: 開発中のテーマやプラグインがWordPressのインストールディレクトリ内に埋もれてしまうと、VS Codeなどのエディタでプロジェクトを開く際に、WordPress全体のファイル構造を読み込む必要があり、パフォーマンスが低下する可能性があります。また、検索やファイル操作も目的のファイルに絞り込みにくくなります。

これらの問題を回避し、効率的かつ安全にテーマ・プラグイン開発を進めるためには、開発中のテーマやプラグインをWordPressのインストールディレクトリとは別の場所に置き、シンボリックリンクを使ってLocalのWordPressサイトに接続するという方法が推奨されます。

開発中のテーマやプラグインは、それぞれ独立したGitリポジトリとして管理するのがベストプラクティスです。例えば、以下のようなディレクトリ構成を推奨します。

~/Projects/
├── my-theme/             # テーマのGitリポジトリ
│   ├── .git/
│   ├── style.css
│   ├── functions.php
│   └── ...
└── my-plugin/            # プラグインのGitリポジトリ
    ├── .git/
    ├── my-plugin.php
    └── includes/
        └── ...

この構成の利点は以下の通りです。

• 明確な分離: WordPressのコアファイルや他のテーマ・プラグインから、開発中のプロジェクトが明確に分離されます。
• 容易なGit管理: 各プロジェクトが独立したGitリポジトリとなるため、バージョン管理が非常にシンプルになります。
• 高い移植性: my-themeやmy-pluginディレクトリをそのままコピーするだけで、他の環境に簡単に移行できます。
• クリーンな開発環境: 開発エディタでプロジェクトを開く際も、余計なファイルが表示されず、開発に集中できます。

独立したディレクトリで管理しているテーマやプラグインをLocalのWordPressサイトで認識させるために、「シンボリックリンク（Symbolic Link）」を作成します。シンボリックリンクとは、特定のファイルやディレクトリを指し示す「ショートカット」のようなものです。これにより、LocalのWordPressは、あたかもwp-content/themes/やwp-content/plugins/内にテーマやプラグインが存在するかのように認識します。

• ディスク容量の節約: 実際のファイルは一箇所にしか存在しないため、ディスク容量を節約できます。
• 開発の柔軟性: 開発中のファイルを任意の場所に置けるため、プロジェクト管理がしやすくなります。
• 複数サイトでの利用: 同じテーマやプラグインを複数のLocalサイトで開発・テストする場合でも、シンボリックリンクを張るだけで済み、ファイルの重複を避けることができます。
• Gitとの相性: Gitリポジトリをそのまま開発ディレクトリとして利用できるため、バージョン管理と開発ワークフローがシームレスに連携します。

Localで作成したサイトのWordPressインストールディレクトリは、通常以下のパスにあります。

• macOS: ~/Local Sites/サイト名/app/public/
• Windows: C:\\Users\\ユーザー名\\Local Sites\\サイト名\\app\\public\\

このapp/public/ディレクトリ内にwp-content/themes/とwp-content/plugins/があります。ここに、開発中のテーマやプラグインへのシンボリックリンクを作成します。

ターミナルを開き、以下のコマンドを実行します。~/Projects/my-themeは開発中のテーマのパス、~/Local Sites/mysite/app/public/wp-content/themes/my-themeはLocalサイトのテーマディレクトリ内のシンボリックリンクを作成するパスに置き換えてください。

ln -s ~/Projects/my-theme ~/Local\\ Sites/mysite/app/public/wp-content/themes/my-theme
ln -s ~/Projects/my-plugin ~/Local\\ Sites/mysite/app/public/wp-content/plugins/my-plugin

• ln -s [元のファイルまたはディレクトリのパス] [シンボリックリンクを作成するパス]
• パスにスペースが含まれる場合は、\\でエスケープするか、パス全体を`

ダブルクォーテーションで囲んでください。

Windowsでは、PowerShellを管理者権限で実行し、以下のコマンドを実行します。C:\\Users\\you\\Projects\\my-themeは開発中のテーマのパス、C:\\Users\\you\\Local Sites\\mysite\\app\\public\\wp-content\\themes\\my-themeはLocalサイトのテーマディレクトリ内のシンボリックリンクを作成するパスに置き換えてください。

New-Item -ItemType SymbolicLink -Path "C:\\Users\\you\\Local Sites\\mysite\\app\\public\\wp-content\\themes\\my-theme" -Target "C:\\Users\\you\\Projects\\my-theme"
New-Item -ItemType SymbolicLink -Path "C:\\Users\\you\\Local Sites\\mysite\\app\\public\\wp-content\\plugins\\my-plugin" -Target "C:\\Users\\you\\Projects\\my-plugin"

• New-Item -ItemType SymbolicLink -Path [シンボリックリンクを作成するパス] -Target [元のファイルまたはディレクトリのパス]

シンボリックリンクが正常に作成されると、LocalのWordPress管理画面の「外観」→「テーマ」や「プラグイン」のページに、開発中のテーマやプラグインが表示されるようになります。これで、独立したディレクトリで開発を進めながら、Local環境で動作確認ができるようになります。

エクスプローラーで確認した際に、以下のようにシンボリックリンクが作成されていればOKです。

前述のディレクトリ構成とシンボリックリンクの活用により、開発中のテーマやプラグインは独立したGitリポジトリとして管理できるようになります。これにより、VS CodeなどのモダンなコードエディタやGitHubなどのバージョン管理サービスとの連携が非常にスムーズになります。

VS Codeで~/Projects/my-themeや~/Projects/my-pluginといったプロジェクトディレクトリを直接開くことで、WordPressのコアファイルに煩わされることなく、開発中のコードに集中できます。また、以下の設定を行うことで、開発効率をさらに向上させることができます。

• .vscode/ディレクトリ: プロジェクト固有のVS Code設定（推奨拡張機能、デバッグ設定、タスク設定など）を管理できます。
• Lint設定: ESLintやStylelintなどのLintツールを導入し、コードの品質を自動的にチェック・修正することで、一貫性のあるコードスタイルを維持できます。
• フォーマッター: Prettierなどのコードフォーマッターを導入し、保存時に自動的にコードを整形することで、コードレビューの負担を軽減し、チーム開発におけるコードスタイルの統一を促進します。
• デバッグ: VS Codeのデバッグ機能を利用して、PHPやJavaScriptのコードをステップ実行し、変数の値を確認しながらデバッグを行うことができます。Local環境と連携させることで、より実践的なデバッグが可能になります。

開発中のテーマやプラグインをGitHubなどのリモートリポジトリにプッシュすることで、以下のようなメリットが得られます。

• バージョン管理: コードの変更履歴がすべて記録されるため、いつでも過去のバージョンに戻したり、特定の変更内容を確認したりできます。
• バックアップ: ローカル環境のデータが失われた場合でも、GitHubにコードが保存されているため安心です。
• チーム開発: 複数の開発者が同じプロジェクトに同時に参加し、コードを共有・マージしながら開発を進めることができます。プルリクエストやコードレビューの機能を利用することで、品質の高い開発プロセスを構築できます。
• OSS（オープンソースソフトウェア）配布: 開発したテーマやプラグインをオープンソースとして公開し、コミュニティに貢献することも可能です。

Localとシンボリックリンクを活用した基本的な開発環境が構築できたら、さらに高度な開発フローを導入することで、生産性を飛躍的に向上させることができます。

• GitHub ActionsでプラグインZIP自動生成: GitHub ActionsなどのCI/CDツールを導入することで、Gitにプッシュするたびに自動的にプラグインの配布用ZIPファイルを生成したり、テストを実行したりすることができます。これにより、手動での作業を減らし、リリースプロセスを効率化できます。
• 自動デプロイ: テストが成功したコードを、ステージング環境や本番環境に自動的にデプロイする仕組みを構築することで、リリース作業のミスを減らし、迅速なデプロイを実現できます。

• Composerの利用: PHPの依存関係管理ツールであるComposerを導入することで、外部ライブラリの管理やオートロードの仕組みを効率的に構築できます。WordPressプラグイン開発では、Composerを利用して外部ライブラリを組み込むことが一般的です。
• npm/Yarnの利用: JavaScriptやCSSのビルドツール（Webpack, Gulp, Gruntなど）やパッケージ管理ツール（npm, Yarn）を導入することで、Sass/Lessのコンパイル、JavaScriptのバンドル、画像の最適化など、フロントエンド開発における様々なタスクを自動化できます。
• WP-CLIの活用: LocalはWP-CLI（WordPress Command Line Interface）をサポートしています。WP-CLIを使うことで、WordPressのインストール、テーマやプラグインの管理、データベース操作など、様々なタスクをコマンドラインから実行できます。これにより、GUI操作では難しい複雑な処理や、自動化スクリプトの作成が可能になります。

• Localから本番へのデプロイツール（WP Migrateなど）との連携: Localで開発したサイトを本番環境に移行する際、WP Migrate DB Proなどのツールを利用することで、データベースやメディアファイルを含めたサイト全体の移行をスムーズに行うことができます。Local環境とこれらのツールを連携させることで、開発からデプロイまでの一貫したワークフローを構築できます。

本記事では、WordPressのテーマ・プラグイン開発において、Localをローカル開発環境として活用し、シンボリックリンクとGitを組み合わせることで、効率的かつ安全な開発ワークフローを構築する方法を解説しました。

この開発環境を導入することで、WordPressテーマ・プラグイン開発の生産性と品質が向上し、より快適な開発体験が得られるはずです。ぜひ本記事を参考に、ご自身の開発環境を構築してみてください。