スライドショー

【WordPress入門】ローカル環境でWordPressを使って見よう(XAMPP)

こんにちは!エンジニアのノムラです。

WordPressを使ってブログを初めてみたいと考えている方、

WordPressってどんな感じなのか動かしてみたい!
でも、いきなりサーバーにおいて公開するのは不安

と感じていませんか?

ローカル環境にWordPressをインストールすれば、自分にしか見れない環境でデザインの編集をしたり、記事の作成を行うことができます

この記事では、

  • XAMPPを使ってローカル環境を準備する
  • データベースを作る

といったXAMPPのインストール方法から、

  • WordPressのダウンロード
  • 初期設定
  • 作ったブログの確認

など実際に使い始めることができるところまで、初心者にもわかりやすく解説していきたいと思います!

ローカル環境を構築する

まずはローカル環境を構築しましょう。
今回は、XAMPPを使って進めていきたいと思います。

XAMPPとは?

XAMPPとは、WEB開発に必要なソフトがまとめられているパッケージソフトです。

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

ひとつひとつ必要なソフトをインストールしていくこともできますが、XAMPPを使えば一度にインストールを終わらせることができ、初心者向けと言われています。

今回は、XAMPPを使ってローカル環境にWordPressをインストールする方法について解説していきます。

XAMPPをインストールする

それでは早速XAMPPをインストールしてみましょう。

インストールは以下のサイトから行なってください。

xampp_インストールhttps://www.apachefriends.org/jp/download.html

インストールするのは、バージョン「7.2.5 / PHP 7.2.5」になります。
今回は、MacOS向けのものをインストールします。

ダウンロードしたファイルを開くと、以下のようなウィンドウが表示されます。

インストール1

アイコンをクリックするとセットアップがはじまります。

Nextをクリックして進むとインストールがはじまり、最後にFinishボタンをクリックしたらインストール完了です。

インストール2

インストール3

インストール4

インストール5

インストール7

インストール8

インストール9

「Finish」でインストールが完了ます。

アプリケーションにXAMPPというフォルダができているか確認しましょう。

データベースを作る

XAMPPのインストールが完了したら、次はWordPressで使うデータベースを用意します。

XAMPPのコントロールパネルを開きます。

スクリーンショット 2018-06-12 14.17.16

Macの場合、XAMPPフォルダのmanager-osxからコントロールパネルを開くことができます。

真ん中のManagerServersからMySQL DatabaseApache Web Serverを選択し、Startをクリックします。

スクリーンショット 2018-06-12 14.17.33

起動することができたら、再びコントロールパネルのWelcomeの画面に戻り、Go to Applicationからダッシュボードを開きましょう。

スクリーンショット 2018-06-12 14.17.16

スクリーンショット 2018-06-12 14.24.10

一番右上のphpMyAdminをクリックします。
そこからデータベースを作成することができます。

スクリーンショット 2018-06-12 14.29.33

左のサイドメニューのNewから、新しくWordPressで使うデータベースを作成しましょう。
スクリーンショット 2018-06-12 14.32.09

今回はデータベース名を「my_wp」にしました。
照合順序は「utf8-general-ci」に設定します。

作成ボタンを押して、以下のようなページに遷移すればデータベースの作成は完了です。

スクリーンショット 2018-06-12 14.34.21

WordPressをインストールする

ローカル環境の構築と、データベースの作成が終わったので、いよいよWordPressをインストールします。

WordPressのダウンロード

まずは、以下のページからWordPressのダウンロードを行なってください。

WordPressダウンロード

WordPress4.9.6をダウンロード」からダウンロードしてください。

ダウンロードしたwordpressのフォルダは、「/Applications/XAMPP/htdocs」直下に保存します。

ここまで完了したら、WordPressのトップページにアクセスしてみましょう。
アドレスは「http://localhost/wordpress/」でアクセスすることができます。

htdocs直下にwordpressを保存する際、フォルダの名前を変えた場合は、「http://localhost/任意で設定したフォルダ名/」でアクセスすることができます。

wordpress_初期

この画面にアクセスできたら、初期設定を行なっていきましょう。

初期設定を行う

まずは先ほど作ったデータベースを設定します。

WordPress初期2

データベース名に、作成したデータベース名を入力します。
今回の例だと、「my_wp」になります。

ユーザ名とパスワードにはMySQLのユーザ名パスワードを入力します。
ユーザを設定していない場合にはユーザ名「root」、パスワードは空白で大丈夫です。

ホスト名は「localhost」を指定します。

テーブル接頭辞は1つのデータベースに複数のWordPressをインストールする際に設定するので、今回はデフォルトの「wp_」のままで大丈夫です。

また、新しくMySQLのユーザを追加したい場合は、phpMyAdminから使用するデータベースを選択し、「特権」から追加することができます。

全ての項目の入力が完了したら、送信ボタンを押します。

WordPress初期3

遷移したページで、インストール実行しましょう。

 

WordPress初期

サイトのタイトルには任意のサイト名、ユーザ名とパスワードには、WordPressの管理者画面にログインする際に使うユーザ名パスワードを設定します。

プライバシーのチェックを外して、WordPressをインストールをクリックするとインストール完了です。

ログイン画面から、先ほど設定したユーザ名とパスワードを入力し、ログインしてみましょう。

管理者画面

WordPressの管理者画面にアクセスすることができました!

管理者画面から記事の投稿や、テーマの編集などを行うことができます。

 

site_top

左上のサイト名から「サイトを表示」をクリックするとローカル環境に作られたサイトを確認することができます。

インストール後の進め方

ここまでで、ローカル環境でWordPressを動かすための準備が全て終わりました。
ここでは、

インストール後どうやって進めていけばいいの?
テーマやプラグインは何を使うべき?

といったお悩みを解決していきたいと思います。

テーマの選び方

WordPressをはじめる際、悩むのが「テーマ」だと思います。

カスタマイズのしやすさや、SEO対策がされているかなど、どのテーマを選べばいいのか迷ってしまいますね。

そんな人のために、WordPressのオススメテーマをまとめた記事を紹介したいと思います。

ここで紹介する記事では、

SEOを強化したい
ブログを作りたい
画像を綺麗に並べたい

など、サイト作成で重視したいこと別にレスポンシブなWordPressテーマを紹介しています。

最近スマートフォンからWEBサイトを閲覧する人が増え、レスポンシブ対応は必須と言えます。
この記事を参考に、レスポンシブで素敵なサイトを作ってくださいね!

WordPressレスポンシブ対応テーマを目的別に5つ紹介
更新日 : 2018年11月7日

おすすめプラグイン

WordPressには、テーマだけでなく「プラグイン」を使ってサイトをカスタマイズする機能があります。

プラグインを使うことで、よりデザインにオリジナリティを出すことができたり、記事の投稿を効率化したりすることができます。

WordPressに数多く用意されているプラグインも、どれを使えばいいのかが悩みどころですね。

そんな時は以下の記事がオススメです。

【初心者必見】WordPressおすすめプラグイン5選を徹底比較
更新日 : 2018年12月3日

そもそもプラグインって何?」といった基礎的な内容から、「インストールするべき人気プラグイン」まで、わかりやすく解説されています。

ぜひ参考にしてみてください!

まとめ

今回は、XAMPPのインストール方法から、データベースの作成WordPressのインストール手順まで解説してきました。

いきなりレンタルサーバーを選んでサイトを作成をしていくのは不安な人も、ローカル環境でなら安心して動かすことができますね。

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ノムラ

ノムラ

WEBエンジニアをやっています。
プログラミング初心者にもわかりやすく解説ができるよう頑張ります。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説