New

Local by Flywheel を使ってローカル環境でWordPressを動かす!

これまで0からWordPressを使用したwebサイトを作る、というお仕事はいくつか行ってきたのですが、
最近初めてWordPressで制作された既存サイトのリニューアル(新テーマの制作・実装)のお仕事しました!
それにあたり、大きく2点壁にぶつかったため、それらを解決した方法を忘れないうちにメモ的に残します📝
問題としては以下でした。

  • 1.そもそもWordPressを手元で動かす方法がわからない
    (0から制作をする案件では、本番となるサイトを非公開にし、それをテスト環境として直接実装を行っていた)
  • 2.本番環境を再現したテスト環境がないため、既存の記事を新テーマに変換をした際の確認ができない

今回は「1」のWordPress環境をローカルに構築した方法をご紹介します!
昨今はNuxt×netlifyでWordPressサイトを制作することができるようなのですが、
私くらいのレベルのwebデザイナー(フロントエンドはからっきし)には敷居が高いため、ご紹介する方法での構築に至りました。

Local by Flywheelを使用する

タイトルにもある通りなのですが、「Local by Flywheel」というサービスを使用しました。
使用方法は大変簡単!

1.Local by Flywheel本体サイトからアプリケーションをDL、インストールをする

こちらの「Local by Flywheel」本サイトの「FREE DOWNLOAD!」という緑のボタンから、必要事項等を入力しアプリケーションをDL、お使いのPCにインストールします。

2.WordPressプロジェクトを作成します

DLした「Local by Flywheel」アプリを起動すると、以下の画面が表示されます。

左下の「+」ボタンを押すと、新規のWordPress環境を制作するための必要事項入力画面が表示されます。

3.できた 笑

もう、完成です!!

「ユーザー > ユーザー名 」以下に「Local by Flywheel」用の「Local Sites」というフォルダが作成されており、プロジェクトごとのフォルダができているので、
ファイルアップロードの際はこちらから行うのがよいかなと。

管理画面は、「Local by Flywheel」アプリ画面の以下「ADMIN」ボタンをクリックするとブラウザで表示がされます。

設定をした管理者名・パスワードを入力するとあのWordPress初期管理画面にアクセスできます!
デフォルトでは英語表示になっているので、管理画面上の設定で言語を日本語に変更をすると大変安心感があります。

webサイト側は以下の「Local by Flywheel」アプリ画面の「VISIT SITE」ボタンでブラウザが開きます。
管理画面で変更をした内容は、こちらの画面に反映されます。あー便利!

これで作成したテーマファイルをアップロードしてWordPressを組み込んだ状態のデザイン表示を確認するなり、
テスト記事を作成していい感じに記事が見えたらニヤニヤするなり、あとは煮るなり焼くなり好き放題です!すごい!!

ローカル環境を落とす際には、アプリ画面右上にある赤文字の「STOP SITE」を押すことでローカルが終了し、
管理画面・サイト側ともに表示がされなくなります。

共有URLの生成

また、「Local by Flywheel」で制作したローカル環境上のサイトの、パブリックなURLを生成してくれるため、
ローカル環境で開発をしたページそのままを外部の方に共有することができます!方法は以下。
「Local by Flywheel」アプリ画面下の「Live Link」と書かれている右にある「ENABLE」というボタンを押します。

すると以下のような何やらURLのようなものが表示されます。これがパブリックなURLです。

このURLを知った方なら誰でもアクセスすることができます!すごい…
一度公開したURLは、URL横にある「DISABLE」ボタンを押すと無効化されます。

気をつける点・困った点

この大変便利なパブリックURL生成なのですが、以下だけ気をつける・困ったな〜という点がありました…!
そしてこれだという解決方法がまだ見つかっていないので、もしよき方法をご存じの方がいらっしゃいましたら教えてほしいですm(_ _)m

  • 一度生成したURLを「DISABLE」で無効化すると、次にURLを有効化・生成をした際には別のURLになってしまいます。
    もちろん「SITE STOP」を行いアプリを一度落とし、立ち上げ直した際にもURLは一度無効化されてしまうので同様です。
    そのためお仕事で使用する場合、お客様の確認期間に上記が起こった場合には再度別のURLをご連絡する必要があります…!
    また、このURLの無効化はPC自体をスリープ状態にしても起こってしまうので、ふいにPCを閉じることができません 笑
    これは別のPCを用意する他ないのだろうか…というところで未解決問題です><
  • 共有URLで表示をしたサイトが大変重かった…!
    サイト表示側であれば、多少お客様にご辛抱いただくしかないのかな、という状態なのですが、
    管理画面の操作(特に記事作成・ファイルアップロードまわり)がとてもとても…
    これは何が原因なのかはっきりしておりません><!
  • 一度アクセスし、別ページに遷移をする場合は1分程度時間の開けないと、リクエスト過多で一時的にエラー表示になってしまいます。
    これは、一度あるページへアクセスをしたら1分程度お待ちいただいた上で、別ページへ遷移をしてください、ということをお客様に予めお伝えさせていただく、という形でしのぎました、、

以上!

と、最後は困った点でまとめてしまったのですが、これまでWordPressサイトを制作する際はすでにある自分のサイトに実際にテスト用WordPressをインストールして、、ということを行っていたのですが、
「Local by Flywheel」を導入したことでとても気軽にWordPressサイトを作れるようになりました!!導入も簡単なのが本当にありがたい✨

今回は「Local by Flywheel」の使用方法でしたが、実際にお仕事でとある既存サイトをローカルに再現をしたうえで開発を行った、という記事を次回はまとめたいと思います!

contact

お仕事、お見積のご依頼、その他ご相談は下記フォームからお気軽にお問い合わせ下さい。

お名前
メールアドレス
お問い合わせ内容
top