XAMPPでローカル環境にWordPressを構築しサーバーにアップするまでの手順

2021年あけましておめでとうございます。

昨年は自身が勤める法人のコーポレートサイトを静的サイトからWordPressサイトへリニューアルさせるという仕事をやってのけました。

作成したWordPressテーマはいろいろ工夫した点がありましたので、それをこのブログでまとめたいと思うのですが、実際に運用しているサイトを公開するのは生々しい。

そこでデモサイトをつくって公開しようと考えたのですが、せっかくなら仮想環境であるXAMPPでつくってそれをサーバーに移行するという手順も勉強しようと思いやってみました。

XAMPPにWordPressの環境を構築し、その上でページを作成したりテーマを編集し、それをウェブサーバーに移行するという作業になります。

XAMPPにWordPress環境を構築

XAMPPを使ってWordPressローカル環境を構築する全手順

サイトの改修やWordPressのテーマ作成の為に、XAMPPを使ってWordPressのローカル環境を構築したいとお考えだろう。 現在も多くのサイトでこの「XAMPPを使ったWordPressローカル環境の構築方法」が紹介されているが、実

lucy.ne.jp

こちらの記事を参考にしました。ここでは手順を簡単になぞるだけなので、詳細な解説は上記サイトをご覧ください。

XAMPPをインストール

XAMPP Installers and Downloads for Apache Friends

XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl.

www.apachefriends.org

XAMPPのインストーラーをダウンロードし起動。

WordPressに必要なデータは

• Apache
• MySQL
• PHP
• phpMyAdmin

この４つをチェックし進めます。

インストール先はデフォルトのままCドライブの下にします。わかれば任意の場所でもOK。

Bitnamiのチェックを外してインストール開始。

もしファイアウォールについてダイアログが表示されたらプライベートネットワークのみにチェックを入れます。

セキュリティ設定

Control Panelより、ApacheとMySQLをスタート。

MySQLにパスワードを設定するために、Shellを起動し以下の順番で入力していきます。******には任意のパスワードを入力します。

cd mysql\bin
mysql -u root
set password=password(‘******’);
quit
exit

このままではphpMyAdminへログインできないので、ApacheとMySQLをストップし一旦XAMPPを終了。

C:\xampp\phpMyAdmin\config.inc.phpをメモ帳で開いて、下記のように変更して保存します。ここではわかりやすく変更前と変更後と記しています。

/* 変更前 */
/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'config';
$cfg['Servers'][$i]['user'] = 'root';
/* 変更後 */
/* Authentication type and info */
$cfg['Servers'][$i]['auth_type'] = 'cookie';
$cfg['Servers'][$i]['user'] = '';

これでphpMyAdminにログインできるようになりました。

XAMPP終了時にエラーが出る場合

Quitで終了しようとすると「アクセスが拒否されました」とエラーが表示される場合、設定の変更が必要です。

XAMPP for Windows 7系の起動と終了 | ジョブテク

jobtech.jp

XAMPPのフォルダ内にあるxampp-control.iniを右クリック→プロパティを開き、セキュリティタブの編集をクリックし、

• 変更
• 読み取りと実行
• 読み取り
• 書き込み

にチェックを入れればOK。

データベースを作成

phpMyAdminにユーザ名「root」と設定したパスワードでログインし、新たにデータベースを作成します。

データベース名はわかりやすいものでキャラクタセットは「utf8_general_ci」を選択して作成します。

WordPressをインストール

ブログから大規模サイトまで作れる CMS - WordPress.org 日本語

簡単に美しいサイト、ブログ、アプリを作成するのに使えるオープンソースソフトウェア。

ja.wordpress.org

WordPressのファイルをダウンロードし解凍後、フォルダをC:\xampp\htdocsに入れます。

そしてブラウザに「http://localhost/wordpress/」と入れてアクセスすると初期設定の画面になるので、設定したデータベース情報を入力していきます。

データベースのホスト名はlocalhost、接頭辞はwp_のままでOK。

これでWordPressのインストールは完了です。

テンプレートテーマを入れる

テーマの入ったフォルダをC:\xampp\htdocs\wordpress\wp-content\themesに入れます。

これでテーマを有効にできます。簡単ですね。

ここからはコンテンツを入れながらテーマの設定をしていきます。

サムネイルなど各サイズの画像が生成されない

コンテンツを入れていこうと画像をアップロードするのだがオリジナルサイズしか作られません。正方形にトリミングされたサムネイルを使いたいのですがこれは困りました。

どうやらGDライブラリというのが有効になっていないといけないようです。

#1 XAMPP環境構築｜Snow

まずは、開発環境を整えましょう。 ローカルでPHPを動かすには、 vmware player をインストールして仮想環境を作るか、 もう少しサクッとやるならXAMPPをインストール。 今回はXAMPPをインストールしてみます。 まずは、XA...

note.com

XAMPPのコントロールにてApacheのConfigからphp.iniを開きます。

いろいろ調べてみるとバージョンによって異なるみたいですが、

;extension=gd

と記述されているところを探し、;を消してコメントを外します。

GDライブラリが有効になっているかどうかの確認は、適当なところにPHPファイルを作成し、中身は

<?php phpinfo() ?>

と記述して保存しアクセスすると設定情報が一覧になって出てきます。

「gd」という一覧が表示があり、GD Supportが「enabled」になってればOK。もし無効であればgdの一覧自体が表示されないと思います。

XAMPPからサーバーへアップする

XAMPP環境でWordPressサイトが完成したら、本番環境であるウェブサーバーへアップします。

WordPressサイトをローカルからサーバーへ

ローカル環境にWordPressで作ったサイトをレンタルサーバーへ移行する方法です。

codeaid.jp

こちらのサイトを参考にしましたが一部手順が違います。

というのも、FTPソフトでサーバーにWordPressのデータを一括アップロードしようとすると、一部のファイルがエラーでアップできずWordPressがうまく動作しませんでした。未設定のまっさらなWordPressのデータでもエラーでした。

仕方なくレンタルサーバーの機能である簡単インストールでWordPressのデータをインストールし、wp-content内にあるuploadとテーマフォルダだけFFFTPを使って手動で入れました。

もし普通に一括でアップロードできるのであれば、上記サイトの通りやっていただくのが一番早いです。

phpMyAdminでXAMPPからサーバーへデータベースを移行

XAMPPからphpMyAdminを開き、WordPressで使用しているデータベースのページからエクスポートメニューを開きます。

こんなエラーが出てきましたが無視しました。結果的に問題なく移行できてるのでよしとします。

「可能なオプションをすべて表示」を選び、すべてのデータにチェックが入っていることを確認。

生成オプションで「DROP TABLE/VIEW/PROCEDURE/FUNCTION/EVENT/TRIGGERコマンドを追加する」にチェックしてエクスポートを実行します。

実行する前に注意が必要なのが、データベース名が移行先と同じでないといけないので、もし違っていればデータベース名を変更する必要があります。

操作タブの中にデータベース変更の項目があるのでそこから変更をします。

エクスポートできたらサーバー側のphpMyAdminを開いてエクスポートしたデータベースをインポートします。

URLの書き換え

データベースにはWordPressがどのURLで運用されているかが記録されており、このままではXAMPPで動かしていたhttp://localhost/wordpressがURLだと認識されてしまいます。

これだけではデータベースにlocalhost/wordpressのURLで運用されているという情報が記録されており、ダッシュボードにログインを試みるとXAMPP側のダッシュボードに入ってしまいます。

GitHub - interconnectit/Search-Replace-DB: This script was made to aid the process of migrating PHP and MySQL based websites. Works with most common CMSes.

This script was made to aid the process of migrating PHP and MySQL based websites. Works with most common CMSes. - GitHu...

github.com

データベースに記録されたURLをすべて書き換えるために、Search-Replace-DBというツールを使います。

ダウンロードして解凍したフォルダをWordPressのデータが入ったフォルダにアップロードします。そしてブラウザからそのフォルダのindex.phpにアクセス。

置換前と置換後のURLを入力します。今回はlocalhost/wordpressからyamashina.iehohs.comに変更します。

データベース名、ユーザー名、パスワード、ホスト名を入力します。ポート番号は空の状態でもOKでした。Test connectionボタンを押して、横に緑のSuccess, You are connected.という表示が出れば先に進めます。

Do a safe test runボタンを押すと下に変更箇所がいくつあるか表示されます。そのままSearch and Replaceボタンを押すとURLがすべて置換されます。

Search-Replace-DBのデータはもう不要なので削除しておきます。

これで移行の作業はすべて完了です。