インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

WordPressのローカル環境を作る!パソコン上でXAMPPを使ってカスタマイズ!

  2015/08/21   あとで読む

約 7 分で読めます

2015-08-19_203651

ブログはネット上で動作します。仕事などでよく利用するエクセルやワードなどはパソコン上で動作するので、ここが全然違いますね。

エクセルやワードのファイルなら、何か修正するにしてもすぐファイルをコピーしてバックアップをとることができますが、ブログとなるとそうもいきません。

特に外観のデザイン、項目の表示順を変えるなどWordPressのファイルを修正してカスタマイズをする、といった領域に足を踏み込もうと思っているあなた!私と同じ迷い道に入ろうとしてますね。^-^;)

単純な設定変更ではなくファイルに手を入れたりCSSをいじったりするカスタマイズは、ネット上で修正をする前に是非パソコンにローカル環境(パソコン上でシミュレーションする環境)を用意して、パソコンで一度試してからネット上で修正をするようにしましょう。

簡単な修正だ、などと思っても、直接ネット上のファイルに修正を入れて、

  • 画面が真っ白になって何も動作しなくなった!
  • ブログにログインできない!

なんて事も起きることだってあるんです(経験者 σ^-^;) )

ここでは、そんな泣くに泣けない状況になる前に、パソコン上で試せるようにローカル環境を整えましょう。

新たな武器はXAMPP

パソコン上でネットと同じ環境を作るには「XAMPP」(ザンプ)を利用します。

この「XAMPP」をパソコンにインストールすると、ネットと同じ環境がパソコンの中にできるんですね。つまりパソコン内にサーバーができてそこにWordPressインストールして動作確認ができる。

あくまでパソコン内だけの話ですが、積極的にドンドン色々と試せる、という環境があるのとないのとでは作業スピードやリスクが全然違ってきます。

ではXAMPPのインストールから順に見て行きましょう。

XAMPPのインストール

細かい説明は抜きで、XAMPP(ザンプ)をインストールします。
XAMPPには以下が含まれてます

  • Apache(これがサーバーの役目をします)
  • MySQL(データベースです)
  • その他プログラミング言語等

この「Apache」(アパッチ)と「MySQL」(マイ・エスキューエル)がパソコンで稼働すると、擬似的にネットと同じ環境がパソコン上にあることになります。

1) XAMPPをダウンロード

以下にアクセスし、XAMPPのダウンロードを行います。

2015-08-19_204922

Windowsの場合は、①の「Windows向け」、Macの場合は②の「OS X 向け」をダウンロードします。

以降、Windows向けの説明となります(Macユーザーさん、ごめんなさい!)

では①の「Windows向け」をクリックします!

ダウンロード開始

自動的にダウンロードが始まります。
(下の図はブラウザがグーグルクロームの表示例です)

2015-08-19_205155

ダウンロード終了してクリック!

ダウンロードが終了したらクリックして実行します。

ウイルス対策のセキュリティーソフトが起動している場合など、メッセージが表示されますが「Yes」をクリック。

2015-08-20_071915

続いて別のメッセージが出るかもしれませんが、こちらも「OK」をクリック!

2015-08-19_224907

インストール開始

インストールする画面が表示されます。

「Next >」をクリック!

2015-08-19_205614

インストール確認

何をインストールするか確認です。

全てにチェックが入ってますが、そのまま「Next >」をクリック!

2015-08-19_205831

インストールするフォルダー確認

インストールするフォルダーの確認です。

そのまま「Next >」をクリック!

2015-08-19_205937

Bitnami のお知らせ

Bitnami(WordPressをローカル環境で構築できるソフト)のお知らせが表示されます。

チェックを外して「Next >」をクリック!

2015-08-20_070852

インストール事前確認

インストールの準備ができ、インストールを開始します。

「Next >」をクリック!

2015-08-19_210124

インストール中

インストールが開始されます。
5分から10分程度かかりますので、少しコーヒーブレークですね。

2015-08-19_210223

Windowsからのセキュリティのお知らせ

途中、セキュリティに関するメッセージが表示されるかもしれません。

その場合も「アクセスを許可する」をクリック!

2015-08-19_210554

インストール完了!

インストールが完了すると、以下の図のような画面が表示されます。

2015-08-19_210814

このままXAMPPのコントロールパネルを起動して続けるのも良いですが、普通に起動するにはどうするかを見ておきましょう。

XAMPPの起動の仕方

XAMPPはインストール終了時にショートカットを作ってくれないため、自分で作ります。

マウスを画面右下などに持って行き、「検索」を表示します。

2015-08-19_211113

一番上の虫眼鏡をクリックして「XAMPP」を入力すると、以下の図のように「XAMPP Control Panel」が直ぐ下に表示されます。

2015-08-19_211232

この「XAMPP Control Panel」の上で右クリックするとメニューが表示されるので、「スタート画面にピン留めする」か「タスクバーにピン留めする」を選んで、ショートカットを作っておきます。

タスクバーにピン留めすると、パソコン画面のタスクバー(画面下)にアイコンが表示され、いつでもそこから起動ができます。

ではクリックして起動します!

2015-08-19_211632

XAMPPの起動とパスワード変更

さていよいよXAMPPの起動です。
以下のようにXAMPPのコントロールパネルが表示されます。

2015-08-19_211847

赤丸印の「Apache」「MySQL」の「Start」を各々クリックします。

この「Apache」がサーバーの役目をして「MySQL」がデータベースの役目を果たします。

各々起動に成功すると緑色になります。
※)赤字のエラーが出る場合には下方を参照して下さい

2015-08-19_212152

これで、パソコン上でのサーバーとデータベースの起動ができました。

次はWordPressのインストールですが、その前にパスワードの設定をしておきます

エラーとなってApacheが起動できない場合

Apacheを起動しようとしてエラーとなって赤い文字が沢山表示される場合があります。

2015-08-19_212552

赤字の部分をよく見ると、この場合は「Skype.exe」と表示されてますね?

つまり、今パソコン上で動作しているSkypeと何かがパッティングして起動できない、となっています。

Skypeだけでなく、他のアプリでも同様にバッティングする場合があり、このようにエラーになったらSkypeやブラウザなど、他のアプリケーションを一度終了して、再び「Apache」「MySQL」の「Start」をクリックしてみてください。

※)それでもダメならパソコンを一旦再起動して、まずXAMPPを最初に起動してみてください。

パスワードの変更

パスワードの変更だけは行っておきます。

Apacheが起動している状態(緑色になっている状態)で「Admin」をクリック!

2015-08-20_072800

管理画面起動

管理画面が起動されますので「セキュリティ」をクリック!

※)この管理画面が起動されず英語の「Apache Friends」ページが開かれる場合は下方参照

2015-08-20_072925

XAMPP セキュリティ

XAMPPセキュリティ画面が表示されます。

赤丸で囲まれているリンクをクリックしてパスワード変更画面に移行します。

※)左のオレンジの領域は気にしないでください

2015-08-20_073131

パスワード変更画面

パスワードの変更画面に移行し、新しいパスワードを設定します。

2015-08-20_074006

  • ① 新しいパスワードと、確認のためにもう一度新しいパスワードを入力します。
  • ② cookie を選択します
  • ③ チェックを入れません
  • ④ ①~③が終わったら「パスワードを変更しました。」をクリックします。(日本語が変なのは気にしない)

ユーザー:root
パスワード:ここで設定したもの

になります。絶対忘れないようにして下さい。このユーザーとパスワードは、後でデータベースの作成やWordPressを設定する時に必要になります。

パスワード変更完了

一瞬のことなので「あれれ?」という感じですが、パスワードが変更となった旨の表示がされて完了です。

2015-08-20_074359

Apache friends のページが出てしまう

上で見たような管理画面が表示されず、下の図のように英語のページ(Apache friendsのページ) が表示される場合があります。
(最近のバージョンは私は必ずこうなります)

2015-08-20_074606

こうした場合には、以下の手順で英語モードでパスワードを変更して下さい。

※)英語になりますが、見た目の構成は日本語と同じなので、上で見てきた日本語画面と見比べながらパスワードを変更します。

1)英語モードを選択

http://localhost/security/splash.php にアクセスして「English」を選択

2015-08-20_074910

2)セキュリティー画面

セキュリティー画面になりますので、赤丸で囲まれた箇所のリンクをクリックしてパスワード変更画面に移行します。

2015-08-20_074934

3)パスワード変更画面

パスワード変更画面です。

2015-08-20_075142

日本語の画面と同様に以下の手順でパスワードを変更します。

  • ① 新しいパスワードと、確認のためにもう一度新しいパスワードを入力します。
  • ② cookie を選択します
  • ③ チェックを入れません
  • ④ ①~③が終わったら「パスワードを変更しました。」をクリックします。

パスワード変更完了

一瞬で画面が切り替わり、パスワード変更が完了した旨の表示がされます。

2015-08-20_075436

以上で無事パスワードの変更が完了しました。

WordPressのインストール

さて、いよいよWordPressのインストールです。
WordPressのインストールは、以下の手順で進めます。

  • 1)WordPress本体をダウンロード
  • 2)WordPressをXAMPP内へ設置(フォルダー名称変更)
  • 3)データベースを作成
  • 4)WordPressのインストール

では順に見ていきましょう。

1)WordPress本体をダウンロード

WordPressの日本語サイトへアクセスします

WordPress日本語サイトはこちら

2015-08-19_213411

画面下方に「ダウンロード」ボタンがあるので、そこをクリック!

ダウンロード開始

ダウンロードがされます。

ブラウザがグーグルクロームの場合は、画面下に下の図のように表示されます。

2015-08-19_213720

WordPressの解凍

WordPressのダウンロードが終了したら、クリックしてファイルを解凍します。

2015-08-19_213923

2)WordPressをXAMPP内へ設置(フォルダー名称変更)

解凍が終わると、デスクトップに「wordpress」というフォルダーが出来ます。

このフォルダー名称を独自ドメイン名のように自分の好みの名前をつけて下さい。

ここでは「test-blog.com」とつけます。
(名前は何でもよく”.com”等もなくても良いです)

XAMPP内の所定の位置

wordpressのフォルダー名称を変更した後は、そのフォルダーをXAMPP内の所定の位置へ移動します。

では移動のために、まずはXAMPPのコントロールパネルの「Explorer」をクリック!

2015-08-19_214413

↓↓↓↓↓↓

表示されるフォルダーの中の「htdocs」をクリック!
(このフォルダー内にwordpressフォルダーを置きます)

2015-08-19_214505

↓↓↓↓↓↓

先ほど名称を変えた「text-blog.com」フォルダーを置きます

2015-08-19_214947

3)データベースを作成

続いてWordPressが使うデータベースの作成です。

XAMPPコントロールパネルにあるMySQLの「Admin」をクリック!

2015-08-19_215529

パスワードの入力

パスワード入力画面が表示されます。

先ほど変更したパスワードを入力し「実行」をクリック!

2015-08-20_111639

データベース管理画面

phpMyAdminというデータベース管理画面が表示されます。

上段のメニューで「データベース」をクリック!

2015-08-19_215638

データベースの作成

データベース作成のための画面が表示されます。

作りたいデータベースの名前(なんでもOK)を入力後、右にある「作成」をクリック!

(ここでは「test-blog-db」という名のデータベースを作成します)

2015-08-19_220603

データベース作成完了

画面が一瞬でササっと変化するため、あれあれ?って感じですが、以下のように画面の左を見ると、しっかりデータベースは作成されてます。

2015-08-19_220916

4)WordPressのインストール

いよいよ最後の段階、WordPressのインストールです。

パソコン内のローカルサーバーのURLは「http://localhost/」で、先ほど作ったWordPressのフォルダーは名前を「test-blog.com」としたので、以下のURLにアクセスします。

http://localhost/test-blog.com

インストール開始画面

出たー!WordPressのインストール開始画面。

2015-08-19_221535

「さあ、始めましょう」をクリック!

各種情報の入力

続いてデータベース名やユーザー名などの入力です。

2015-08-19_222147

  • ① データベース名
    • 先ほど作成したデータベース名です。(test-blog-db)
  • ② ユーザー名
    • MySQL(データベース)のユーザー名です。
      「root」(独自に作成していればその名称)
  • ③ パスワード
    • ②のユーザー名に対するパスワード。
      先ほど変えたパスワードです。
  • ④ データベースホスト
    • 変更不要
  • ⑤ テーブル接頭辞
    • 変更不要

全て入力したら下の段にある「送信」をクリック!

2015-08-19_225356

インストールの実行確認が出るので「インストール実行」をクリック!

ようこそ画面

最後にサイトのタイトルやユーザー名、パスワードなどを入力します。

もうここまで来ると見覚えのある内容ですね。

2015-08-19_225503

最後に「WordPressをインストール」をクリック!

インストール完了!

やって来ましたダッシュボード。

2015-08-19_225628

これがあなたのパソコン上で作ったWordPressです。

実際のブログの表示も見てみると、

2015-08-19_225740

しっかりHello world!が表示されてますね。

後はネット上にあるWordPressと扱いは同じです。

ここまでの復習

今後、パソコン上のローカル環境で作業を行う場合には、

  • 1)XAMPPコントロールパネルを起動(タスクバーなどより)
  • 2)Apache, MySQLの起動
  • 3)localhost/xxxx でローカルのWordPressにアクセス

以上となります。

ネット上にあるWordPress同様にテーマをアップロードしたり、プラグインを追加したりと、扱いは同じです。

今後更に新しいローカルのブログを作りたい、となれば、上で見てきた「WordPressのインストール」と同じ手順を繰り返すことで幾つでも作成できます。これで思う存分テストなどができますね!

トレンドアフィリエイトでは、最近は以前に比べて外観の個性も重要視されるようになって来ました。こうしたローカル環境で独自にテストが行えるのは今後大きな強みとなってくるでしょう。

手順自体は長く見えますが、実際はインストーラーなどの流れに乗っているだけで、特に面倒なことはありません。

是非あなたの今後の大きな武器となるよう、ここでしっかりローカル環境を整えておきましょう!

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です