WordPress開発環境の構築(M1 Mac)

## 前提

- 著者は、本職エンジニアではない（報酬をもらう仕事は別）
- 必要な時にだけ、コードを書く程度
- できるだけ、楽をするためのもの
- 細かい技術などは、別の素晴らしい記事をどうぞ

以下、「やり方」だけを示します。

## 最終的なゴール

- 自由にWordPressを作ったり、捨てたりできるローカル環境
- Xdebug デバッグ環境
- Code Sniffer の導入
- Visual Studio code を便利に
- コマンドラインを便利に

## (1) Local by Flywheel

https://localwp.com

こちらからダウンロードして、シンプルにインストールするだけ。

さらに、Add-on をインストールしておく（Visual Studio Code + Xdebug）

![スクリーンショット 2020-11-30 10.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/2ea1474d-24e5-8951-e252-3ba00a4b3244.png)

さらに、Sequel Pro (DBマネジャー) を https://sequelpro.com からダウンロードし、インストールする。


## (2) コマンドラインの整理

### ターミナルを見やすくする

ターミナルの「環境設定」を開く。デフォルトのターミナルのスタイルを変更。

![スクリーンショット 2020-11-30 10.20.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/7ee4c8e1-f6dc-76c3-ef37-c3a966243708.png)

なんとなく、黒背景、白の文字、背景は半透明。フォントは小さすぎるので、14ptぐらいにする。10ptって小さくないですか？


### zsh を使いやすくする

BigSur (Catalinaから）は、zsh がデフォルトになったので、使うようにする。以下の記述は、Qiitaか、個人のブログからもらってきました。すみません、ソースを忘れました。

以下を .zshrc に貼り付ける。

```zsh
# zsh-completions(補完機能)の設定
if [ -e /usr/local/share/zsh-completions ]; then
    fpath=(/usr/local/share/zsh-completions $fpath)
fi
autoload -U compinit
compinit -u

# prompt
PROMPT='%m@%n %F{1}%~%f$ '

# Aliases
alias psass='~/.composer/vendor/scssphp/scssphp/bin/pscss'
#ls系
alias ls='ls -GF'
alias la='ls -a'
alias ll='ls -lh'
#処理確認
alias rm='rm -i'
alias mv='mv -i'
alias cp='cp -i'

##################################################
### オプション

# 同時に起動しているzshの間でhistoryを共有する
setopt share_history

# 同じコマンドをhistoryに残さない
setopt hist_ignore_all_dups

# スペースから始まるコマンドをhistoryに残さない
setopt hist_ignore_space

# historyに保存するときに余分なスペースを削除する
setopt hist_reduce_blanks

# 高機能なワイルドカード展開を使用する
setopt extended_glob

# cd無しでもディレクトリ移動
setopt auto_cd

# コマンドのスペルミスを指摘
setopt correct

```

.zprofile に以下をコピペ。composer を使ってインストールするコマンドが使えるように、パスを通している。

```zsh
export PATH=$HOME/.composer/vendor/bin:$PATH
```

※ composer や、 scss とかは、後でインストール

### Homebrew をインストール

2020/11/30 現在、Homebrew は、M1 Chipには対応していません（ARM設計）。そこで、x86系として動くように、Rosetta2 を使用するように設定してから、インストールします。

「アプリケーション > ユーティリティ > ターミナル」を右クリックして、詳細をだし、Rosetta2 で動かすようにチェックを入れます。それから、ターミナルを開いて実行します。

![ターミナルでRosettaを有効にする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/2043e035-3fe1-d05a-d9f6-5db1c6131ec3.png)

※ Rosettaって、おしゃれなネーミングだな〜


https://brew.sh/index_ja
以上のサイトのスクリプトをコピペして実行する。

```zsh
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### composer をインストール

なんだかんだで使うから。最近は、 vimeo の api のために使った。

```zsh
brew install composer
```

## WordPress開発環境

### wp コマンド

Local by Flywheel の中でしか使わない気がするが一応インストールしておく。

https://wp-cli.org/ja/

インストールの説明のところにある通りに作業すればOK。（#より後ろはコピペしない）

```zsh
curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar # ダウンロード
php wp-cli.phar --info # テスト
chmod +x wp-cli.phar # 実行権限を与える
sudo mv wp-cli.phar /usr/local/bin/wp # wpコマンドとして登録
wp --info # テスト
```

### Code Sniffer のインストール

素晴らしい記事がありました。
https://qiita.com/super-mana-chan/items/401eb5cf06bbacddb5d3

以下のようにしました。既にComposerはインストール済みなので、PHP Code Snifferのインストールから。globalオプションで、いつでも、どこでも使える状態。つけない場合は、プロジェクトごとにインストール。

```zsh
composer global require "squizlabs/php_codesniffer=*"
```

インストール先は、 `.composer/vendor/squizlabs/php_codesniffer` です。コマンドは、 `.composer/vendor/bin/phpcs` なので、ここにパスを通しておく。既に、上記のzsh の設定で設定済みなので、何もしなくても、 phpcs コマンドが使えるはず。

次に、WordPressのコード規約をインストール。以下のコマンドを実行し、phpcs のフォルダにファイルを置く。さらに登録

```zsh
git clone -b master https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

phpcs --config-set installed_paths ~/.composer/vendor/squizlabs/php_codesniffer/Standards/WordPress

phpcs --config-set default_standard WordPress
```

もっと詳しいコマンドラインの使い方や、設定は https://qiita.com/super-mana-chan/items/401eb5cf06bbacddb5d3 をどうぞ。

なお、Visual Studio Code を使うので、細かい設定はせず。

## Visual Studio Code

ダウンロードして、インストールする。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

### Extension

拡張をインストールする。好みですが、とりあえず、以下。

![スクリーンショット 2020-11-30 10.58.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/70ae71d8-b81b-d6d7-8121-105c352557cd.png)

- Japanese Language
- html snippets
- IntelliSense for CSS class names in HTML
- PHP Debug
- PHP DocBlocker
- PHP Intelephense
- PHP Sniffer & Beautifier
- vscode-icons
- WordPress Snippets

## 利用について

### 1. Local by Flywheel で WordPressを作成

- 開発用のWordPressを設置
- Utilities で Xdebug + VS Code を追加する

### 2. テストデータを入れる

- [日本語](https://github.com/jawordpressorg/theme-test-data-ja)
- [英語（英語がいいかも・・・）](https://github.com/WPTT/theme-unit-test)
- WooCommerce (プラグインの中にある）

### 3. プラグイン、テーマの作成

カスタマイズのためにプラグインを作成したり、子テーマを作成する場合は、「Local」のWordPressのターミナルを開く。そこで wp コマンドで作成する。

![スクリーンショット 2020-11-30 11.23.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/193970/93f8e4bc-9fa6-fc0b-2bb6-a0dcdae3a71f.png)

## 【補足】BigSur だと、Local by Flywheel で Open Site Shell が使えないので解決策はこちら

- [Big Sur で Local のターミナルに接続する方法](https://qiita.com/toiee_kame/items/dd48bab0c85adf25a44b)