Jamstack web creating

BLOG

手軽に名刺替わりのホームページ制作

【5分】WordPressのローカル開発環境構築はLocal By Flywheelが簡単

Webサイト制作

本記事の対象者

これからWordPressテーマを自作するけど、どうやって作業するの?
動的サイトのローカル開発環境って、どうやって作るの?
ドットインストールの動画を見たけど、ターミナル操作とかファイルダウンロードとか面倒。。もう少し簡単な方法ないの、、?
こんな方向けです。

この記事を書いた僕は、現在WordPressのテーマ作成に取り組んでいます。

制作段階では、オフラインの環境で編集して、完成したらアップロードするという流れになります。

初心者の場合、まず、

  • ローカル開発環境って何?
  • ローカルでWordPressを操作するってどういうこと?

ってなると思います。

初心者の方向けに、めっちゃ簡単な構築方法を解説します。

Local By Flywheelを使えば、5分でWordPressのローカル環境を構築可能

そもそもローカル開発環境とは?

文字通り、オンライン上でなく、ローカルエリア(オフライン)でプログラムを編集したり表示を確認したりすることです。
制作途中のWebサイトをオンライン上で公開する訳には行きませんので、自分のPC内に仮想的なサーバー(= ローカル環境)を作って、他の人が見られない状態で作業を進めます。

WordPressのローカル環境はエディタとブラウザだけでは不十分

HTML/CSSだけであれば、テキストエディタで編集して、HTMLファイルをブラウザにドラッグ&ドロップすれば表示でき、エディタだけあれば制作することができます。
一方で、WordPressを使った動的サイトとなると、データベースとも連携した結果を表示する必要があり、ドラッグ&ドロップだけでは表示できません。

初めてこの壁にぶつかった時、ドットインストールなどでローカル環境の作り方の動画をみて学んだという方は多いのではないでしょうか。
僕も、初めてのローカル環境の作り方はドットインストールで学びました。「結構めんどくさいな」と思った記憶があります。

  • Virtual Boxをインストール
  • Vagrantをインストール
  • FTPツールをインストール
  • WordPressのHPからファイルをダウンロード
  • FTPツールでアップロード


こういった流れだったと思います。
ProgateでHTML/CSSを学んだくらいの人(僕がそうだった)が見ても意味わからないですよね。
機械音痴な僕はこの作業が面倒すぎてWeb制作を諦めようと思ったくらいです。

Local By FlyWheelが全て解決

今回紹介する、「Local By Flywheel」を用いれば、面倒な作業が全部不要になります。

「Local By Flywheel」は、デスクトップアプリの感覚で、

  1. 新規WordPress作成ボタンを押す
  2. ブログ名やログイン情報を入力
  3. 環境構築完了→編集開始

タイトルに「5分」とありますが、ぶっちゃけ2分かもしれません。それくらい簡単です。

それでは具体的なステップを紹介していきます。

Local By Flywheelで自作テーマファイルの編集開始までの手順

Local By Flywheelのインストール

公式ページにアクセスしてください。

Local By Flywheel

赤枠の「DOWNLOAD」をクリック。



OSと、格情報を入力。
※いらんメールが来るようになるので注意



あとは何もせずインストールされます。
インストールが完了したら早速開いてください。以下がLocal By Flywheelのトップ画面です。



Local Sitesって書いてますよね。ここに3つありますが、これは僕がすでに作っているものなので無視してください。
1つのWordPressサイトごとに、ここに1つのLocalSiteとして作っていきます。
新しくWordPressサイトをローカル環境に作成するには、左下、赤枠部をクリック。すると、以下の画面に続きます。サイト名を入力してください。



設定の種類が2種類出ますので、「Prefered」でOKです。



WordPressの管理画面ログインユーザーネーム、パスワード、メールアドレスを入力。こちらは、管理画面ログインに用いるので忘れないでください。
入力したら「ADD SITE」をクリック。以上。



これでローカル開発環境の構築は完了です。

通常は、WordPressの公式サイトにアクセス、ファイル群をダウンロードして作業ディレクトリに保存する手間がありましたが、
Local By Flywheelは勝手にダウンロードしてきてくれます。

数十秒かかると思いますが、以下のトップ画面になっていれば完了です。
新しいサイトが追加されているのがわかると思います。


先ほどは「test1」でしたが「test11」に変更しています。気にしないでください。

基本的に操作を覚える必要があるのは上記の画像の3つのボタンだけです。
① ローカル環境でのサイトの起動/停止ボタン →基本的にずっと起動でも問題ありません。
② WordPressの管理画面ボタン →WordPressログイン画面に進みます。(ブラウザが開く)
③ サイト閲覧ボタン →押すとブラウザが開き、ローカルでサイトを閲覧できます。



②のボタンを押して、ログイン画面に進んでみましょう。

ブラウザでいつものログイン画面が開きますので、先ほど設定した物を入力します。
※こちらはあくまでローカル環境で動作してます

ログインに成功すると、いつもの管理画面です。
英語の表記になってしまっているので、下記設定画面から、日本語に変更できます。



続いて、テーマファイルの編集する場合ですが、Local By Flywheelの画面に戻って、下記赤枠箇所をクリックしてください。



WordPressの構成ファイルが、ファインダーで開きます。テーマファイルを編集する場合は、app > public > wp-content > themes でテーマのディレクトリまで移動してください。



あとは、テーマファイルをエディタで編集して保存すれば、編集結果は先ほどのブラウザ表示に即座に反映されます。
オートリロードはついていませんが、gulpなどと組み合わせればできますね。

設定は以上になります。めっちゃ簡単&便利ですね。コマンドライン操作は一切不要です。

めっちゃ簡単にWordPressのローカル環境ができた

ドットインストールで学ぶと、「作業環境作るだけなのにめっちゃ面倒」って思いますよね。
あるんです、こういう便利なやつ。

これからWordPressでWeb制作するという方、ぜひ使ってみてください。


それでは、今回は以上です。

ご相談・お見積・お問い合せはお気軽にご連絡ください。

Bubekiti

お問い合わせ