WordPressのテスト環境をローカルPC上に構築する(初期設定から構築)

どうも！じゃぶじゃぶ（@jbjbgame）です。

WordPressの勉強を兼ねて、いろいろ自分のパソコン上でいじるためにテスト環境を構築してみました。

環境構築するにあたって、ゼロの状態から初期設定をする方法と既存の環境からコピーして構築する2通りの方法で試しました。

今回は①初期設定から構築する手順をまとめたのでご紹介します。

テスト環境を作るメリット

環境構築する前にテスト環境を作るメリットに軽くふれます。

テーマ、プログラムの事前検証

既存のテーマをそのまま利用している方にはあまり関係ないかもしれませんが、自分好みにカスタマイズしたい方にはテスト環境は必ず作っておくべきです。

PHPやJavascript、CSSに手を加える際は特に一旦テスト環境で動作を試して、問題なければ本番環境に反映させる、という手順をふむことで安全に運用が可能です。

本番環境（Web上に公開しているブログ）にそのまま手を加えるのはリスクが高く、仮にエラーが発生した場合は最悪ブログが表示されなくなる恐れもあるので、直接本番環境をいじるのはやめましょう。

バックアップとして利用

ローカルのテスト環境はバックアップの意味合いとしても利用できます。

本番環境が乗っているサーバが何かの問題で消えてしまった時、ブログを復元する際にバックアップがあると助かります。

改修途中のテスト環境のソースだとバックアップとして使えるかぁ。。。？という疑問もありますが、無いよりは全然マシ。バックアップは多く取っておくことにこしたことはありません。

テスト環境構築に必要なもの

XAMPPの利用

まず、WordPressのテスト環境を構築する上で最低限必要なものがあります。

上記の3つをローカルPCにセットアップしなければなりません。

一つ一つをダウンロード⇒インストールするのが面倒だなぁ？という時に便利なのが「XAMPP（ザンプ）」です。

XAMPPはWEBシステムに必要な一通りのアプリケーションがパッケージされたツールです。

上図で示したように、XAMPPの名称はパッケージされたアプリケーションの頭文字で構成されています。

「M（MariaDB）」はフリーで使えるデータベースの代表格、MySQLのWeb版みたいなやつです。

「X（クロスプラットフォーム）」はWindowsやMac、Linuxなど多岐のプラットフォームで利用できることを意味している、、、だったかなぁ💦。

XAMPPのインストール

まずはXAMPPをインストールするところから始めます。

まずはココのサイトにアクセスして、XAMPPの最新版をダウンロードしてください。

[https://www.apachefriends.org/jp/index.html]

お使いのPCがWindowsなら「Windows向け XAMPP8.0.12」をクリックすると、XAMPPのインストローラーがダウンロードされます。

「xampp-windows-x64-8.0.12-0-VS16-installer.exe」というファイルがダウロードできたと思います。

2021/11/23時点の最新の安定版は「XAMPP 8.0.12」を使用します。パッケージされているアプリケーションのバージョンは以下の通りです。

インストローラーをダブルクリックしてください。

お使いのPCによっては以下のようなポップアップ画面が表示されます。

ウイルス対策を使っていることでXAMPPのインストールが干渉される恐れがることと、管理者権限が無いためXAMPPの機能を最大限活かせないという警告です。

自己責任の下、「Yes」ボタンクリック後に、続けて「OK」ボタンをクリックしてください。

「Next >」をクリックしてください。

再度「Next ＞」をクリックしてください。

XAMPPのインストール先を指定します。特に問題なければデフォルトの「C:¥xampp」で構いません。

自分の場合はDドライブにしたかったので、「D:¥app¥xampp」に変更しました。

問題なければ「Next ＞」をクリックしてください。

言語の選択画面に移ります。ここでは「English」を選択して、「Next ＞」をクリックしてください。

「Learn more about Bitnami for XAMPP」にチェックを入れて、「Next ＞」をクリックします。

「Next ＞」をクリックするとインストールが開始されます。

最後に「Finish」をクリックすれば、XAMPPのインストールは完了です！！

XAMAPPは以下のコントロールパネルを使って利用します。

縦にXAMPPにパッケージされているアプリケーションが並んでおり、矢印で示している「Start」ボタンをクリックして起動させます。

上図はApache（Webサーバ）を起動している様子になります。

WordPressのインストール

WordPressの日本語版のホームページにアクセスして、WordPressをダウンロードします。

WordPressはココからダウンロードしてください。

[https://ja.wordpress.org/]

上図の「WordPressを入手」をクリックしてダウンロードページに進み、「WordPress 5.8.2 をダウンロード」をクリックするとダウンロードが開始されます。

正常に「wordpress-5.8.2-ja.zip」というファイルがダウロードできました！圧縮ファイルを解凍してください。

解答されたwordpressフォルダを丸ごと切り取って「C:¥xampp¥htdocs」に移動させてください。

ここで一旦、WordPressの動作検証をしてみます。

上図のようにXAMPPのコントロールパネルを起ち上げ、Apacheの「Start」ボタンをクリックして起動してください。

続いて、ブラウザに「http://localhost/wordpress/」と打ち込んでみてください。

上図のような画面が表示されたら、ApacheとWordPressが正常に設定されていることになります。

WordPressのセットアップ（①.初期設定）

データベースの作成

WordPress用のデータベースを作成します。

XAMPPのコントロールパネルから、ApacheとMySQLの「Start」ボタンをクリックして起動させてください。

さらに、MySQLの欄にある「Admin」をクリックしてください。クリックすることで「MySQLAdmin」というツールが立ち上がります。

「MySQLAdmin」はデータベースをUI操作で、DB・テーブルの作成やデータの登録/更新/削除が可能なWebアプリケーションです。

上部のメニューにある「データベース」タブをクリックして、データベース名に「wordpress」、プルダウンメニューを「utf8_general_ci」を選択して「作成」ボタンをクリックしてください。

「データベース wordpress を作成しました。」というメッセージが表示され、データベース一覧に「wordpress」が表示されたら、データベース作成は成功です。

WordPressの初期設定

ブラウザから「http://localhost/wordpress/」にアクセスしてください。

「さぁ。始めましょう！」ボタンをクリックします。

上図のように設定していきます。

必要情報が入力出来たら「送信」をクリックしてください。

「インストール実行」をクリックしてください。

サイト情報設定

上図のようにサイト情報を記入してください。

記入し終わったら、最後に「WordPressをインストール」をクリックしてください。

上図の画面が表示されたら、WordPressの初期設定が完了です！！！

ログインボタンをクリックしてみましょう。

管理画面にログインしてみます。

正常に管理画面にログインできました。

ブログ画面も問題なさそうです。

設定手順以上になります。

WordPressのセットアップ（②.本番環境からコピー）

以下を参照ください。

かなりボリュームが多く、専門的な内容になってしまって恐縮です。。。m(_ _)m