WordPresのテーマ開発といえば、MAMPで環境開発を整えて開発をおこなうのが主流でした。
しかし、いま主流となっているのが「local by flywheel」で環境開発を整えてWordPressの開発をおこなうスタイルです。
「local by flywheel」は、使いやすいデザインと機能性が高いことで人気を集めています。
今回は、「local by flywheel」のインストール方法や本番環境への移行方法を紹介します。
「これからWordPressのテーマを開発したい」と考えている方には、local by flywheelがおすすめです。
local by flywheelとは
「local by flywheelってなに？」と思う方もいるでしょう。
local by flywheelは、WindowとMacで利用できるロカル開発環境をつくるアプリケーションです。
MAMPと比べて操作が簡単なのがlocal by flywheelの特徴になります。
数クリックするだけで、WordPress開発環境をつくれます。
しかし、メリットだけではありません。
local by flywheelは、MAMPと比べて歴史が浅くユーザーも少ないので、インターネット上に使い方などの情報が少ないのがデメリットです。
他にもlocal by flywheelにはこのような特徴があります。
・簡単にPHPのバージョンを変更できる
・複数のプロジェクト、開発環境を管理できる
・環境を構築した後も設定を変更できる
・ローカル環境でSSLを使用できる
・プロジェクトのクローンを簡単に作成できる
local by flywheelの使い方
local by flywheelを使うためには、まずはアプリケーションをダウンロードしなければなりません。
local by flywheelの公式サイトにアクセスして、ダウンロードしましょう。
local by flywheelは誰でも無料で利用できます。
local by flywheel公式サイトURL：https://local.getflywheel.com/
local by flywheelの公式サイトにアクセスすると、このような画面が表示されます。
上記の画面の四角で囲っている「FREE DOWNLOAD」をクリックして、アプリケーションをダウンロードしましょう。
「FREE DOWNLOAD」ボタンをクリックすると、このような入力フォームが表示されます。
この画面では、Windowsで使用するのMacで使用するのか、自分の名前・メールアドレス・職場・携帯の電話番号・WordPressでのWEBサイトを制作経験の有無などを入力します。
これらの項目を入力すると、ダウンロードが開始されます。
local by flywheelを起動させるとこのような画面が表示されます。
local by flywheelを使用するためには、VirtualBoxというツールが必要です。
しかし、VirtualBoxを事前にインストールしていなくても最初にlocal by flywheelを立ち上げた時点で自動的にインストールされます。
VirtualBoxのインストールには5分〜10分ほど時間がかかります。
インストールが終わったらlocal by flywheelを起動しましょう。
local by flywheelを起動作動させると、このような画面が表示されます。
このような画面が表示されたら、「+CREATE A NEW SITE」もしくは左下の「＋」マークをクリックして、WEBサイト追加します。
「+CREATE A NEW SITE」もしくは左下の「＋」マークをクリックすると、以下のような画面に移動します。
この画面では、これから制作するWEBサイトの名前を入力します。
WEBサイトの名前はあとで変更することが可能なので、特に決まってない場合でもとりあえず入力して先に進めましょう。
ただし、注意点としてはサイトの名前は日本語では設定できず、ローマ字のみの入力となっています。
ローカルでのドメインや保存先のパスなどを細かく設定したい場合は、「ADVANCED OPTIONS」をクリックすると詳細に設定できます。
基本的には、デフォルトの設定のままで大丈夫です。
ローカルでのドメインを変更する場合は、「Local site domain」の部分を変更すればOKです。
ローカルでの保存先のパスを変更したい場合は、「Local site path」の部分を変更すればOKです。
デフォルトのままで進めると、WEBサイトの名前がローカルでのドメインとなります。
サイトの名前を決めたら、「CONTINUE」をクリックして次の画面に移動しましょう。
次の画面では環境設定をおこないます。
次の画面では、このような表示されます。
この画面ではPHPのバージョンやMySQLのバージョンを設定します。
2018年12月では、PHPのバージョンが7.2.9、MySQLのバージョンが5.7が「Peferred」になっています。
基本的には、ここもデフォルトのままでOKです。
「デフォルト以外のPHPのバージョンを設定したい」「デフォルト以外のMySQLのバージョンを設定したい」という場合は、「Custom」というボタンをクリックして選択しましょう。
「Custom」を選択すると、このような画面に表示が切り替わります。
画面が切り替わった各項目では、このように選択できます。
・PHP Version・・・この項目ではPHPのバージョンを設定できます。
・Web Server・・・「nginx」もしくは「Apache」から選択できる
・My SQL Version・・・MySQLバージョンを選択できる
環境設定が完了したら「CONTINUE」を選択して次の画面に進みましょう。
最後の設定がWordPressのログイン設定です。
最後の設定画面はこのような画面です。
WordPressの「WordPress Username」にはユーザー名を入力します。
「WordPress PassWord」にはパスワードを入力します。
この2つの情報は、最初にWordPressにログインするときに必要になる情報なので、必ず記憶もしくはメモを残しておきましょう。
基本的にはこの2つの情報を入力するだけでOKですが、WordPressのサイトをマルチサイトにしたい場合は「ADVANCED OPTION」をクリックしてください。
すると、以下のような画面が表示されます。
「Is this a WordPress multisite」の下のボックスを選択すると「Subdirectory」もしくは「Subdomain」の2つから選択できます。
サブディレクトリーでWordPressを運営したい場合は、「Subdirectory」を選択してください。
サブドメインでWordPressを運営したい場合は、「Subdomain」を選択してください。
この設定画面が終了すれば、これでWordPressの構築が完了です。
WordPressのマルチサイトとは
WordPressは基本的に1つのドメインで1つのWordPressで1つのWEBサイトを運営することが多いです。
しかし、この方法の場合2つのサイトを運営したい場合、2つのドメインが必要になります。
マルチサイトは、1つのドメインで2つのWEBサイト運営したいときに便利な方法です。
1つのドメインで2つのWordPressをインストールして2つのWEBサイトを運営できます。
WordPressのマルチサイトを利用することで、1つのドメインで複数のWEBサイトを運営することが可能です。
また、最初にマルチサイトに設定していなくても後でマルチサイト化することもできます。
後からマルチサイトにする場合は、「.htaccess」ファイルを編集することが必要です。
.htaccessファイルは隠しファイルなので、そのフォルダにアクセスして「Command」＋「Shift」＋「.」を入力しなければなりません。
.htaccessファイルにはこのように記述されています。
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /site-name/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /site-name/index.php [L]
</IfModule>
# END WordPress
「site-name」のところは、現在ドメイン使用しているドメインが表示されていると思います。
基本的にはドメインの直下にWordPressのファイルやフォルダがあると思います。
ドメインの直下にWordPressのファイルをまとめるための新規フォルダを用意しましょう。
今回の場合「wp」というフォルダを新規作成して、そのフォルダの中にWordPressに関するファイルやフォルダを格納します。
その後に、.htaccessファイルを以下のように編集します。
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/site-name/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/site-name/index.php [L]
</IfModule>
# END WordPress
このように記述することで、WordPressをサブディレクトリにして、複数のWEBサイトを運営することができます。
.htaccessファイルは重要なファイルなので、編集する前に、念のためバックアップをとっておきましょう。
local by flywheelの使い方
ここまではlocal by flywheelのインストール方法やWordPressの構築方法を説明してきました。
ここからは、local by flywheelでのWordPressのアクセスの方法や設定を変える方法を説明します。
WordPressのサイトを構築してlocal by flywheelを立ち上げるとこのような画面が表示されています。
まず、WordPressの表示を確認するために右上に表示されている「START SITE」をクリックしてください。
「START SITE」をクリックして、5秒ほど経つと「STOP SITE」に変化します。
「STOP SITE」になるとWEBサイトを確認する準備が整っています。
右上の方に「ADMIN」というボタンが表示されているので、そのボタンをクリックするとWordPressの管理画面にアクセスできます。
管理画面にアクセスすると、先ほど設定した「ユーザー名」と「パスワード」が必要です。
「ユーザー名」と「パスワード」を入力してログインするとこのような画面が表示されます。
WordPressにアクセスすると、このように英語表記でWordPressが表示されます。
まずは、WordPressを使いやすくするために英語表記を日本語表記に変えましょう。
言語設定を変えるためには、サイドバーに表示されている「Setting」を選択してください。
次に「Setting」の中の「General」をクリックしてください。
「Setting」の中の「General」を選択すると、「Site Language」という項目があります。
デフォルトでは、「Site Language」の項目が「English (United State)」に設定されています。
これを以下の画像のように「日本語」に設定すると、WordPressの言語表記が日本語に変更されます。
WordPressを使いやすくするためにも、まず設定言語を日本語にしましょう。
次は、ローカルサイトを一時的に公開してみましょう。
local by flywheelで以下の画像の画面に移動してください。
この画面に移動したら、下の方に表示されている「Live Link: ENABLE」の「ENABLE」の部分をクリックしてください。
クリックするとローカル環境で開発していて本番環境に移行してなくても一時的にURLを発行して別のパソコンでも確認することができます。
実際にボタンをクリックすると、このようにURLが発行されます。
今回の場合は、下記のURLが発行されました。
http://754a1c6d.ngrok.io/
実際に上記のURLをブラウザに入力して確認すると、このような画面が表示されます。
このようにURLを入力して、WEBサイトが表示されれば問題ありません。
WordPressの構築が完了したら、一度ローカル環境の状態で一般公開できるのか試してみてください。
このような機能を使用することで、ローカル環境で開発しているWordPressサイトをクライアントやテストユーザーに共有することが可能です。
MAMPやXAMPPにはない機能でPDCAサイクルを早く回すにも便利で、進捗報告にも利用できます。
また、PHPやMySQLの設定を変える場合は、「Local Enviroment」項目の「CHANGE」をクリックすると設定を変更することが可能です。
下の画像のように、「CHANGE」を選択して「Prefferred」から「Custom」に変更すると既存の設定を変更できます。
このように、WordPressを構築した後でもPHPのバージョンやMySQLのバージョンの変更ができます。
ここで各項目の変更したいバージョンを選択しましょう。
ローカルから本番環境への移行
ここまでは、local by flywheelの基本的な使い方について紹介しました。
ここからは、local by flywheelでローカル環境から本番環境に移行するための方法を紹介します。
今回は、local by flywheelとエックスサーバーを使ったローカル環境から本番環境への移行方法を説明します。
また、本番環境に移行するための作業をするときは、必ず事前にバックアップをとっておいてください。
まずは、エックスサーバーのサーバーパネルにアクセスしましょう。
エックスサーバーURL：https://www.xserver.ne.jp/
エックスサーバーのサーバーパネルにアクセスしたら、サーバーパネルの左下に表示されている「設定対象ドメイン」から対象となるドメインを選択してください。
もし、現在ドメインを所有していない場合は、ドメイン取得サービスを利用してドメインを取得しましょう。
おすすめのドメイン取得サービスは、「お名前.com」や「ムームードメイン」の2つです。
お名前.comURL:https://www.onamae.com/
ムームードメインURL :https://muumuu-domain.com/
次は、エックスサーバーのWordPressの自動インストール機能を使って簡単にWordPressをインストールします。
「WordPress」の項目に表示されている「WordPress簡単インストール」をクリックしてください。
「WordPress簡単インストール」をクリックしたら、メニュータブに表示されている「WordPressのインストール」を選択してください。
「WordPress簡単インストール」では、このような画像のように表示されます。
各項目を以下のように設定してください。
・ブログ名・・・local by flywheelで設定したWordPressのサイト名前を入力する
・ユーザー名・・・local by flywheelで設定したWordPressのユーザー名を入力する
・パスワード・・・local by flywheelで設定したWordPressのパスワードを入力する
・メールアドレス・・・local by flywheelで設定したメールアドレスを入力する
・データベース名・・・「自動でデータベースを生成する」を選択する
このような項目を入力したら、間違いがないかを確認して、「インストール(確定)」をクリックしてください。
WordPressのインストールが完了すると、「MySQLデータベース名」「MySQLユーザー名」「MySQLパスワード」「パスワード」などが表示されます。
こらの情報は重要な情報なので、必ずメモを控えておいてください。
ここまでできたら、次はFTPを使った操作になります。
FTPは、ファイル管理するためのツールです。
FTPは、無料で使用できるツールもあり、プログラミングなどの知識がなくても利用することが可能です、
エックスサーバーのデフォルトでもFTP機能が搭載されていますが、無料のFTPソフトを利用した方が後々利用する場合でも簡単にファイル管理ができます。
おすすめのFTPツールを紹介します。
FFTP
Windowsの中で一番有名なFTPソフトです。
利用しているユーザーが多いため、インターネット上に情報が公開されています。
なので、FTPを利用したことのない方でも安心して利用できます。
ただし、公式での開発おこなっていないため、新しい機能が開発されることがありません、
無料で利用できるのがメリットですが、インターフェイスが少し古く使いにくのがデメリットです。
FFTPダウンロードURL：https://forest.watch.impress.co.jp/library/software/ffftp/
Cyberduck
Windows・Mac両方で利用できるFTPソフトです。
スッキリとしたインターフェイスで初心者も使いやすいのが特徴になります。
無料で使いやすいおすすめのFTPソフトですが、転送スピードが少し遅いのがデメリットです。
Macを利用している方に人気が高いFTPソフトです。
CyberduckダウンロードURL：https://cyberduck.io/
FileZilla
高機能で転送速度も速いのが、FileZillaのメリットです。
Windows・Macの両方のOSで使用することが可能です。
利用者も多く使い方などの情報もインターネット上に多く公開されています。
こちらのFTPソフトも無料で使用できます。
FileZillaダウンロードURL：https://ja.osdn.net/projects/filezilla/
これらのFTPソフトがおすすめです。
次は、local by flywheelの画面に移動してください。
下の画像のようにlocal by flywheelの右矢印のアイコンをクリックしましょう。
フォルダが表示されたら「app」の中の「public」に移動してください。
このフォルダに格納されている「wp-config.php」以外のファイルを、FTPソフトでサーバーの「public_html」フォルダにアップロードします。
たった、これだけでサーバーへのアップロード作業が完了です。
local by flywheelはMAMPよりも簡単にアップロードできるのが魅力の1つになります。
まとめ
いかがでしたか？
今回は、local by flywheelのインストール方法やサーバーへのアップロード方法を紹介しました。
local by flywheelは、非常に使いやすいので、初心者も簡単に利用できます。
ぜひ1度利用してみてください。