副業・スキル 飲食現場役立ちツール

【図解で解説】ローカル環境を使ってWordPressを無料で使用する全手順【XAMPP】

  1. HOME >
  2. 副業・スキル >

【図解で解説】ローカル環境を使ってWordPressを無料で使用する全手順【XAMPP】

スポンサーリンク

はてな

ブログをはじめたい、ホームページを作りたい

でも、何から手を付けていいかわからない、お金もかけたくない・・

最近ブログが流行っていて稼げる!や、ウェブデザインスキルで副業!など
見かけますが、自分にはそんなスキルはないし、スクールに通ってまでやりたいかといわれるとそうでもない・・

お金をかけずに出来たらいいなぁ、と思っている方にお勧めです!

ポイント

この記事を見ることで、ブログやホームページ制作を0から作り上げることができるでしょう。

私自身が、独学でサイトをはじめて作ってから1年ほど。

掛けたお金はサーバー代とドメイン代だけ!※

しっかりと手順を踏めば必ずできるようになります。

そうすることで、外注すると20万ほどはかかってしまうホームページ制作を

自社、すなわち自分で行うことで、経費を削減してなおかつ

ウェブスキルも上げることができます。

※現在はWordpressテーマを有料で使用していますがここはお金をかけなくてもOKです

最低限必要なアイテム

持っている人はここは飛ばしていただいて大丈夫ですね。

・パソコンを用意
・インターネット環境  固定回線なら楽天ひかり
・クレジットカード

まだ準備できていないものがあればそれぞれおすすめをご紹介しているのでチェックしてみてください。

おすすめパソコン


コンパクトかつバッテリー持ちがいいので、場所を選ばずに作業が可能です。

もちろんインターネット環境が必要です

お店や自宅にインターネット環境があるなら、お店で作業すればネット環境は新しくする必要なし

0円WiFiの新規申込

いまは縛りのないポケットWi-Fiもだいぶいろいろ出てきたので、
自分に合うものを探してみるのもいいかもしれませんねっ
↓↓↓↓↓↓0円WiFi|初期費用・端末費用・解約費用が全て0円のモバイルWiFiの新規申込↓↓↓↓↓↓

 

クレジットカード

会社員でしたら、今のうちにクレジットカードを作っておきましょう。

なにかと便利ですし、後から出てきますがサーバーやドメインを取得する際には
決済しなくてはなりませんので、最低限用意しておくとスムーズにサイト作成が進められます。

おすすめカード

審査も厳しくないので、飲食店務めでも簡単に作れるかつ

ポイントもたまりやすい非常に優秀なカードですね!

年会費はかかりますが、楽天市場でもポイント還元率が上がるカードは
↓↓楽天カード1択↓↓

 

ここからスタート

ホームページ制作に必要な手順は2パターンあります!

 

パターン①

1・サーバーとドメイン取得

2.WordPressインストール

3.ページのカスタマイズ

パターン①は王道の手順ですね。初心者はこちらが断線おすすめです。

パターン②

ローカル環境構築してWordPressインストール、

ページができてからサーバーアップロード

この2パターンなのですが、こちらは設定がちょっとだけややこしいのですが、
ぎりぎりまで無料でサイト作成、カスタマイズ、どんなページい仕上がっているのかを確認しながら作業し
最後の最後に公開!という手順です。

どちらでもOK!

多くの場合、サーバーとドメイン取得してから始めよう!というのが多いのですが

今回は、パターン②のローカル環境構築してWordPressインストールのほうを解説します

この方法なら、WordPressを無料でカスタマイズする練習もできるので

まずは試してみたい!でもサーバー代はかけたくない!という人におすすめです。

 

実際の手順

1.XAMMPというローカル環境を作成するためのツールをインストール

まずは下記URLから「XAMMP」をダウンロードしてインストールします

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

Windowsの方とMacの方でダウンロードが変わりますが、使っているパソコンに応じてダウンロードしましょう

私はWindowsユーザーなので、以降はWindowsの画面で説明していきます。
デスクトップに保存しておくと、後々わかりやすいと思います

無事にダウンロードができたら、早速XAMMPをインストールしていきましょう。

基本的には「NEXT」を押していけばOKです!

チェックボックスが複数でる箇所になりましたら、

下の画像のようにチェックボックスをそろえて、【NEXT】で進みましょう

わからない方は、画像を参考にしてみてください。

 

 

2.XAMMPでローカル環境を構築

この作業は正直一番つらいところですので、丁寧にいきます。

用は、インターネット上ではなく自分のパソコンの中だけでサイトを作っていく

作業場を造るイメージです。

参考動画も載せておきますので、動画のほうが良いというかたはこちらもチェックしてみてください。

https://youtu.be/QaFn8ldACas

2-1XAMPPを起動したら最初に行うこと

こんな画面がでてもあわてずに、アクセスを許可するを押して進みましょう。

起動したら、このような画面が開きます。

「コントロールパネル」といわれるものです。
ここでやることは黄色い枠で囲われている、「Apache]と「MySQL」の右側にある「Start」を2つとも押します。

 

すると「Admin」というボタンが押せるようになるので、クリックします。

そうすると上のような画面が開くので、左上にある「phpMyAdmin」をクリックします。

データベースに新規作成

赤枠のように左側に「WP-01」右側は選択ボックスから「utf8mb4_general_ci」を選択して作成します

 

WordPressのダウンロード

https://ja.wordpress.org/download/

こちらからWordpressのサイトへ行き、Wordpressのダウンロードを行います。

少し下の方にスクロールすると、ダウンロードボタンが表示されますので、クリックし、ダウンロードします。

保存先はどこでも構いませんが、わかりやすい場所に保存しておきましょう。

 

ダウンロードができたら、ダウンロードしたファイルはまだzipという形で
展開しないといけないので、右クリック⇒すべて展開をします

その際に「参照」を押して、展開先を指定する必要があります。

展開する場所は

PC>ローカルディスク(c;)>XAMPP>htdocs

ちょっと時間がかかりますがそのまま待ちましょう

ローカル環境にWordpressの初期設定

まずは新しいタブを開いて検索バーに「localhost/wordpress」と入力して検索しましょう

すると次のような画面に切り替わります。

この画面にならない方は、おそらくWordpressでダウンロードしたファイルが先ほど展開した際に
PC>ローカルディスク(c;)>XAMPP>htdocsに入っていない可能性があります。

 

さぁ始めましょうをクリック

画面が切り替わりますのでそれぞれ入力していきましょう

 

・データベース名・・WP-01

これはXAMPPのmy admin phpで設定したデータベース

これのことですね。

・ユーザー名・・・root

・パスワード・・入力しなくていいのですが、もともと入っている「パスワード」という文字を必ず消してください。
※これが消えていないと送信後にエラーが通知されます。。

 

財後の二つはそのままでOKです

このように入力出来たら送信ボタンを押します

問題なく進めたら次のようなページが表示されます

(もしかしたらもう1つページが表示され「インストール」か「実行」のようなボタンがあるので次へ進みます。

必要情報の入力

サイトタイトル・・自分のブログやホームページのタイトルを入力します。これはいつでも変更できるのでなんでもOKです

ユーザー名・・Wordpressにログインするときのユーザー名ですので覚えやすく短い方がいいでしょう。

パスワード・・お好きなパスワードを設定します。脆弱なパスワードと表示されても使用可能です。その場合は下のチェックをいれて使用しましょう

メールアドレス・・お知らせを受け取れるアドレスを入力しましょう。

すべて入力出来たら「Wordpressをインストール」を押します

成功しました!という画面が出たら一先ず安心してよいでしょう!

左下のログインボタンを押して早速Wordpressにログインしましょう!

設定したユーザー名とパスワードを入力してログインします

次のようなダッシュボードが表示されたら無事にWordpressの準備完了です!

お疲れさまでした。

ここからはWordpressの設定を自分の好みやホームページデザインによってカスタマイズしていきます。

しっかりとお気に入りに保存して、すぐにアクセスできるようにしておきましょう。

 

注意点

今回はローカル環境にWordpressの初期設定を行いました。

これはXAMPPを起動していないと編集できない上、この設定を行ったパソコンでしか
WordPressの変種はできません。

なので、うっかりどこか別の場所のパソコンから編集したいけど入れない!となっても
自分のパソコンでXAMPPを起動すればちゃんと起動するので安心してください。

 

インターネット使用してどこからでも編集できるようにするには?

今回は無料でWordpressの編集を行えるようにローカル環境に設定しました。

これをどこからでもインターネット経由で編集を行うには、

「ドメイン」と「サーバー」を契約することが必須になります。

この契約は有料になるのですが、ホームページを公開するにはこの2つの契約は欠かせません。

別記事で今回ローカル環境に作成したWordpressを
ドメインとサーバーを契約して移行する手順を紹介しますのでそちらを参考にしてみてください。

まずは、このローカル環境を使用して存分にWordpressを研究し、納得いくホームページデザインや

ブログ作成を始めてみてもらえると嬉しいです。

 

ドメインとサーバーについては

独自ドメイン無料!ドメイン登録無制限!国内最速・高性能レンタルサーバー【ConoHa WING】

こちらがおすすめですので、一度チェックしてみてください

ブログ立ち上げに必要な契約はたったこれだけ!

①ドメイン

当ブログでいうwhitefoodman.tokyoの【.tokyo】の部分を取得します。
種類によって価格も様々なので、それぞれチェックしてみましょう

②サーバーの契約

賃貸契約みたいなイメージですかね!
ネット上に家を借りて、家賃の支払いをしながら生活するための契約が
サーバー契約です!こちらも自分に合いそうなものをチェックです!

 

今契約するならこちらが圧倒的におすすめ!


  • この記事を書いた人
  • 最新記事

やまのり

ー飲食業歴10年以上ー ◇飲食業に関するお役立ち情報 ◇飲食業×副業の情報発信 ◇唎酒師によるおすすめグルメ ◇飲食業×健康 様々な経験を活かして、飲食業界のITリテラシーアップを目指してブログを運営しています。

-副業・スキル, 飲食現場役立ちツール

© 2023 ミノリアルライフ Powered by AFFINGER5