デザイン

wordpress既存サイトを入れ替え。ローカル環境で作業を進める方法【簡単】

WordPressリニューアル予定サイトをローカルで編集作業する方法
相談者
相談者

既存のWordPressサイトのリニューアルしたいけど、現行サイトを運用しながら手元のパソコンで新サイトを編集していきたい。

どういう方法で進めていけばいいんだろう?

ねこ先生
ねこ先生

「LOCAL」アプリと「All-in-One WP Migration」を使えば簡単にできるにゃー

 

既存WordPressサイトのリニューアル。

現行のサイトを動かしながら、今のサイトテンプレートを大きく変えたページに改修したい。

サイトを大きく変える事になるから、一旦ローカル環境にサイトデータを移して編集を進めたい。

ただ、やりかたがよく分からないし、WEBサイトデータとデータベースを手元のパソコンに移すのは何だか難しそうだし、誤ってデータを壊したくはないし、手間がかかりそう…。

そんな状況におちいっていませんか?

 

そんな方は「LOCAL」アプリとプラグイン「All-in-One WP Migration」を使ってみてください。

簡単に手元のパソコンに既存のワードプレスサイトのデーターを一旦移行する事ができます。

 

WordPressサイトをローカル環境で作業を進めるテスト環境を構築する為に、XAMPPやMAMPを使って進めていく方法もありますが、各設定だったり、データーベースの内容をエクスポートした後に、一部書き換えが必要だったりと少し大変な作業になります。

僕自身もWordPressサイトの改修の際に、MAMP等を使用してローカル環境を構築して進めた事もあったのですが、なかなか面倒&何かの手違いでデータベースを壊してしまったら大変という事もあり、もっと簡単で正確にデータを移行できる方法を探したりしていました。

今のところ僕の中ではこの方法が一番楽で、ヒューマンエラーなく進める事ができる方法です。

 

本記事では「LOCAL」アプリとプラグイン「All-in-One WP Migration」を使い、既存ワードプレスサイトをローカルで編集・テストできる環境を構築する方法をご紹介しています。

初心者や手っ取り早く既存のWordPressサイトを手元のパソコンに移して編集をはじめたい!という方は、是非本記事を参考にしてみてください。

ワードプレスのリニューアルサイトをローカル環境に移行して、編集・テスト環境を作る方法

LOCALアプリのダウンロードとインストール

localアプリのダウンロード

まず、WordPressを手元のパソコンで編集できる環境をつくる為に「LOCAL」アプリのダウンロードし設定します。

ダウンロード、設定方法は下記記事で解説していますので、まだお持ちでない方は下記記事を参考にアプリをインストールしてみてください。

WordPressサイト制作を簡単にするローカル制作アプリの導入方法
WordPressサイト制作を簡単にするローカル制作アプリの導入方法【初心者向け】WordPressでWEBサイトを作るため、自身のパソコンでの制作環境設定を簡単に済ませたいですか?WordPress制作の為の難しい環境設定をしなくても、誰でも簡単にはじめる事ができるlocalアプリの使用方法を解説しています。WordPressホームページ制作の最初でつまづいて前に進まないという方は、是非参考に記事をご覧ください。...

【Local by Flywheel公式サイト】

URL:https://localwp.com/

 

LOCALアプリにデータをインポートする為の仮サイト作成

LOCALで仮サイト作成

インストールしたLOCALアプリに、現行のWEBサイトを移行してくる為の仮サイトを設置していきます。

 

本番サーバー環境に合わせて設定をカスタム

本番サーバー環境に合わせて設定をカスタム

PHPバージョン、WEBサーバーバージョン、データベースの環境を、公開予定の本番環境に合わせて調整します。

 

仮のユーザーネーム、パスワードを設定

仮のユーザーネーム、パスワードを設定

仮のワードプレスサイトのユーザー名、パスワード、メールアドレスを設定します。

なお、ユーザーネーム、パスワードは現行のサイトをインストールすると上書きされます。

 

仮ワードプレスサイトの設置完了

仮ワードプレスサイトの設置完了

仮のワードプレスサイトの設置が完了しました。

こちらの仮サイトに現行サイトのデータをインポートする事で、ローカル環境で既存のサイトを編集していける様にしていきます。

 

現行サイトにWordPressのプラグイン「All-in-One WP Migration」をインストールしデータをダウンロード

現行サイトにWordPressのプラグイン「All-in-One WP Migration」をインストール

編集元となる現行サイトにログインし、ワードプレスのデータ移行プラグイン「All-in-One WP Migration」をインストールし有効化します。

「wp migration」などで検索をかければヒットします。

 

「All-in-One WP Migration」からファイルをエクスポート

All-in-One WP Migrationからサイトをエクスポート

All-in-One WP Migrationを有効化すると、ワードプレスのサイドナビゲーションに新たにAll-in-One WP Migrationの項目が表示されます。

表示されたナビゲーションからエクスポートを選択します。

 

「ファイル」をエクスポート

All-in-One WP Migrationからサイトをエクスポート

ずらっと表示されるエクスポート先から「ファイル」を選択します。

 

準備ができたらダウンロード

ファイルを選択ししばらくするとダウンロードのポップアップが表示されるので、ダウンロードボタンよりデータをダウンロードします。

 

LOCALに作成した仮サイトにデータをインポート

現行サイトからデータのダウンロードが完了したら、前項目で作成したLOCALの仮ワードプレスサイトにログインします。

仮サイトにもワードプレスプラグイン「All-in-One WP Migration」をインストールして有効化しておきます。

 

All-in-One WP Migrationを使ってデータをインポート

All-in-One WP Migrationを使ってデータをインポート

仮サイトのAll-in-One WP Migrationを有効化が完了したら、「インポート」から「ファイル」を選択し、前項目で現行サイトからダウンロードしたデータをインポートします。

 

仮サイトのデータをインポートデータで上書きする

データベース、メディア、プラグイン、テーマのサイトデータが上書きされるといった内容のポップアップが表示されます。

仮サイトなので上書きされても問題はないので「開始」をクリックします。

 

仮サイトに現行サイトのインポート完了!

仮サイトに現行サイトのインポート完了!

しばらくすると「サイトをインポートしました」とのポップアップが表示されます。

これで現行ワードプレスサイトを手元のパソコンのローカル環境にインポート完了です!

 

ローカル環境に移行したワードプレスサイトにログインして最終確認

ローカル環境に移行したワードプレスサイトにログインして最終確認

データのインポートが完了したら、LOCALより立ち上げている先程まで仮サイトだったワードプレスサイトに、再度ログインを促されます。

再ログインの際は現行の移行元だったワードプレスサイトのユーザーネームとパスワードを入力してログインします。

仮サイトのパスワードではないので注意してください。

サイトにログインして管理画面を確認し、仮サイトだったものが現行サイトの内容に置き換わっていればデータ移行完了です!

 

WorsPressテスト環境を簡単に構築する備忘録として

WorsPressテスト環境を簡単に構築する備忘録として

「Local by Flywheel」と「All-in-One WP Migration」を使った、現行WordPressサイトをローカルでテスト環境を構築して編集していく手順のご紹介でした。

WordPressサイトの移行やリニューアルが必要になった際の備忘録としてご活用いただけたら幸いです。

 

WordPressサイト制作を簡単にするローカル制作アプリの導入方法
WordPressサイト制作を簡単にするローカル制作アプリの導入方法【初心者向け】WordPressでWEBサイトを作るため、自身のパソコンでの制作環境設定を簡単に済ませたいですか?WordPress制作の為の難しい環境設定をしなくても、誰でも簡単にはじめる事ができるlocalアプリの使用方法を解説しています。WordPressホームページ制作の最初でつまづいて前に進まないという方は、是非参考に記事をご覧ください。...
【無料】プログラミングなんて自分にできるの?一番簡単に最短でスキルを身に着ける方法。
相談者
相談者

「Webデザインやプログラミングに興味はあるんだけど、本を読んでてもちんぷんかんぷんでできる気がしない…。」

ねこ先生
ねこ先生
最初はプログラミングスクールの力を借りるのも1つの選択肢だよ。

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

僕もそうでしたが、Webデザインやプログラミングは、最初の基礎を身につけるまでが本当に一番大変です

ただ、キチンとした基礎を身につける事ができれば、あとは独学でも様々な言語に手を広げていく事ができます

今の時代、YoutubeやWebに無料の有益な情報もたくさんあるので、しっかりとした目標を見定めて勉強すれば独学も不可能ではないです。
ただ、ネットは有益な情報もあれば微妙な情報も混在しているので、どうしても回り道になったり独特なやり方が身についてしまったり、といったデメリットもあります。

僕も最初は独学でプログラミングスキルを身につけようとして何度も挫折してきました。

もし独学で苦戦しているなら、最初はスクールの力を借りるのも1つの選択肢です。

「最短でプログラミングスキルを身に付けたい。」
「間違いのない、しっかりとしたプログラミングの基礎を勉強したい。」
「一緒に切磋琢磨できるプログラミング仲間が欲しい。」
「スキルを活かした場所や時間にとらわれない新しい時代の生き方をしたい。」

そういった方は、実績のあるオンラインスクールを一度無料体験してみることをオススメします。

プログラミングのオンラインスクールも探せば色々選択肢があります。

その中でも圧倒的な知名度を誇るTechAcademyは、日本e-Learning大賞プログラミング教育特別部門賞の受賞実績があり、今なら無料体験コースがあります。

無料コースを試してみてやめるもよしですし、手応えを感じれば、まずはその勢いで基礎を固める事を目指してみるのもアリです。
まずは1つの言語の基礎をしっかり身に着ける事ができれば、様々なプログラミング言語の習得の難易度も一気に下がります。

スキルは奪われないし裏切りません。
その中でもプログラミングスキルは将来に希望もあり、単純にできる様になるととっても楽しい上に、人生の助けにもなります。

登録は5分もあれば十分できます。独学で行きづまったり、モチベーションが保てず挫折した経験のある方は、とりあえずTechAcademyの無料で学習できるチャンスを活用してみることをオススメします。

無料体験コース開催中!オンラインプログラミングスクール「TechAcademy」

 

関連記事