ブログ運営

【STEP1】ローカル環境「Local by Flywheel」のインストール方法!万全にwordpressブログ(サイト)のテーマ変更をする手順は【全7ステップ】

【STEP1】ローカル環境「Local by Flywheel」のインストール方法!万全にwordpressブログ(サイト)のテーマ変更をする手順は【全7ステップ】

wprdpressのブログをテーマ変更したいけど本番環境で新しいテーマを急に有効化させるのはめちゃくちゃ不安ですよね。CSS等をかなりカスタマイズしているなら尚更です。それに、カスタマイズ中のブログをネット上に公開するのもちょっと。。。

「なにか方法はないの??」

ということで、そんな状況のあなたには「自分のパソコン上でテーマ変更したブログを修正してからネット上にアップする方法」がおすすめです!


スポンサーリンク


テーマ変更のために、既存サイトの内容をローカル環境でカスタマイズし、その後本番環境へ移行(元に戻す)するまでの手順を初心者の方にも分かりやすくレポートしていきます。

この記事ではその手順内の、既存サイト(本番環境)のデーターをローカル環境へコピーし、カスタマイズできる状態にするまでの方法を順に解説しています。

 

ばんちゃこ
ばんちゃこ
 無料テーマ「Stinger Plus」から有料テーマ「JIN」へ変更することにしました! 

 

初心者の目線でつまづき易いポイントを踏まえて分かりやすく図解していきます!

使用環境

  • Windows10
  • xserver(エックスサーバー
  • wordpress
  • Local by Flywheel ←今回の作業で必要になる「ローカル環境wordpress」を作成できるソフト
ばんちゃこ
ばんちゃこ
 既存ブログのテーマ変更は今回が初めて!やり方が全く分からない手探り状態から、試行錯誤で一番簡単にできる方法にやっと辿り着けました!!!今回はその手順を紹介していくよ!(*´∇`*)/ 
キラネコ
キラネコ
 いろいろな記事を見あさってたもんニャ(笑) 
ばんちゃこ
ばんちゃこ
うん(笑)人によってちょっとずつ方法や手順も違うから混乱しちゃって「もういいや!」って途中投げ出しそうにもなったけどね! 

 

この手順通りにすれば初心者の方でも悩む事無くテーマ変更ができますよ!

 

まず、今回の作業では普段使っているwordpressと新たに自分のパソコン上で操作するwordpressの二つの環境を作ることになるので、混乱しないために呼び方を決めておきます。

  • 「本番環境」=既にある既存ブログのWordpress環境
  • 「ローカル環境」=自分のパソコン上(ローカル)でのみ扱えるWordpress環境

 

 

本番環境のデーターをローカル環境へコピーし、テーマ変更(カスタマイズ)できる状態にするまでは全7ステップで完了します。

この記事では【STEP1】を解説しています。

 

ばんちゃこ
ばんちゃこ
 手順通りに進めれば1時間半で終了です!(*´∇`*)/ 
キラネコ
キラネコ
 大半はデーター移行の時間だニャン 

 

では、まずはローカル環境を構築するためには欠かせない「Local by Flywheel」ソフトをパソコンへインストールしていきます。動画通りに進めて下さい。

【STEP1】まずはLocal by Flywheelをインストールしてローカル環境を作成!

まず必ず必要になる作業が「Local by Flywheel」ソフトをインストールして、ローカル環境でwordpressを動作させる準備が必要です。

Local by Flywheelのダウンロードはこちらから
https://local.getflywheel.com/

ばんちゃこ
ばんちゃこ
 ローカル環境作成のためのソフトは現時点で「Local by Flywheel」がベストな選択だと思います。

初めは「Instant WP(WordPress)」を使おうとインストールまでしたんですがローカル環境を一つしか作成できない事が分かりました。でも「Local by Flywheel」だとこのソフト一つで複数のブログ(サイト)のローカル環境を作成&管理することができます。「Local by Flywheel」は超優秀! 

 

  1. 「Local by Flywheel」をダウンロード
  2. 「Local by Flywheel」をパソコンへインストール
  3. 「Local by Flywheel」を起動させてローカル環境作成の初期設定

インストール時に私が参考にしたのは寝ログさんの記事です。

 

①②のダウンロードとインストールの手順はググればたくさん検索結果に出てくるので、私は手順を動画で簡単に解説していきます。

 

 

インストールが終わっても、ローカル環境のwordpressにはまだログインできる状態ではありません。ローカル環境を作成するためには初期設定が必要です。


スポンサーリンク

ローカル環境を作成するための初期設定

インストールが終わると 「+CREATE A NEW SITE」 ボタンが表示されるのでクリック

インストールが終わると表示されるボタン 「+CREATE A NEW SITE」 をクリック

 

サイト名を決めます!

この「Local by Flywheel」ソフト上で管理するためのサイト名を半角英数で入力します。 この文字がローカル環境上でのドメインに初期反映されます(ドメインは後で自由に変更可)
※但し、ソフト上で管理するためのサイト名は変更できません

ローカル環境wordpressにログインするとここで入力したサイト名が初期反映されていますが、このサイト名はwordpress内で自由に日本語にも変更できます。

このソフト上で管理するためのサイト名を半角英数で入力

入力が終わったら「CONTINUE」をクリック

 

環境設定の選択

ローカル環境設定を後に変更できるように必ず「Custom」を選択します。
※Preferredを選択すると後の環境設定の変更ができないようです
青枠部分は初期の推奨設定でOKです(ローカル環境から本番環境へデーターを移行する際に決定します)

 

ローカル環境wordpressへのログイン情報を設定

ローカル環境のwordpressへログインするためのユーザー名とパスワードを設定します。メールアドレスは特に使用しないのでそのままでOKです。

この時のユーザー名とパスワードは本番環境で使用している情報を入力します(後に変更する必要がなくなります)

ユーザー名とパスワードは本番環境で使用している情報を入力

入力が終わったら「ADD SITE」をクリック

 

すると「今後Local by Flywheelで環境構築する上で、入力したユーザーネームとパスワードをデフォルトとして利用しますか?」と聞かれるので「NOT NOW」を選択します。
(Local by Flywheelで今後また既存サイトをローカル環境に構築する予定ならこの情報をデフォルトには設定する必要がないので)

 

ローカル環境が完成したかの確認!

これでローカル環境の構築が作成されました!

無事に構築できた完成ページ!「VIEW SITE」をクリックするとブラウザでサイトが表示できます

問題なくローカル環境wordpressが作成されているなら「VIEW SITE」をクリックするとブラウザでサイトが表示できます。

 

キラネコ
キラネコ
 この画面が表示されればOKだニャン 
「VIEW SITE」をクリックするとブラウザで初めて表示されるサイトページ

 

 

ばんちゃこ
ばんちゃこ
 では、ローカル環境のwordpressの管理画面にログインできるのかも確認してみましょう! 

wordpressの管理画面にログイン

「ADMIN」をクリックするとwordpressの管理画面に入るためのログインページが開きます。

「ADMIN」をクリックするとwordpressの管理画面に入るためのログインページが開きます。

 

先ほど設定した本番環境のユーザー名とパスワードを入力して「ログイン」をクリック

 

ちゃんと管理画面が表示されればOKです!

 



wordpress管理画面を日本語表記に変更

管理画面に入るとデフォルトでは英語表記になっているので日本語へ変更しておきます。

①「Settings」
②「General」
③日本語を選択
④「Save Changes」をクリック

 

完了!!!

 

ばんちゃこ
ばんちゃこ
 ここまでの手順でローカル環境の作成は完了! 
キラネコ
キラネコ
 お疲れさまでしたニャン 

 

このままではローカル環境はデフォルトデーターのままです。本番環境(既存サイト)のデーターをコピーしてローカル環境内に既存サイトの複製を作成する必要があります。

その手順は次の記事で解説しています!

あわせて読みたい
【STEP2】エックスサーバーから本番環境のデータベースを取り出す方法~wordpressのテーマ変更をする手順~
【STEP2】エックスサーバーから本番環境のデータベースを取り出す方法~wordpressのテーマ変更をする手順~「Local by Flywheel」ソフトでローカル環境の作成が終わったらエックスサーバーから本番環境のデータベースを取り出してローカル環境へインポートする必要があります。その方法を初心者の方にも分かりやすく図解しています。...

 

ばんちゃこ
ばんちゃこ
追記:このブログ、キラネコ道もJINへ移行することができました!わーい!