MacBookAir内にWordPressのテスト環境を構築する方法①

Pocket

実はこの『教える人のネターノート』が今月末で2年目を迎えます。

そのタイミングに合わせて、サイトのリニューアルを目論んでおりましたところ、ようやく気合いを入れてその準備を始めました。
リニューアル作業のプロセスは、こんな感じで進める予定です。

① ローカルマシン上に、現状とそっくりなテスト環境を作る

② テストサイトで、あ〜でもない、こ〜でもないとデザインをいじる

③ 決定したサイトデザインをサーバへアップし、こっそりすり替える

まずこの記事では、次のような状態(右側にあるデフォルト設定のサイト)がローカルだけで構築される手順をまとめました……

 

0152 1

 

早速モレスキンを開いて、作業手順をまとめます。

システムを設定していく時って近視眼的になってしまうので、まずツールの構成を空間的に表現し、作業全体をイメージしてみました。

 

0152 2

 

当方のマシンはMacBookAir13インチとなっており、その中に現行ブログを再現させるいう訳です。
そのためにはローカルにデータベースを構築する必要があるので、MAMPというツールを使います。

このMAMPは、”Macintosh・Apache・MySQL・PHP”の略で、要するにWordPressのブログ記事を蓄積するデーターベースをこしらえる裏方ソフトなのです。
=ダウンロードはこちら=

とにかく、それを自分のマシンに設定してみましょう。

MAMPのサイトを開き、トップページの左側にある象のマーク「Download now」をクリック。無料です。
ダウンロード後に解凍します。

次にブログサイト制作ソフトのWordPress(無料)もダウンロードし、MAMPの”htdocs”フォルダへ解凍しておきます。
=ダウンロードはこちら=

もし、複数のテストサイトを作りたい場合は、“htdocs”直下に任意のフォルダを設定します。
その場合は、この画像のようなフォルダ構成になっていきます。

 

0152 3

 

アプリケーションにあるMAMPを起動すると、“http://localhost:8888/MAMP/?language=Japanese”という内部サイトにアクセスされ、初期設定を求められます。

“MySQLデータベースは phpMyAdmin を使って管理できます”と記されたリンクから、“phpMyAdmin”へ移動し、データベース設計に入ります。

 

0152 4

 

ここで当方が入力したのは、データベースの名前だけです。後はデフォルトでよいでしょう。

続いては、WordPressのインストールとなります。
ブラウザから”http://localhost:8888/(データベースの名前)/”と入力し、「ファイルがみつかりません」と表示されても慌てず騒がず「設定ファイルを作成する」をクリックします。

 

0152 5

 

当方が設定したのは、データベース名とユーザー名&パスワード

ユーザー名とパスワードは共に、“root”です。あとはデフォルトのままで進みました。

 

0152 6

 

必要情報という当たり前なタイトルのページが開き、下の画像のように設定していきます。
それらが済むと「WordPressのインストール」がクリックできます。

こうして、何もない空のブログが、MacBookAirの中に誕生したのです。

まっさらのサイトを眺めながら、一息つきましょう。
しばらくしたら、次のミッションへ取り組んでいくのです。

 

現行ブログから公開している記事やカテゴリーなどのデータ類を、このローカルブログへ移動させなくてはいけません。

元々あるブログの管理者画面から、「ツール」を選択。
その階下にある「エクスポート」から”すべてのコンテンツ”をチェックして、「エクスポートファイルをダウンロード」のボタンをクリックします。
xmlファイルが作成されるので、それをデスクトップにでも置いておきましょう。

……で、もう一度テスト用のローカルブログへ移り、管理者画面から「ツール」→「インポート」を選択。
表示されたインポートツールを用いて、作業の開始です。

 

0152 7

 

こんな感じでインポートが進んでいきます。
既存のエントリー数によって、この作業での待ち時間は変わります。

しばらくしたら、基本的な移行設定は終了となります。

ブラウザで”http://localhost:8888/(データーベースの名前)/”と指定すれば、ローカルテスト版が起動されます。

もうここにあるデータは、サーバにある本体とは別物。好きなだけ加工できるのです。

このローカルサイトのアドレスは、忘れずにブックマークしておきましょう。

ただし、このローカルブログを表示するには、裏でMAMPが起動していないとダメなので、常にこのような画面がデスクトップの片隅にあることを忘れずに……。

 

0152 8

 

そうして、以下の右側にあるブログが、MacBookAirだけで表示されるようになりました。

 

0152 1

 

このテスト用サイトを使って、自由にカスタマイズを楽しみます。

では次回、そのあたりを探っていきましょう!

 

Related Posts Plugin for WordPress, Blogger...

コメントを残す

メールアドレスが公開されることはありません。