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

前提

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

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

最終的なゴール

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

(1) Local by Flywheel

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

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

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

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

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

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

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

zsh を使いやすくする

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

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

# 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 を使ってインストールするコマンドが使えるように、パスを通している。

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

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

Homebrew をインストール

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

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

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

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

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

composer をインストール

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

brew install composer

WordPress開発環境

wp コマンド

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

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

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オプションで、いつでも、どこでも使える状態。つけない場合は、プロジェクトごとにインストール。

composer global require "squizlabs/php_codesniffer=*"

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

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

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 を使うので、細かい設定はせず。