Late ran ラテラン は、ウェブクリエイターのためのキュレーションマガジン

メニュー
検索

2016/4/25更新

【第三回】0スタートのWordPress~WordPressを使ってみよう~

mainimg

【第三回】Wordpressを使う環境を整える③

前回、前々回でサーバーにWordpressを設置する方法をご紹介しました。

連載第三回目は、ネットワークに接続していないパソコン上でWordpressを動かす方法をご紹介します。

ネットワークに接続していないパソコン環境をローカル環境といいます。この言葉はぜひ覚えておいてください。

 

Bコース:パソコン上(ローカル環境)でのみWordpressの動きを確認したい場合の環境設定

 

ローカル環境を整えよう

まずWordpressを使用するためにはサーバーというものが必要です。このサーバーの機能を果たしてくれる無料ソフト、XAMPP(Macの方はMAMP)をインストールしましょう。

ここからXAMPPをダウンロードしてください。

https://www.apachefriends.org/jp/index.html

 

img01

 

Macの方はここからMAMPをダウンロードします。

https://www.mamp.info/en/

img02

Windowsユーザーの方は「XAMPPをインストールする」を見ながらインストールを進めましょう。

Macの方は「MAMPをインストールする」を見ながらインストールを進めましょう。

 

 

XAMPPをインストールする

ダウンロードしたexeファイルをダブルクリックしてインストールをスタートします。

 

以下のダイアログが出るのでYesを選択します。

img03

 

次のダイアログではOKをクリックします。

img04

 

XAMPセットアップ画面が表示されます。Nextボタンをクリックしましょう。

img05

 

細かい設定を行う画面が表示されますが、ここはデフォルトの設定のままでOKです。

img06

 

インストールするディレクトリを指定して、Nextをクリックします。

通常はデフォルトの設定のままで大丈夫です。

img07

 

「Learn more about Bitnami for XAMPP」のチェックを外します。

そしてNextボタンを押しましょう。

img09

 

いよいよインストールの開始です。

Nextボタンをクリックしてインストールを開始しましょう

img10

XAMMPのインストール方法は以上です。

 

 

MAMPをインストールする

セットアップウィザードが立ち上がるので、Nextボタンをクリックします。

img11

「MAMP PRO」のついているチェックをはずします。そしてNextをクリックしてください。

img12

ライセンスが表示されるので、読んだら「I accept the agreement」にチェックを入れてNextボタンをクリックします。

img13

 

MAMPをインストールするディレクトリを指定して、Nextボタンをクリックします。通常はデフォルトの設定のままで大丈夫です。

img14

 

次の画面では何も変更せずにNextボタンをクリックします。

img15

 

以下の画面に遷移します。デスクトップにアイコンを作るかどうかを選択できます。ここも特に変更せずにNexボタンをクリックします。

img16

 

インストールの準備が完了しました!

 

Installボタンをクリックしてインストールを開始しましょう。

img17

XAMPP、MAMPともにどのディレクトリにインストールしたかを覚えておきましょう。

WordPress設置時に必要な情報になります。

 

ローカルサーバーを立ち上げる

これ以降はXAMPを例に説明をしていきます。MAMPも操作はさほど変わりません。

XAMPPを起動してください。

 

以下のようなコントロールパネルが現れます。

img19

赤枠の箇所、「Apatch」と「MySQL」のStartボタンをクリックして、サービスを起動します。

(MAMPでは「サーバを起動」をクリックします。)

 

WordPress用のデータベースを用意しよう

XAMPPコントロールパネルにある、MySQLの「Admin」ボタンをクリックしましょう。

(MAMPでは「スタートページを開く」→「phpMyAdmin」の経路で開けます。)

phpMyAdminのページが表示されます。

ここで、以下二つを作成します。

  • 特権ユーザー
  • データベース

 

Tips:MySQLってなんだろう?

現在最も普及しているオープンソースのデータベース言語のことです。この言語を用いることで、データベースを操作することができます。

 

  • 特権ユーザーを作る

phpMyAdminのglobalナビゲーションにある「ユーザー」をクリックします。

img22

ユーザー概略が現れるので、そのなかにある「ユーザーを追加する」をクリックします。

 

「ユーザーを追加する」ページで、以下の設定を行います。

①ユーザーネームを入力。

②パスワードを入力。

③グローバル権限の「すべてチェックする」にチェックを入れる。

img23

ここで設定したユーザーネームとパスワードはWordpressを設置するときに使用しますので、忘れないようメモを取るなどしておいてください。

入力が終わったら、ページ右下の「実行ボタン」を押します。

これで特権ユーザーができました。

 

 ②データベースを作る

phpMyAdminのglobalナビゲーションにある「データべース」をクリックします。

img24

以下を設定します。

①データベース名を入力。

②照合順序を「utf8_general_ci」にする(ここの設定を間違えると文字化けが起こることがあります)。

そして作成ボタンをクリックしてください。

これでデータベースができました。

データベース名はWordpressの設置時に使用しますので、忘れないようにしておいてください。

 

Tips:phpMyAdminとは?

ブラウザからMySQLサーバーを操作できるようにするソフトの名称です。

このソフト自体がPHPで作られていることから、このような名前がついています。

このソフトを使用することで、SQL文を記述せずにMySQLサーバーを操作することが可能です。

 

WordPressをインストールしよう

お待たせしました、Wordpressのインストールに入ります!

まずWordpressをダウンロードしましょう。

以下でダウンロードができます。

https://ja.wordpress.org/about-wp-ja/

 

ダウンロードフォルダを解凍すると「wordpress」というフォルダが現れます。

このフォルダを適宜リネームしてください(もちろんwordpressのままでもいいです)。

これ以降は「wordpress」フォルダを「hogefuga」にリネームしたとして話を進めていきます。

これをXAMPPフォルダ内にあるhtdocsというフォルダ内においてください。

(MAMPにも同様にhtdocsフォルダがありますので、そこに設置します。)

 

それではWordpressにアクセスしてみましょう。以下のURLにアクセスしてみてください。

http://localhost/hogefuga/

img25

このような画面が表示されれば成功です。

これ以降は連載第一回の「Wordpressをインストールしよう」-「Ⅰ.自分で最初からインストールする」で説明した手順と同じ手順でWordpressの設定を行います。連載第一回の内容をご参照ください。

また、設定する前に以下を確認しておきましょう。

①データベース名…「Wordpress用のデータベースを用意しよう」の項で作成したデータベース名を思い出してください。

②データベースのユーザー名…「Wordpress用のデータベースを用意しよう」の項で作成した特権ユーザー名を思い出してください。

③データベースのパスワード…「Wordpress用のデータベースを用意しよう」の項で作成した特権ユーザーのパスワードを思い出してください。

④データベースホスト…ローカル環境では「localhost」になります。

⑤データベースの接頭辞…任意の文字列+「_」でつけてください。(例:blog_)

 

 

このようなローカル環境でWordpressを使用する場合、目的の多くはWordpressサイトの開発になります。

ローカルでサイトの開発を行い、完成物をサーバーに設置する、というパターンが多いです。

また、Wordpressの学習をしたという方の中にも、ローカル環境にWordpressを設置する方がいらっしゃいます。サーバーを借りる場合、ある程度の出費が必要になるケースがあります。また、勉強中のサイトが公に公開されることになります。そういったことを避けたい場合は、ローカル環境にWordpressを設置することをお勧めします。

 

 

ここまでWordpressの環境設定からインストール方法まで、3パターンを見てきました。

目的に応じて環境設定方法を選択してみてください。

次回はいよいよサイトを作っていきます。

お楽しみに!

Search