Wordpress講習 to 株式会社ANTz #2 レポート「WP制作環境を作ろう」

Wordpress講習会、vol.2はSTaDメンバーの若手２人も参加して人数が倍に。内容はこのような感じでした。

・先週のおさらい
・ローカル環境とリモート環境（LAMPの説明）
・MAMPの設定

ローカル環境の設定は最近ではDockerみたいなものも出てきて便利になっているのですが、今回はお手軽に個人のローカル環境を構築できるMAMPを使用することになりました。

ちなみにMAMPのパッケージ内の一部ファイルをカスタマイズすると案件ごとにポート番号を割り当てられるというナイスな方法を東崎先生にご教授いただき、折角なのでその方法を紹介します（noteのコードエディターを始めて試したいということもあり）。

1. まずはMAMPパッケージ内の以下のファイルをテキストエディターで開きます。
MAMP > conf > apache > httpd.conf

570行目辺りのコメントアウトを外します。

#Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

↓↓↓↓↓

Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

こちらで、このあと編集する httpd-vhosts.conf が機能するようになります。

2. 次に、以下のファイルをテキストエディターで開きます。
MAMP > conf > apache > extra > httpd-vhosts.conf

すると以下のような内容が記述されています。

<VirtualHost *:80>
   ServerAdmin webmaster@dummy-host.example.com
   DocumentRoot "/Applications/MAMP/Library/docs/dummy-host.example.com"
   ServerName dummy-host.example.com
   ServerAlias www.dummy-host.example.com
   ErrorLog "logs/dummy-host.example.com-error_log"
   CustomLog "logs/dummy-host.example.com-access_log" common
</VirtualHost>
<VirtualHost *:80>
   ServerAdmin webmaster@dummy-host2.example.com
   DocumentRoot "/Applications/MAMP/Library/docs/dummy-host2.example.com"
   ServerName dummy-host2.example.com
   ErrorLog "logs/dummy-host2.example.com-error_log"
   CustomLog "logs/dummy-host2.example.com-access_log" common
</VirtualHost>

こちらのコードはサンプルっぽいので消してしまっても構いません。
このファイル内に以下を追記します（例）。

# Sample Project
Listen 8001
<VirtualHost *:8001>
   DocumentRoot "/Users/xxxxxxxxxxx/プロジェクトファイルまでのパス"
   <Directory "/Users/xxxxxxxxxxx/プロジェクトファイルまでのパス">
       AllowOverride All
   </Directory>
</VirtualHost>

こうすると「http://localhost:8001/」で狙ったプロジェクトの確認ができるようになります。そうすることで、いちいちMAMPの設定で案件によって指定ディレクトリを変更せずとも、同じように8002、8003と追記していけば、ローカルサーバを複数立てることができるようになります。

ちなみにプロジェクトファイルまでのパスはターミナルなどにプロジェクトのディレクトリをドラッグすれば確認できます。

プロジェクトを複数同時に確認する必要がある方にとっては凄く便利なやり方なのでぜひお試しください。

この日、最後の振り返りでは、すでにWordPress経験者であるSTaDメンバーからも
「日々忙しくて、勢いでやっていた部分もあるので、仕組みからしっかりと学び直すことができて凄く参考になった」
という声もありました。

次回vol.3は「テーマ、テンプレート構造をしろう」ということでWordpressをインストールするところから始めます。

› Wordpress講習to株式会社ANTz#3レポート「テーマ、テンプレート構造をしろう」