【現在2000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

11. 開発したWordPressサイトを本番環境に移行する

11. 開発したWordPressサイトを本番環境に移行する

こんにちは!フリーランスエンジニア兼ディレクターのショーヘー(@showheyohtaki)です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

10. WordPressでショートコードを自作する【Gutenberg対応】

11thステップであるこの記事では、開発したWordPressサイトを本番環境に移行する手順を解説していきます。

 

0. WordPressテーマの移行に必要なものとは?

これまでローカル環境で開発を進めてきた『TF30』を、本番環境(サーバー上)に移行させてみましょう!

クライアントのサイトを開発する場合も、今回のようにローカル環境で開発してから本番環境にリリースするので、しっかり手順を抑えておいてください。

(正確には、ローカル環境で開発→テスト環境にリリース→クライアントと確認作業→OKが出たら本番環境にリリース、と2回移行作業が入ることが多いです。)

それでは、さっそく移行作業に入っていきますが、その前に移行が必要なデータはどれなのかを確認しておきます。

詳しくはWordPress公式リファレンスやWordPressの教科書を読んで、体系立てて理解してほしいんですが、移行に必要なものは以下の4つです。

WordPressの移行に必要なもの

  1. themesフォルダ(テーマが入ってる)
  2. pluginsフォルダ(インストールしたプラグインが入ってる)
  3. uploadsフォルダ(アップロードした画像類が入ってる)
  4. データベースのSQLダンプ(投稿データやユーザーデータなど、諸々を紐付けるデータ)

1~3はwp-contentフォルダの中にあり、4はデータベース内(ここまで手順通りに進められた方は、ローカルのMySQLの中)に保存されています。

本番にWordPress環境を整えた後、SSHやFTPを使ってこれらを移行させるのが基本的な移行手順になるんですが、現在は簡単にサイト移行できるプラグインがありますので、この記事ではそちらの方法を紹介します。

本番環境として利用するサーバーはXserverを想定して解説していきますので、自分でサーバーを持ってない方は契約しておきましょう!

この機会に、学習過程をブログで発信し始めるのもいいと思います。

Xserverのメリットや契約の手順はこちらの記事で詳しく解説してますのでどうぞ。

 

1. サーバーにWordPressをインストールする

それでは、さっそく移行作業を始めるため、サーバー上にWordPressをインストールしていきましょう。

Xserverであれば、WordPressを動かすためのLAMP環境は最初から揃っていますし、インストールもボタン1つでできるので簡単です。

まず管理画面の左下、『WordPress簡単インストール』をクリックしてください。

(空きドメインがない方は、この作業の前にサブドメインを作ってくださいね!そちらにWordPressをインストールします)

クリックしたら『WordPressインストール』というタブを開き、インストールしたい対象ドメインを選択して、上から順に情報を入力していくだけです。

確認ボタンを押すと、インストール完了。

3分かからずWordPressのインストールが完了したかと思います👍

このまますぐプラグインの説明に移ってもいいんですが、その前に少しだけデータベースの利用の仕方を解説しておきます。

インストール完了画面の『MySQLデータベース』に書いてある情報をエディタにコピーしておいてください。

 

2. WordPressとデータベースの関係性と編集手順

最近は便利なプラグインがたくさんあるので、WordPressを使ったWeb制作においてデータベースを触る機会は減りました。

ですが、WordPressを使っておきながら『データベースって何?』『プラグインを使わない正規の移行方法ってどうやるの?』というフリーランスをちらほら見かけます。

それは流石にレベル低すぎ…😔それで仕事を請け負ってて本当に大丈夫かな…と心配になります。。

せめてWordPressのデータがどのように保存されているのか、どこから編集できるのかくらいは知っておきましょう。

 

Xserver上でデータベースの中身を見るには、『データベース』の『phpmyadmin』を開きます。

pypmyadminとは、ブラウザ上でMySQLの操作ができるツールのことで、Xserverではデフォルトでこのツールが準備されています。

phpmyadminをクリックすると、ユーザーとパスワードを要求されますので、先ほどエディタにコピーしたMySQLユーザー名MySQLパスワードを入力してください。

ログイン後、データベース名をクリックすると、簡単インストール時に作られたWordPressのテーブル一覧が表示されたはずです。

これまで記事データをデータベースに入力したり、データベースから取得したり、そんな記述を書いた覚えはないですよね。

ですが、実はWordPressのコアファイルの中で、データの種類ごとに各テーブルへの振り分ける処理が記述されており、これらのテーブルからデータを出し入れすることで、WordPressは動作しています。

本来、テーブル設計からデータの受け渡し処理まで、全てを自分で作らなければいけないところ、WordPressのコアファイルが肩代わりしてくれいるというわけです。

こうして背景を知っていくと、WordPressがいかに便利かよく分かると思います。

 

それでは、ざっくりphpmyadminで重要な機能とテーブルの紹介をしていきます。

データベース内のダンプを取りたい(全データを抜き出したい)場合は、『エクスポート』で一括取得できます。

逆にデータを一括入力したい場合は、『インポート』です。

正規手順でWordPressを移行する場合は、このインポートとエクスポートを使います。

WordPressの正規以降手順

  1. 移行元のデータベースのダンプをエクスポートする(phpmyadminやSSHを使う)
  2. themes・plugins・uploadsフォルダを移行元から取得する(FTPやSSHを使う)
  3. SQL内のURLを移行元のドメインから移行先のドメインへ全置換する
  4. 移行先のWordPressにthemesフォルダ達を移行する(FTPやSSHを使う)
  5. 移行先のデータベースに編集したダンプファイルをインポートする(phpmyadminやSSHを使う)

こんな流れです。

これ以上詳しい解説は省きますが、ぜひ失敗しても困らないローカル環境とテスト環境で1度は練習しておくことをオススメします。

 

少し脱線しましたが、phpmyadminの解説に戻りますね。

WordPressの投稿系データは『wp_posts』テーブルに入っています。

これまで何気なく使ってた『$post->ID』などの記述は、このようにテーブルに保存されたデータを取得して表示させていたんです。

WordPressの管理ユーザー情報は、『wp_users』に入っています。

ここに保存されたユーザーID、ユーザーパスワードと照らし合わせて、一致していたら管理画面にログインできる、というわけです。

また、SQL文を直に書いてデータベースを操作したい場合は、タブの『SQL』から入力できます。

Progateでselectやwhereの使い方を学びましたよね。

WordPressのリレーションはなかなかに複雑で奥深いので、ヒマな時に、壊れてもいいローカル環境で、リファレンスを読みながらデータを操作してみると理解が深まります。

 

3. サイト移行用プラグイン『All-in-One WP Migration』をインストールする

正規の移行手順とテーブルの仕組みが分かったところで、もっと簡単な方法でサイト移行しますw

All-in-One WP Migrationを、ローカル環境と本番環境のそれぞれにインストールしてください。

インストールして有効化すると、サイドバーに『All-in-One WP Migration』が追加されましたよね。

ローカル環境側ではサイトを抽出したいので、『エクスポート > ファイル』を選択します。

するとダウンロード準備ができますので、このファイルをダウンロードしてください。

 

次に、本番環境の管理画面に移り、今度はサイトを注入したいので、『インポート > ファイル』を選択します。

そして、先ほどローカル環境からエクスポートしたファイルを選択してください。インポートが始まります。

インポートが完了したら、以下のような確認画面が表示されますので、『開始』をクリックします。

これで注意書きの通り、データベース、メディア(uploadsフォルダ)、プラグイン(pluginsフォルダ)、テーマ(themesフォルダ)の、サイト移行に必要な4つ全てが一括でインポートされます。

一度でも正規の手順でサイト移行したことがある方は、この手軽さに感動するはずです。

もちろん、テスト環境→本番環境にも使えますし、クライアントから『サーバー移行したい』と相談された時にも使えます。

本当は教えたくないプラグインTOP5に入りますね…w

ちなみにサーバー環境→サーバー環境限定ではありますが、Xserverには『WordPress簡単以降』という機能が標準で付いており、移行元のURLと移行先のURL入力するだけでサイト移行できます

Xserver便利すぎる…!

 

演習課題:ユーザーのログインID・パスワード・メールアドレスをpypmyadminを使って変更する

こしば
昔WordPressでサイト作ったんだけど、IDもパスワードも忘れてしまって…。パスワードリセットしようにも、メールアドレスも変わってて、どうやっても管理画面に入れない…。

といったクライアントがた〜まにいらっしゃいます。All in One WP Migrationではどうにもできない。

こんなケースを想定して、データベースのユーザーデータを書き換えてログインする練習をしておきましょう。

珍しいケースとはいえ、全くない案件ではないので、phpmyadminを使ってユーザーデータを書き換える練習をしておきましょう!

書き換え条件

まずデータが壊れても戻せるように、エクスポートでデータベースのバックアップをとってください。

(1回で上手くいかなくても、バックアップしたデータをインポートすれば元に戻せます。)

そのあと、updateするSQLを記述してユーザーデータを上書きしてみましょう!

Progateで学んだSQLの復習ですね。

これで、WPにログインできなくなったクライアントから相談されても安心ですね👍

それでは、お疲れ様でした☺️

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

WordPressカテゴリの最新記事