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

sirent-shy アイコン

sirent-shy

/ 更新:

当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。

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

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

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

【Hulu | Disney+ セットプラン(フール― | ディズニー)】

ローカル環境での作業

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

XAMPPをインストール

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

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

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

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

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

WordPressを配置

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

WordPressをインストール

  1. 『http://localhost/test』でローカル環境のWordPressにアクセスし、「さあ、始めましょう!」をクリックします。
WordPressをインストール手順説明画像1
  1. WordPressのインストールに必要な情報を入力して、「送信」をクリックします。
    データベース名: test
    ユーザー名: test
    パスワード: test
    データベースのホスト名: localhost
    テーブル接頭辞: wp_test_

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

WordPressをインストール手順説明画像2
  1. 「インストール実行」をクリックします。
WordPressをインストール手順説明画像3
  1. WordPressのインストールに必要な情報を入力して、「WordPress をインストール」をクリックします。
サイトのタイトル: テスト
ユーザー名: test
パスワード: F@HTv)K$EibL@BgUCQ

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

WordPressをインストール手順説明画像4
  1. WordPressのインストールが完了しました。
WordPressをインストール手順説明画像5

WordPress管理画面にログイン

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

WordPressにコンテンツを登録

  1. ローカル環境で導入したプラグインもサーバに反映できるので、試しに僕がよく使っているプラグイン『Advanced Custom Fields』をインストールして有効化します。
WordPressにコンテンツ登録する説明画像1
  1. ローカル環境でもくもくとコンテンツ登録していきます。
WordPressにコンテンツ登録する説明画像2
  1. デフォルトのテーマのままですが、こんな感じです。ローカル環境でテーマをどんどんカスタマイズしていきましょう。
WordPressにコンテンツ登録する説明画像3

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

  1. ローカル環境のデータベースのテーブルをエクスポートします。
  2. ローカル環境のphpMyAdminにログイン > データベース名(test) > エクスポートをクリックします。
  3. 『詳細』にチェックを入れ、テーブルが全選択されていることを確認します。
ローカル環境のWordPress用のデータベーステーブルをエクスポート説明画像1
  1. 下記のチェックを外します。
    TIMESTAMP のカラムを UTC (協定世界時) でダンプする。(ダンプするサーバと読み込ませるサーバのタイムゾーンが異なる場合に有効です)
    ※外さないとテーブルに登録されているデータの時間がすべてUTC(日本の9時間前)になってしまいます。
    ※この部分以外はデフォルトの設定のままで大丈夫です。
  2. 「実行」をクリックします。
    [データベース名].sql というファイルがダウンロードされます。
ローカル環境のWordPress用のデータベーステーブルをエクスポート説明画像2

Webサーバーを準備する

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

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

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

といった所です。

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

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

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

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

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

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

  1. 前の手順でエクスポートしたローカル環境のWordPress用データベースのテーブルをサーバのphpMyAdminからインポートします。
  2. サーバのphpMyAdminにログイン > データベース > データベース名(サーバで作成したデータベース名) > インポート をクリックします。
  3. インポートするファイル < ファイルを選択 にてローカル環境のWordPress用のテーブルファイル([データベース名].sql)を選択します。
    インポートするファイルの形式 はSQLにしましょう。
  4. 「実行する」をクリックします。
ローカル環境のWordPress用のデータベーステーブルをインポート説明画像1
  1. 下記のメッセージが表示されればOKです。インポートは正常終了しました。
ローカル環境のWordPress用のデータベーステーブルをインポート説明画像2

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

  1. Clone or download > Download ZIP をクリックします。
  2. Search-Replace-DB-master.zip のファイルがダウンロードされます。
  3. zipファイルを解凍して作成されたSearch-Replace-DB-masterというフォルダ一式を下記にアップロードします。
  4. [サーバのドキュメントルート]/Search-Replace-DB-master
  5. 下記URLにアクセスします。
    サーバのURL/Search-Replace-DB-master/index.php
URLをローカルの設定からサーバの設定に変更説明画像1
  1. search/replace へ下記を入力します。
replace: localhost
with: サーバのホスト名
  1. Database に下記を入力します。
name: サーバのデータベース名
user: サーバのデータベースユーザー名
pass: サーバのデータベースパスワード
host: サーバのデータベースホスト名
port: サーバのデータベース ポート番号
  1. tales のall tablesにチェックが入っていることを確認します。
  2. actions のupdate detailsをクリックします。
    ツールがサーバのデータベースに接続されます。
  3. dry run をクリックし、意図した置換が行われるかを確認します。
    この段階ではまだURLの書き換えは行われません。
  4. live run をクリックし、置換を実行します。
    この時点でURLの書き換えが行われます。
  5. dry run の結果とlive run の結果が同じであればOKです。
    セキュリティのため、Search-Replace-DB-masterはサーバ上から削除しましょう。

サーバに配置した後のWordPressの確認作業

WordPress管理画面にログイン

  1. [サーバのURL]/test/wp-login.php にアクセスしましょう。
WordPress管理画面
  1. 管理画面にログインできること、URLがサーバのURLであることが確認できればOKです。
WordPressログイン後の画面

WordPressにコンテンツを登録

  1. サーバに移行したWordPress管理画面が正しく動作するか確認しましょう。
WordPressにコンテンツを登録説明画像1
  1. サーバで登録したコンテンツがサイトの表示で確認できました。
WordPressにコンテンツを登録説明画像2

まとめ

いかがでしたでしょうか。いざWordPressでWebサイトやブログを作ろうと思っても、仕事が忙しかったりして中々コンテンツ更新ができないこともあるでしょう。

コンテンツが少ないサイトはアクセス数も稼げないでしょうし、レンタルサーバを借りてサーバ上のWordPressでコンテンツ更新できなければ、月々無駄にレンタルサーバ代やドメイン代がかかってしまいます。

そんなとき、ローカル環境でWordPressを構築して、コンテンツ更新、ページのカスタマイズをしっかりしてから、サーバにアップして公開すれば、幸先のよいスタートが切れることでしょう。また、ローカル環境に『XAMPP』を用意しておけば、自由に何でもありな開発ができます。

本記事が皆様の素敵なWordPressライフにつながることを祈っております。

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

sirent-shy アイコン

sirent-shy

webプログラマー 普段は木のような男だが、ロックンロールがもたらすポップコーンのようなハイテンションに魅せられている。自身のチャームポイントであるヒゲについて「小顔効果がある」ことを公言しているが、あまり賛同を得られていない。 朝、ピンク・レディーの『渚のシンドバッド』をききながらジョギングすることがルーティンワーク。

関連する記事



page top