Because We Love Happy Coding

フリーライターからエンジニア × 講師。発信力だけあり余ってる感じ

PhpStormでWordPressテーマを開発する際のベストプラクティスを求めて

今日もまたコーディング。だって僕らはHappy Codingが大好きだから。

PhpStorm と Local by flywheelでテーマを開発する際の手順。

目次

環境

  • PhpStorm 2018.3.3
  • WordPress 5.2
  • Local by flywheel 3.3.0
  • SourceTree

私はGitクライアントとしてSourceTreeを使用している。PhpStormでやれたらもうちょっとスマートだろうか。

現状の課題

私がまだ技術的に解決できてない課題を紹介しておく。

既存サイトをカスタマイズしたい

Local by flywheel のインストールに指定するディレクトリは空っぽでなければならない。既存のサイトをカスタマイズしたい場合は、空っぽのLocalbyflywheelを構築してから既存のソースコードを投入している。

記事などもエクスポート/インポートすればできるはずだが、今はそこまでやってない。

サーバーにWordPressを追加する

もうちょっと後でやってもいいが、バージョン確認もあるのでここでやってしまう。

Local by flywheelでWordPress開発環境を立ち上げる

インストール

Local by flywheelをインストール。

サイトを追加

サイトのインストールディレクトリは、初期設定(ドライブ直下/LocalSites/some_site_name)のままでもいいが、どのように置くかは整理しておくこと。

バージョンはできれば本番環境と合わせておきたい。

他のPCと開発ソースを共有する場合、Githubを経由して共有するのがおすすめ(Dropboxだと難しそう)

ローカルリポジトリの作成

SourceTreeを使ってローカルリポジトリを作成する。

個人的にはコアコードをいじる時に備えて全WPファイルをリポジトリに含める(後でPhpStormもそうする)。その上でwp-includeなど当面ソースコードをいじる可能性のないディレクトリはignoreに入れてしまう。コアコードで初回コミットに含めるのは以下の3ファイル。

  • gitignore
  • htaccess
  • wp-config.php

Githubとの接続

Githubリポジトリを作成

「readmeを作る」チェックは外して作らないようにする。ソースコードをまとめるのが面倒になるので。

プッシュ

テーマのひな形ファイルや既存のソースコードがもしあれば、ぶちこんでコミット>プッシュ

PhpStormでプロジェクトを作成し、設定する

プロジェクト作成時のひな形としてWordPress Pluginを選ぶ

プロジェクトのパスはWordPressの全体(wp-contentの上)が推奨らしい。

  • 「Setting」の「Languages & Frameworks > PHP > Frameworks」を開く
  • 「Enable WordPress Integration」をチェック。
  • WordPress Installation path」も入力する。

参考記事