Win10ローカルPCにWordPressテスト環境を構築→Webサーバーに反映するまでの流れ

この記事は下記に当てはまる方向けに書いています。

ある程度コンテンツ量を多くしてから、WordPressで作成したブログやWebサイトを一般公開したいと考えている方
今後はWordPressだけでなく、PHPやHTML、JavaScriptなどのクライアントサイドの技術、ApacheやMySQLなどのミドルウェアの勉強をしたい方

本記事の主目的はXAMPPのインストール手順や使い方を紹介する記事ではないため、XAMPP関連の詳細は割愛します。

記事の索引

1 ローカル環境での作業
2 Webサーバーを準備する
3 サーバに配置した後のWordPressの確認作業
- 3.1 WordPress管理画面にログイン
- 3.2 WordPressにコンテンツを登録
4 まとめ

ローカル環境での作業

これから説明する箇所はローカル環境内での流れとなります。

XAMPPをインストール

ローカル環境にWebシステムを構築できる超有名な開発環境『XAMPP』がありますので、下記サイトからXAMPPをダウンロードして、お使いのPCにインストールしましょう。

Windows 向け XAMPP
https://www.apachefriends.org/jp/index.html

WordPress用のデータベースを作成

XAMPPの場合は『phpMyAdminでデータベース』を作成します。また、WordPress用のユーザーとパスワードも作成しましょう。

データベース名： test ユーザー名： test パスワード: test

※記事のためにあえてわかりやすい設定値にしています。実際に設定する際は、ローカル環境であってもセキュリティを意識した設定値にしましょう。

WordPressを配置

下記サイトから最新バージョンのWordPressをダウンロードして、『zipファイルを解凍後』、解凍されたフォルダ名を好きな名称に変更して、XAMPPのドキュメントルート配下の任意の場所に配置しましょう。
※今回の記事では[ドキュメントルート]/testという構成にして話を進めます。

WordPress 4.9.1 をダウンロード（2018/01/12時点では4.9.1が最新でした）
https://ja.wordpress.org/download/

WordPressをインストール

『http://localhost/test』でローカル環境のWordPressにアクセスし、「さあ、始めましょう！」をクリックします。

WordPressのインストールに必要な情報を入力して、「送信」をクリックします。
データベース名： test
ユーザー名： test
パスワード: test
データベースのホスト名： localhost
テーブル接頭辞： wp_test_

※記事のためにあえてわかりやすい設定値にしています。実際に設定する際はローカル環境であってもセキュリティを意識した設定値にしましょう。

「インストール実行」をクリックします。

WordPressのインストールに必要な情報を入力して、「WordPress をインストール」をクリックします。

サイトのタイトル：テスト
ユーザー名： test
パスワード： F@HTv)K$EibL@BgUCQ

メールアドレス：メールを受信できるメールアドレス ※個人情報のため、伏せています。

WordPressのインストールが完了しました。

WordPress管理画面にログイン

自分が設定したユーザー名とパスワードでWordPress管理画面にログインしましょう。

WordPressにコンテンツを登録

ローカル環境で導入したプラグインもサーバに反映できるので、試しに僕がよく使っているプラグイン『Advanced Custom Fields』をインストールして有効化します。

ローカル環境でもくもくとコンテンツ登録していきます。

デフォルトのテーマのままですが、こんな感じです。ローカル環境でテーマをどんどんカスタマイズしていきましょう。

WordPress用のデータベーステーブルをエクスポート

ローカル環境のデータベースのテーブルをエクスポートします。
ローカル環境のphpMyAdminにログイン > データベース名（test） > エクスポートをクリックします。
『詳細』にチェックを入れ、テーブルが全選択されていることを確認します。

下記のチェックを外します。
TIMESTAMP のカラムを UTC (協定世界時) でダンプする。(ダンプするサーバと読み込ませるサーバのタイムゾーンが異なる場合に有効です)
※外さないとテーブルに登録されているデータの時間がすべてUTC（日本の9時間前）になってしまいます。
※この部分以外はデフォルトの設定のままで大丈夫です。
「実行」をクリックします。
[データベース名].sql というファイルがダウンロードされます。

ローカル環境のWordPress用のデータベーステーブルをエクスポート説明画像2

Webサーバーを準備する

個々からは公開webサーバーへの導入作業となりますので、WordPressを導入できるWebサーを準備しましょう。

WordPressを導入する為に必要なスペック・機能としては……

PHP バージョン 7.2 以上。
MySQL バージョン 5.6 以上、または MariaDB バージョン 10.0 以上。

といった所です。

昨今は、さくらインターネットや、ロリポップといったリーズナブルな共有サーバーでも上記のスペックを満たしていますので、選定に困る事は無いと思います。

※大丈夫だとは思いますが、WindowsサーバーにWordPressを設置する場合、よほど専門知識が無いと苦戦すると思いますので、その点は御注意ください。また以下については、Windowsサーバーでは無い、という前提で記述しています。

WordPress用のデータベースを作成

恐らくほとんどのレンタルサーバでユーザー名、パスワード、ホスト名は決まっていると思います。データベース作成に必要な情報は下記です。

データベース名
ユーザー名
パスワード
データベースのホスト名

ローカル環境のWordPress用のデータベーステーブルをインポート

前の手順でエクスポートしたローカル環境のWordPress用データベースのテーブルをサーバのphpMyAdminからインポートします。
サーバのphpMyAdminにログイン > データベース > データベース名（サーバで作成したデータベース名） > インポートをクリックします。
インポートするファイル < ファイルを選択にてローカル環境のWordPress用のテーブルファイル（[データベース名].sql）を選択します。
インポートするファイルの形式はSQLにしましょう。
「実行する」をクリックします。

下記のメッセージが表示されればOKです。インポートは正常終了しました。

WordPressを配置

下記フォルダ一式をFFFTPなどのFTPクライアントツールでサーバにアップロードします。ディレクトリ構造はローカルと同じになるようにしましょう。

[ローカル環境 XAMPPのルートディレクトリ]/test

WordPressの設定変更

ローカル環境とサーバ環境でデータベースの設定値が異なるため、[サーバのルートディレクトリ]/test/wp-config.phpの下記をサーバの設定に変更し、サーバにアップロードしましょう。

/** WordPress のためのデータベース名 */define('DB_NAME', '[サーバのデータベース名]'); /** MySQL データベースのユーザー名 */ define('DB_USER', '[サーバのデータベースユーザー名]');  /** MySQL データベースのパスワード */define('DB_PASSWORD', '[サーバのデータベースパスワード]'); /** MySQL のホスト名 */define('DB_HOST', '[サーバのデータベースホスト名]');

WordPressのURLをローカルの設定からサーバの設定に変更

ローカルで構築したWordPressのデータベースはコンテンツ情報の関連付け（どのページの内容かなど）や、メディアファイルの格納場所など、URLとその配下のパスがローカルの情報になっています。

一つ一つを手動で変更するのは大変なので、下記サイトで提供されているスクリプトを使います。
https://github.com/interconnectit/Search-Replace-DB

Clone or download > Download ZIP をクリックします。
Search-Replace-DB-master.zip のファイルがダウンロードされます。
zipファイルを解凍して作成されたSearch-Replace-DB-masterというフォルダ一式を下記にアップロードします。
[サーバのドキュメントルート]/Search-Replace-DB-master
下記URLにアクセスします。
サーバのURL/Search-Replace-DB-master/index.php

search/replace へ下記を入力します。

replace： localhost
with：サーバのホスト名

Database に下記を入力します。

name：サーバのデータベース名
user：サーバのデータベースユーザー名
pass：サーバのデータベースパスワード
host：サーバのデータベースホスト名
port：サーバのデータベースポート番号

tales のall tablesにチェックが入っていることを確認します。
actions のupdate detailsをクリックします。
ツールがサーバのデータベースに接続されます。
dry run をクリックし、意図した置換が行われるかを確認します。
この段階ではまだURLの書き換えは行われません。
live run をクリックし、置換を実行します。
この時点でURLの書き換えが行われます。
dry run の結果とlive run の結果が同じであればOKです。
セキュリティのため、Search-Replace-DB-masterはサーバ上から削除しましょう。