Macアプリ紹介 開発環境

【備忘録】WordPressローカル環境の構築方法(OSX Yosemite)⇒Web系プログラムの勉強にもおすすめ

MacでWordpressのローカル環境を構築する方法です。

他のバージョンでも利用可能だとは思いますが、OSX Yosemiteでこの記事は書いています。

アルファベットが多く、見た目は難しそうに見えますが、簡単に設定できます。

 

Sponsored Links

 

このエントリーは下記サイトを参照させて頂きました。

WordPressをローカル環境へインストールする手順 | WPカスタマイズ&自作テーマ作成説明所(仮)

 

 

ローカル環境を構築するために使うアプリ一覧

通常Webサイトはインターネット上にあるサーバーを見にいき、ブラウザ上(SafariやChromeのこと)でファイルをダウンロードして表示させています。

今回の方法はローカル環境なので、自Macの中に仮想サーバーを構築し、サイトを表示させる方法です。

僕はWordPressのデフォルトテーマを自分用にカスタマイズしていますが、そのカスタマイズするときに直接本物のテーマファイルをいじるのは怖すぎてできません。(プログラムをかじったことがある人はわかると思いますが。。)

まずはローカル環境にて試験的に変更してから、本物のブログに反映させています。ローカル環境でプログラミングの勉強にもなります。

 

MAMP&MAMP PRO⇒仮想サーバー構築 

MAMP & MAMP PRO

ローカルサーバーを

有料版がPROとなりますが、無料版のみ使います。 

 

NetBeans⇒IDE(統合開発環境)エディタです 

NetBeans NetBeans 日本語サイト

プログラムを書くためのエディタです。

直接ブラウザ上のWordpressの管理画面でCSSファイルなどを編集できますが、ブラウザ上では色分け等がされていないので、かなり見づらいです。

なので、僕の場合はエディタ(IDE 統合開発環境)を使って編集しています。 

 

今回はローカル環境で使うための環境設定方法を書きます。前回、本物のテーマファイルを編集するための設定方法(FTPの設定など)のエントリーを書いていますので、もしそっちの方が気になる方は下記エントリーを参照してください。

NetBeansのインストール方法も下記エントリーで紹介していますので、参考までに。

【備忘録】NetBeansでWordPressのテーマファイルなどをいじれるようにするための環境設定⇒FTPの設定など | itkhoshi.com

  

まずはMAMPで仮想データベースの作成

このアプリはAppStore上にはありませんので、MAMPの公式ページからダウンロードします。

この記事を書いた時点での最新バージョンは【MAMP & MAMP PRO 3.0.7.3】です。

 

MAMPのインストール方法

MAMPのページで 【Download】ボタンをクリック。

Img mamp install 1 

 

下記の画面になりますので、再度【Download】をクリックすると、インストーラのダウンロードが始まります。

Img mamp install 2 

 

下記がダウンロードしたファイルです。

ダブルクリックして、インストールを始めます。

Img mamp install 3

 

あとは次々画面に沿って進んでいきます。

Img mamp install 4

 

Img mamp install 5

 

Img mamp install 6

 

Img mamp install 7

 

Img mamp install 8

 

インストールには870.3MBの空き容量が必要です。

Img mamp install 9

 

Img mamp install 10

 

Img mamp install 11

 

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

Img mamp install 12

 

下記のファイルがインストールされました。

ただ、使うのは無料で使える【MAMP】のみです。

Img mamp install 14

 

 

MAMPの管理ページでデータベースを箱を作ります ⇒ これが仮想のデータベースとなり、ここにWordpressを入れます

インストールしたMAMPを起動します。

MAMP PROについての警告が表示されます。チェックを外すと次から表示されなくなります。

Img mamp install 15

 

MAMPが起動したら、【サーバを起動】をクリックします。

Img db setting 1 

 

サーバが起動すると、ブラウザが起動し、MAMPの管理画面が表示されます。

【phpMyAdmin】をクリックします。

もし、この画面が出ない場合はサーバー起動後、【オープンWebStartの】(日本語おかしい?)をクリックすると下記ページが表示されるはず。

Img db setting 2

 

WordPressを入れるために、まずは入れる箱を作ります。(箱とはデータベースのこと。)

【データベース】タブを選択。

Img db setting 3

 

赤枠の部分に【データベース名】を入力し、【作成】をクリックします。

このデータベース名は後でWordpressインストールの際に必要になります。

Img db setting 5

 

これで【itkhoshi_local_db】という箱(データベース)ができました。

次にここにWordpressを入れます。

Img db setting 6

  

WordPressのファイル一式をダウンロードし、自Macに保存⇒ローカル環境でWordpressが動作するようにします 

下記ページからWordpressのファイル一式をダウンロードします。

WordPress › 日本語

 

下記のボタンをクリックで、ダウンロードが始まります。

Img wordpress download 1

 

下記のフォルダがダウンロードされます。

Img wordpress download 2

 

このフォルダを先ほど作成した箱(データベース)に入れます(インストールします)。

まずはダウンロードした【Wordpress】フォルダを下記の場所にコピーします。

アプリケーション>MAMP>htdocs

Img db setting 8

 

こんな感じでOKです。

Img wordpress download 3

 

先ほど作成したデータベースにWordpressをインストールします 

Safariなどのブラウザで下記URLを開きます。

http://localhost:8888/wordpress/

MAMPでサーバが起動していれば開くはずです。

WordPressのインストール画面となります。 

Img wordpress install 1

 

ここの【データベース名】は箱(データベース)作成のときに使ったデータベースの名称を入力します。

データベースのホスト名、テーブル接頭語はそのまま、他は好みで大丈夫です。

Img wordpress install 2

 

インストール実行。

Img wordpress install 3

 

サイト名、ユーザ名等々入力します。

Img wordpress install 4

 

ローカル環境用なので、ローカルだとわかる表記にした方がいいかもです。

後でも変えられますので、ここでは適当でも問題無し。

Img wordpress install 5

 

インストール完了です。

Img wordpress install 6

 

ログインしてみると。。

Img wordpress install 7

 

WordPressの管理画面が正常に表示されています。

この画面で色々テストも可能ですね。

Img wordpress install 8

 

まさにまっさらな状態です。

Img wordpress install 9

 

このブラウザ上で色々試すのももちろんありですが、今回はIDE(統合開発環境)でテーマ編集などをできるように設定します。

もう少しで終わりますよ。

 

NetBeans(エディタ)で自MacにダウンロードしたWordpressのテーマファイル一式を編集するように設定する

冒頭でも記述していますが、NetBeansのインストール方法は前回のエントリーで紹介していますので、そちらを参考にして下さい。 

 

インストールができたら、前回のエントリー同様プロジェクトの作成から設定します。

右クリック⇒【新規プロジェクト】を選択します。 

Img netbeans setting local ver 1

 

カテゴリは【PHP】、プロジェクトは【既存のソースを使用するPHPアプリケーション】を選択します。

Img netbeans setting local ver 2

 

ソースフォルダは先ほど入れた、Wordpressフォルダを選択します。

⇒アプリケーション>MAMP>htdocs>Wordpress

Img netbeans setting local ver 4

Img netbeans setting local ver 3

 

プロジェクト名は適当な名前を入れておきます。

(本物のファイルと分けるためにもローカルとわかる表記にした方がいいかもです。)

Img netbeans setting local ver 5

 

実行方法は【ローカルWebサイト(ローカルWebサーバーで実行中)】を選択しておきます。

他の項目はそのままで大丈夫です。

Img netbeans setting local ver 6

 

これで設定は終わりです。

【終了】をクリックすると、先ほどダウンロードしたWordpressのファイル一覧が出てきました。

あとは、このアプリ上で色々ブログのテーマファイルなどを編集して、ローカルの環境でテストできます。

もちろん本物のサイトにはまったく影響はありません。(テスト用なので当然ですが。)

Img netbeans setting local ver 7

 

まとめ

OSX Yosemiteでも問題なくできました。(以前、OSXをアップデートしてMarsEditがクラッシュしたので正直少し不安でした。)

Webサイトに関わらず、テスト環境は必ず必要だと僕は思っています。テスト無しで本物のファイルをいじるのはちょっと勇気が必要ですよね。

このローカル環境はテスト用の他、PHP言語の勉強にもなりますので、Webサイトを作成する上で必要な知識も学べる環境になります。

是非、参考になれば幸いです。 

 

Sponsored Links

関連記事

-Macアプリ紹介, 開発環境
-, , , , , , , ,

© 2024 itkhoshi.com Powered by AFFINGER5