PROGRAMING

WordPressのサイトを作ってみよう!!(mac:ローカル環境開発編)

投稿日:

こんにちは、竜也です!

今回は、「これからプログラミングを学んでみたい!」「ブログを始めてみたい!」と思っている肩に向けて、少しつまづきやすいWordPressのサイト制作に向けて、その第1歩としてMAMPによるローカル環境開発を進めていきたいと思います!

ローカル環境とは?

まずはじめにローカル環境とは何か説明していきます!

ローカル環境とは、自分のパソコン内に構築する環境のことです。

とは言っても、始めたばかりではよくわからないですよね…。今回はローカル環境とは別に本番環境と呼ばれるものがあるので、それと比較しながら説明していきます!

安全性 Web上への公開 ファイルのある箇所
本番環境 エラーが出ると、サイトが閲覧できなくなる。 外部のパソコン
ローカル環境 公開前にエラーに気づける 不可 自分のパソコン

こんな感じで表にまとめてみました!

まず、本番環境で直に編集をする際の危険性は、エラーが出てしまった時にログインができなくなる、一時的にサイトが閲覧できなくなってしまう、事故が起こりやすいなどがあります。

それをカバーするのがローカル環境ということです。

ローカル環境を利用するメリットは、たくさんありますが、一番のメリットは何と言ってもサイトを公開する前にエラーの対処ができることです!他にもデザインを好きにいじって完璧な状態で公開ができたりといいことづくしです!

これを機に一緒にローカル開発環境を作ってみましょう!

インストール

このリンクに飛ぶとMAMPのダウンロードサイトに飛びますのでこちらからどうぞ!

このような画面になりましたら、自分の利用しているOSを選びダウンロードしてください。今回はmacで進めていきます。

画面に出てくる指示に従い進めていくとインストールは完了します。

有料版のMAMPPROもありますが、無料版のMAMPで十分です。お金を極力抑えたい人はMAMPを利用してください。僕はMAMPを使い続けています。

動かしてみよう!

インストールされたMAMPをクリックすると何やらこのような表示になります。

色々設定することもできますが、今回は説明は省きます。要望が多ければ新しい記事を書きます!

 

右側のStart Serversクリックすると、何やら読み込みが始まり…

このような画面に飛んだら成功です!

 

WordPress用のデータベースを作ってみよう!

WordPressにはデータベースというものが必要不可欠です。

難しいので、今回は言及しません笑

とりあえず、手を動かしながらデータベースを作ってみましょう!

MAMPを起動した時に出てきた画面を下の方にスクロールするとこんなページになります。

 

左側にある青いphpmyadminをクリックすると次のような画面に進みます。

右上のdatabaseを押して自分の好きな名前を入力してcreateをして、下の表に表示されたら、データベースの作成は完了です!

WordPressをインストールしてみよう!

WordPress の公式サイトにアクセスしよう。

右上のWordPressを入手をクリック!

ダウンロードを選択してダウンロードできたファイルを解凍します。

finderを開いてアプリケーションを開くとMAMPのフォルダ版みたいなものがあるのでクリック!

すると…

フォルダの一覧が出てきます。

さっきダウンロード、解凍したフォルダを…htdocsのなかに…

 

どーーーーーん!

ちなみに、このフォルダ名を自分の好きなものにしておくと、URLにも反映されて気分がいいです笑

これでweb上(仮)で見ることができるようになりました!

WordPressの設定をしてみよう!

あともう少しです頑張りましょう!

下記のURLにアクセスすると次のような画面に進みます

http://localhost:8888/{自分でhtdocsに入れたフォルダの名前}/wp-admin/

ボタンをクリックすると…

何やら面倒臭そうな設定が…

大丈夫です。簡単な設定をするだけです!

データベース名: {さっき作ったデータベースの名前}

ユーザー名:     root

パスワード:     root

データベースのホスト名: localhost

テーブル接頭辞: wp_

この通りに入力してください!

もしうまくいかないよって人はMAMPを立ち上げた時に出てきたページに戻りここを確認してみてください!

必要なデータが書いてあります!

入力して送信をすると…

必要な項目を入力後インストールのボタンを押すとログインの画面に飛びます!

設定したユーザー情報でログインすると…

どじゃ〜〜ん(ファニーヴァレンタイン風*ジョジョ7部参照)

これでWordPressを作ることのできる、ローカル環境の完成です!

まとめ

お疲れ様でした!

今回はこれから学習を始める方向けに、ローカル開発環境の作り方について書きました。
twitterのDMでも質問をお待ちしているのでどんどん質問ご要望を送ってください!

次回はWordPress基本操作編でお会いしましょう!

ではまた〜

-PROGRAMING

執筆者: