Zenn
👋

Flywheel Localを使って、WordPressサイトを構築する

2023/04/17に公開
PHP
WordPress
開発環境
local
tech

最近はWordPressを使ったサイト構築が主流になってきています。
一度は触れたことがある方も多いと思います。
Localは、サーバー構築をしなくてもWordPress作成ができる、WordPressに特化した、ローカル環境システムです。
これを入れるだけでWordPressの開発環境が完結します。
まずはインストールしましょう。

Localのインストール

まずは、Localのサイトにアクセスしましょう。
右上のDOWNLOADボタンから、本体をダウンロードします。

必要な項目を入力してGETします。

ダウンロードが終わったらインストールしてください。

インストールを終えて、Localを立ち上げるとこういった画面が表示されると思います。

左上の3本バーをクリックし、Add new siteを選択します。


新規でサイトを作成するので、Create a new site　を選択しContinueします。（デフォルトのまま）


上のテキストボックスに作成したいサイトの名称を入れます。
下のボックスには、サイトドメインなどがあらかじめ入力されています。
このまま、Continueします。


サイトのサーバー等を選択可能です。
この場合、Preferredで、「PHP8.1.9」、「Nginx」、「MySQL8.0.6」が選択されています。
変えたいときは、Customを選ぶと、PHP（5.6UP）・Server（Apache/Nginx）・Database（MariaDB/MySQL）をそれぞれ細かく設定できます。
本番環境に合わせた設定を選ぶのをおすすめします。


ここで最後です。
ログインする管理者の名前（アルファベット）、パスワード、メールアドレスを入力します。
下のセレクトボックスは、マルチサイトにするかどうかの設問です。
モールみたいなサイトを作りたい人はＹｅｓにしますが、今回はＮｏで。
Add Site　をクリックします。

これだけの入力で、データベースもできて、インストールが完成しています。

Localの操作方法

One-click adminをONにしておくと、ログインスルーで管理画面に入れます。
右上の　WP Admin ボタンで、管理画面表示、Open Site でサイトのトップが表示されます。
このLocalを閉じたいときは、　右上のStop Siteを押して、サーバーを終了させてから閉じます。
逆に、開発を始めるときは、LocalをPCで立ち上げて、左のメニューからサイト名を選び、右上のStart Siteをクリックすることで開始します。

データベースの中が見たいときは、OverViewをDatabaseタブに変えます。
Connectで　OpenAdminerをクリックします。

新しくブラウザが立ち上がり、データベースのテーブル表示画面になります。
使い方はMysqlAdminとほぼ同じです。今回は割愛します。

サイト表示

簡単にインストールが完了し、表示もできました。

WordPressの場所

LocalにWordPressがインストールされたわけですが、これを管理画面だけでなく、エディタ等で編集したいこともあると思います。
WordPressがインストールされた場所は、次の方法で表示できます。
見出しのOriginalTestと書かれた下にある「Go to site folder」をクリック。

フォルダのパスは、通常下記になります。

C:\\ユーザー\ユーザー名\Local Sites\作成したサイト名\app\public

VSCode等で編集するときは上記パスのappもしくはpublicを指定すると良いです。

Shellも使える

見出しのOriginalTestと書かれた下にある「Go to site folder」の横の「Open site Shell」をクリック。
Shell画面が立ち上がります。

Composerも使えます。便利！

Add-onsで拡張も可能

Local管理画面の左アイコン・パズル型をクリックするとアドオン画面になります。
アドオンを追加することで、色んな連携が可能になります。
例えばXdebug＋VScodeを入れると、Vscodeを使ってのデバックが可能になったりします。
おすすめはImageOptimizer、Local専用のアドオンで、画像をより効率的に圧縮し、不要なデータを削除することで、サイト上の画像を最適化するのに役立ちます。

管理画面でプラグインを入れる

Localは日本語対応していないので、インストールするWordPressも日本語版ではありません。
プラグインで日本語対応にする必要があります。
まず、設定（Settings）で表示を日本語にしましょう。
下記の通りに選択してSave Changesボタンをクリックしてください。

これで表示が日本語になりました。
ここから、プラグインのインストールを始めます。
左メニューのプラグインをクリックし、上にある新規追加ボタンを押します。
左のキーワードに「multibyte」と入力してください。
WP Multibyte Patch が一番左上に表示されるので、「今すぐインストール」をクリックします。
日本語化でバグらないためのプラグインです。
インストールが終わると「有効化」と出るので、クリックします。
画面が切り替わりますので、プラグイン一覧画面になったら、右端の「自動更新を有効化」をクリックしておきます。そうするとアップデートがあると自動で更新してくれます。

プラグインが不要になったときは、このプラグイン一覧で、無効化をクリックして、その後の状況の応じて削除します。

上記と同じようにして、以下のプラグインもインストールします。

  • Query Monitor
    • 表示されているページの情報を細かく教えてくれるツール
  • Theme Check
    • 作成するテーマファイルがルール通りに作成されているかチェックしてくれる

今回は最低限の作成なので、これ以外のプラグインは必要に応じてどうぞ。

Localは、WordPress作成に特化しているので使いやすさも格段です。
WordPress、ちょっと気になるなって人はまずLocalをインストールして、開発してみてください。

Discussion