見出し画像

【保存版】JimdoからWordPress(Xserver)への移行手順完全マニュアル

「昔ノリでJimdoでサイト作っちゃったからワードプレスに移行したいのにやり方がわからない…」

「ググっても出てくるのはJimdoでドメイン取得した人の話ばかりで参考にならねーじゃねーか!」

と、憤慨してるみなさん。気持ちわかります。どうも、僕です。

上記のコメントは何を隠そう、丸1日かけてググってもJimdo→WordPress(Xserver)への移行方法が分からなかった昨日の僕の心の声です。

どうしても分からなかったのでXserverのサポートに電話して解決方法を聞き出したので、同じ悩みで禿げ上がりそうな同士のみなさまに共有します。

前提となる環境

先に僕の事前の状況をお伝えします。

・Jimdo ProでHPを運営(Jimdoのメールは使用していない)

・独自ドメイン使用(お名前.comで取得)

・Xserverは事前に契約してある

・現在Jimdoで運営しているHPを、ドメインはそのままにWordPressで作り直したい(残念ながらJimdoは今まで作ったコンテンツのエクスポートが出来ない仕様のため、僕は今回WPで作り直すことにしました)

手順①Xserverのサーバーパネルでドメイン設定

まずはXserverのサーバーパネルにログインし、「ドメイン」→「ドメイン設定」に進みます。

スクリーンショット 2020-05-27 13.34.15

ここに今回Jimdoから移行させるドメインを入力し、確認画面へ進みます。

画像2

「追加する」をポチッ。すると設定完了画面↓が出てきます。

画像3

ここで「無料独自SSLの設定に失敗しました」と出てきてドキッ…

心配でXserverのサポートの方に電話して聞いたら、この時点ではまだお名前.comのネームサーバーを設定していなのでSSL設定出来なくて当たり前。なので、ここはスルーして先に進め、SSLは後ほど設定することに。ホッ…

これでとりあえず手順①のドメイン設定は完了です!

手順②XserverにWordPressをインストール

次に早くもWordPressをインストールします。今回はJimdoを解約してWordPressで運営を始めるまでにサイトを閉じずにシームレスに移行する予定なので、この時点ではまだJimdoのサイトが動いている状態ですが先にWordPressを準備します。

Xserverのサーバーパネルから「WordPress」→「WordPress簡単インストール」をポチッ。「WordPressインストール」タブを開きます。

画像4

①サイトURL:今回移行するサイトのドメインを選んでください。

②ブログ名:僕は今回移行するサイトの名前にしましたが、後で変えられるので難しく考えずサクッと記入します。

③ユーザー名:今後WordPressにログインする時に使うので忘れないように

④パスワード:今後WordPressにログインする時に使うので忘れないように

⑤メールアドレス:自分のメールアドレスならなんでもOK

ここまで入力したら「確認画面へ進む」ボタンをポチッします。

画像5

これで手順②WordPressのインストールは無事完了です。

「管理画面URL」は今後WordPressにログインする際のログイン画面になりますのでメモするなりお気に入り登録しておくなりしておきましょう。(ちなみに僕はこの画面自体をスクショして保存しています)

手順③hostsファイル編集

ヤバいですね…聞きなれない名前が出てきましたよ…

Xserverのサポートの方が電話で「hosts」と言っても知らない単語だから聞き取れず「ほすつぅ???」と聞き返したくらい(マジ)

どうやら簡単に言うと、「現在動いているJimdoのサイトとは別でWordPressの環境を作り動作確認するため」に必要なのだそう。知らんけど。

Xserverのマニュアルに手順が書いてあるのでとりあえず貼っておきますね。

上記のマニュアルに従って、とりあえず前半の「動作確認URLを追加して確認する方法」→「5.設定完了」まで進めてください。

すると、約1時間後に反映されて下記のような画面が表示されます。

スクリーンショット 2020-05-27 15.29.11

この「動作確認アドレス」は後で使うので、この画面を消さないよう(もしくはちゃんとメモするよう)ご注意ください。

で、マニュアル後半の山場「hostsファイルを編集して確認する方法」。ここから難しそうな単語も多く素人の僕は手に汗をかきました…

では手順に沿って頑張って進めましょう!

手順3-1. Mac内にあるhostsファイルを探す

まずはhostsファイルを探します。Finderを開き、その上で「shift + command + G」を押すと↓のように「フォルダの場所を入力」が出てくるので、そこに「/private/etc/」と入力します。

スクリーンショット 2020-05-27 15.37.44

そして「hosts」ファイルを見つけたら、いったんデスクトップに移動させます。

スクリーンショット 2020-05-27 15.38.40


手順3-2. hostsファイルに追記する

デスクトップに移動させたら、テキストエディタで開きます。(僕はVisual Studio Codeで開きましたが、テキストエディタなら何でもOKです)

スクリーンショット 2020-05-27 15.48.10

そして最後の行に上記のように「サーバーIPアドレス + (半角スペース) + ドメイン名」を追記します。上記の例では「xxx.xxx.xxx.xxx」がサーバーIPアドレス、「example.com」がドメイン名です。

サーバーIPアドレスは、「サーバーパネル」内の「サーバー情報」にて確認が可能です。

入力が済んだら保存し、デスクトップから最初にあった「/etc」に戻します。これでhostsファイルの編集は終わりです。

(なお、hostsファイルに修正した箇所は後に手順⑥で削除しますが、それはまだ先のお話…)

手順④WordPressでホームページを作る

先ほどの手順③の前半で「消さないでくださいね」と言っていた「動作確認アドレス」を覚えていますか?

スクリーンショット 2020-05-27 15.29.11

この「動作確認アドレス」をクリックすると動作確認用のWordPressが開きます。

スクリーンショット 2020-05-27 16.05.22

そして、アドレスバーに「example.com/wp-admin/」のように、ドメイン/wp-admin/と打ち込むとWordPressのログイン画面に移ります。

スクリーンショット 2020-05-27 16.08.33

ここに手順②で設定したユーザー名とパスワードを入れてログインします。

すると、このように↓WordPressのダッシュボードに入れますので、あとはあなたの思うままにWordPressを作ってください。

スクリーンショット 2020-05-27 16.12.42

ちなみに僕はLocal by Flywheelであらかじめローカル環境でサイトを作り、プラグイン「ALL in one Migration」を使って丸々上記のWordPressに移しました。楽チン。

手順⑤お名前.comのネームサーバーを切り替える

お名前.com Naviログインにログインし、上部のメニュー欄にある「ドメイン」から今回使用するドメインを選びクリックします。すると下記の「ドメイン詳細」ページに移ります。

下の方に「ネームサーバー情報」がありますので、ここで「ネームサーバーの変更」をクリックします。

画像14

下記の「ネームサーバー設定」ページに移り、「2.ネームサーバーの選択」で「その他」タブを選びます。

そして「その他のネームサーバーを使う」欄の「ネームサーバー1」から「ネームサーバー5」までを下記の通り「ns1.xserver.jp」から「ns5.xserver.jp」まで記入します。(もし「ネームサーバー」の枠が1〜3までしか表示されていなかったら、枠の右下にある+マークを押すと枠を増やすことができます)

画像15

そして下部にある確認ボタンを押すと確認画面に。「反映完了までに24〜72時間かかる場合があります」とありますが、基本的には反映完了は24時間後を目安に考えておきましょう。

スクリーンショット 2020-05-27 18.12.39

OKボタンを押すと「完了しました」と表示されます。が、ネームサーバーの変更が完了しただけで、まだ肝心の反映が完了されたわけではないのであわてない、あわてない…

スクリーンショット 2020-05-27 18.13.05

とりあえずこれで手順⑤はおしまいです。

ちなみにネームサーバーが反映されるのは24時間後の予定ですが、反映されたかどうかの確認はどう判断すれば良いかXserverのサポートの方に質問したところ「今回設定したドメインにアクセスしてWordPressで作ったサイトになっていたら無事反映完了」という事だそうです。(逆にそれ以外での確認方法は無いそう)

基本的に反映は24時間後で、それ以上時間が過ぎても反映されないようだったらどこかでミスしてるかもしれないのでその時はXserverのサポートに問い合わせしてくださいとの事でした。(反映が24時間より早まる事はありますか?との質問には「わかりません…」との事でした)

という事なので、ネームサーバーが反映されるまでの間にもう一仕事片付けましょう!

手順⑥hostsファイルの追加部分を削除

手順③3-2でhostsファイルの最後の行にサーバーIPアドレスとドメイン名を追記していましたが、それをネームサーバーが反映されるまでの間に削除しておきましょう。(手順③と同じくデスクトップにhostsファイルを移してテキストエディタで開き削除→「/etc」ディレクトリに戻しておく)

スクリーンショット 2020-05-27 18.27.05

次に、手順④に出てきたXserverサーバーパネルにある「動作確認URL」を削除しておきます。

スクリーンショット 2020-05-27 15.29.11

これでOK。さ〜て、あとはネームサーバーが反映される24時間後を待つか…と思っていたら、思わぬ画面が出てきて焦った話は次章に…

手順⑦XserverでSSL設定をする

ネームサーバーの切り替えをして15時間後くらいにホームページを見てみたらまだJimdoのサイトのままだったのですが、18時間後くらいにもう一度見たら「この接続ではプライバシーが保護されません」と書かれた恐ろしいページが表示されてしまいブルブル震えました…

スクリーンショット 2020-05-28 14.47.44

何コレこわい!という事でXserverのサポートに連絡!すると、「原因はSSL設定をしていないからなのでSSL設定をしてください」との事。どうやらまだ24時間経っていないですが、少し早くXserverへの切り替えが反映されたみたい。という事で、SSL設定を進めていきます。

手順7-1. SSL設定をする

最初は簡単です。Xserverのサーバーパネルの「ドメイン」→「SSL設定」に進みます。

スクリーンショット 2020-05-28 15.10.37

そして「ドメイン選択画面」で今回設定するドメインを選択します。

スクリーンショット 2020-05-28 14.46.37

「SSL設定」で「独自SSL設定追加」タブを選び、対象ドメインを選択して確認画面へ進みます。

スクリーンショット 2020-05-28 14.47.10

サクッと「追加する」ボタンを押すと…

スクリーンショット 2020-05-28 14.47.32

1〜2分で独自SSL設定が追加されました。

スクリーンショット 2020-05-28 14.47.59

「SSL設定一覧」タブを見ると「反映待ち」の状態に。約1時間で反映されるらしいです。

スクリーンショット 2020-05-28 14.48.59

はぁ〜これで無事SSL設定完了……ではありません!まだ作業があるのです!

手順7-2. .htaccess編集

再びサーバーパネルのトップページに戻り、「ホームページ」→「.htaccess編集」に進みます。

スクリーンショット 2020-05-28 14.50.21

「ドメイン選択画面」で対象のドメインを選んだら「.htaccess編集」ページに進みます。いろいろ難しそうな事が書いてあるので、とりあえず右上の「関連マニュアル」の中の「Webサイトの常時SSL化」を開きます。

画像28

この「Webサイトの常時SSL化」マニュアルに書かれている通りに進めていきます。

下記の内容をコピーし、

スクリーンショット 2020-05-28 16.07.03

先ほどの.htaccessの一番上の行にコピペで追記して「確認画面」に進み、そのまま「実行する」をクリックします。

注意!元から書いてあったコードは1文字も消さないように!絶対に!

画像30

これで.htaccessの編集が完了しました。

スクリーンショット 2020-05-28 16.24.53

ちなみに、この段階で試しに今回のドメインにアクセスしてみたら…ついにWordPressで作ったホームページが表示されていました…!やった!

さぁゴールまであと少し!次はWordPress側でSSL設定します!

手順⑧WordPressに常時SSL化設定をする

先ほどの「Webサイトの常時SSL化」マニュアルの続き、後半です。

今度はWordPressのダッシュボードから常時SSL化設定をします。

スクリーンショット 2020-05-28 16.29.12

「example.com/wp-admin/」のように独自ドメインからWordPressのログイン画面にアクセスし、ログインします。

スクリーンショット 2020-05-28 16.36.43

WordPressのダッシュボードの「設定」→「一般」に進みます。

スクリーンショット 2020-05-28 16.41.20

「一般設定」画面の「WordPressアドレス(URL)」と「サイトアドレス(URL)」の2ヶ所のhttpをhttpsに書き換え、変更保存ボタンをクリックします。

スクリーンショット 2020-05-28 16.45.41

するとWordPressのログイン画面に飛びますので、再びログインします。

これで無事SSL化の設定も完了です!ブラウザのキャッシュをクリアしドメインにアクセスして確認してみてください!お疲れさまでした!!!

オマケ①SSL化したのに「保護されてない通信」と表示される場合

あれ……?おかしいぞ、なんでSSL化したのに警告マークが表示されるんだ…?

スクリーンショット 2020-05-28 17.05.28

これはホームページ内に「https」から始まるコンテンツと「http」から始まるコンテンツが混在している状態「Mixed Content(=混在コンテンツ)」が原因だと考えられます。

混在コンテンツをまとめて一気にhttpsに書き換えるには「Really Simple SSL」というプラグインを使います。

スクリーンショット 2020-05-28 17.53.57

有効化したら、サクッと「はい、SSLを有効化します」ボタンをポチ。

スクリーンショット 2020-05-28 17.56.25

スクリーンショット 2020-05-28 17.57.20

これで無事に混在コンテンツが解消!

再びホームページに戻り再読み込みさせればhttps化完了です!

オマケ②Google Analyticsでhttpsの設定

SSL化する以前にGoogle Analyticsを設定していた場合、Google Analyticsでhttpをhttpsに変更します。

下記の通り、Google Analyticsのダッシュボードからプロパティ設定に進み「デフォルトのURL」をhttps://に設定して保存すればOKです。

スクリーンショット 2020-05-28 18.04.27

オマケ③Google Search Consoleの設定

SSL化する以前にGoogle Search Consoleを設定していた場合は、新たに「https://対象のドメイン」で登録する必要があります。

まずGoogle Search Consoleのダッシュボードで「プロパティ追加」をクリックします。

スクリーンショット 2020-05-28 18.22.16

今回僕はサイト全体で計測したいので、左側の「ドメイン」に「example.com」のような形でドメインのみを入力して続行ボタンをクリックします。

スクリーンショット 2020-05-28 18.26.46

そして下記のコピーをクリックし、Xserverに貼り付けます。

スクリーンショット 2020-05-28 18.30.02

Xserverのサーバーパネルにログインし、「ドメイン」→「DNSレコード」と進み、次の画面でドメインを選択します。

スクリーンショット 2020-05-28 18.33.53

ドメインを選択し、「DNSレコード設定」画面に進んだら「DNSレコード」タブを開きます。そして種別を「TXT」に変更し、内容欄に先ほどGoogle Search Consoleでコピーした内容を貼り付けます。で、「確認画面へ進む」→「追加」をクリックすれば完了です。

スクリーンショット 2020-05-28 18.36.34

そして再びGoogle Search Consoleに戻り、確認ボタンをおします。

スクリーンショット 2020-05-28 18.30.02のコピー

「所有権を証明しました」が表示されればGoogle Search Consoleの設定完了です!

スクリーンショット 2020-05-28 18.46.08


終わり

長かった……😭note書きながらだったので丸2日かかりました…

気づいたら6,000文字超えてた…😭

みなさんお疲れさまでした…

もし記事がお役に立てたなら「いいね」でもいただけると嬉しいです…😭


この記事が気に入ったらサポートをしてみませんか?