ブログカスタマイズはローカル環境で!XAMPPでWordPressをローカル環境にインストール! | 副LoG:FukuLoG

ブログカスタマイズはローカル環境で!XAMPPでWordPressをローカル環境にインストール!

アイキャッチWordPress

こんにちは。うりのすけです。
今までずっとブログのカスタマイズはWEB上で直接編集していました。でもこれってリアルタイムで ユーザーが アクセスしていたらコロコロデザインが変わって怪しく思いますよね?
なので自分のパソコン上にWordPressをインストールしてローカルで編集できる環境を作ることにしました。

今回は、自分のパソコンで操作・編集できるローカル環境を構築できるXAMPPというフリーソフトをインストールして自分のパソコン上にWordPressをインストールする方法をご紹介いたします。

ローカル環境でサイトデザインを変更したい」という方や、「自分でオリジナルのテーマを作ってみたい」という方はぜひ参考にしてみてください。

WordPressをローカル環境で編集するには

WordPressをローカル環境で編集するには

WordPressを動かすためには、

・ウェブサーバー
・SQLデータベース
・ウェブで動作するプログラム言語

が必要になります。

これをローカル環境で動作させるソフトを自分のパソコンにインストールして、そこにWordPressをインストールすることでローカル環境でWordPressを編集することができるようになります。

XAMPPとは

XAMPPはWindowsやMac OS Xなど色々なOSにローカル環境を簡単に構築するソフトです。本来は、それぞれの動作に必要なソフトをインストールしなければならないのですがXAMPPは一括でインストールすることで、すぐに開発環境を構築することができます。

XAMPPではそれぞれの動作は

・ウェブサーバー ⇒ Apache
・SQLデータベース ⇒ MySQL
・ウェブで動作するプログラム言語 ⇒  PHP

となります。

Mac OS Xを使用している方は、専用にアイ発されているMAMPというソフトがあるようなのでMacユーザーの方はそちらを使用する方が良いようです。

XAMPPのインストール

1.公式サイトでXAMPPをダウンロード
2.XAMPPをインストール
3.XAMPPの設定
4.ローカル環境にWordPressをインストール

1.公式サイトでダウンロード

まずは、公式サイトでソフトをダウンロードします。

XAMPP Download Success

上の方のタブのダウンロードをクリックします。

ダウンロード

お使いのOSの最新版をダウンロードしましょう(2019.12現在 Ver.7.3.12)

ダウンロード

XAMPPをインストール

ダウンロードが終わったら、インストーラーをダブルクリック

とりあえずNextです!

インストール

インストールするソフトの選択画面です。すべてチェックでOKです。
Nextをクリック!

インストール

インストールするフォルダの選択。そのままでNextです!

インストール

広告へのリンクです。チェックを外すと広告に飛ばないのでチェックを外してNextをクリックしましょう。

インストール

そのままNext

インストール

インストールが始まります。容量がおおいのでそこそこ時間がかかります(10分程度?)

XAMPPのコントロールパネルに行きますか?と聞かれているのでチェックを入れてFinishでインストールは完了です。

インストール

XAMPPの設定

先ほどの流れでコントロールパネルが開くので設定していきましょう。

手順としては、下記となります。

1.ApacheとMySQLの起動
2.MySQLのパスワード設定
3.MySQLにWordPress用データベースを作成

ApacheとMySQLの起動

まずは、ApacheとMySQLを起動させます。

コントロールパネル
Apacheが起動できない場合

他のシステムとポートが干渉している場合、起動できないことがあります。
ポートというのは、システムが通信するための部屋のようなもので1つのシステムに1つのポートしか使用できません。
なので干渉している場合、どちらかのシステムのポートを変更する必要があります

今回は、XAMPPのポートを変更する方法を説明します。
下図のNet Statをクリックします。
すると、ポート番号一覧が出てくるので、この中にない数字を選びます。
ポート番号

次にconfigをクリックするとControl Panelが開くので、Serice and Port Settingをクリックします。
config

ポート番号の設定に行くので、さっき確認した番号を入力します。
ポート番号

テキストエディタが開くので、「clt+f」で文字検索をします。
まず「Listen 80」を検索、80の部分をさっきの番号に変更します。
ポート番号

つぎに「localhost:80」を検索、80の部分をさっきの番号に変更します。
変更したら、テキストファイルを保存しましょう。
ポート番号

Control Panelにもどり、Apacheを起動してみましょう。
Apacheの文字の背景が緑になれば起動OKです。

MySQLパスワードの設定

初期状態ではMySQLのパスワード設定がされていないのでパスワード設定を行います。

Control Panelに行き、Shellをクリックします。

パスワード設定

すると、コマンドプロンプトが起動します。

パスワード設定

mysqladmin -u root password」を入力してEnterを押します。

New passwordと出てくるので、希望のパスワードを入力してEnterを押します。確認のためもう一度パスワード入力を求められるので先ほどのパスワードを入力してEnterを押したら完了です。

パスワード設定

コマンドプロンプトでの設定が終わったら、システムファイルの設定を変更します。

XAMPPをインストールしたフォルダに行きます。デフォルトのままならCドライブの直下にあります。

C:\xampp\phpMyAdminにある「config.inc.php」というファイルをテキストエディタで開きます。

下図のコードの中から赤下線の行の「*******」のところにさっき決めたパスワードを入力します。

パスワード設定

テキストファイルを保存すればパスワード設定は完了です。

WordPress用データベースの作成

今度は、WordPress用のデータベースを作ります。

Control Panelにもどり、MySQLのAdminをクリックし phpMyAdminを起動します。

左のリストの新規作成をクリックします。

SQLデータベース

データベースの作成画面になるので、好きなデータベース名を入力して作成をクリックします。

SQLデータベース

これで、データベースの作成が終わりXAMPPの全ての設定は完了です。

ローカル環境にWordPressをインストール

これからWordPressのインストールを行っていきます。

公式サイトからWordPressをダウンロードしましょう。

WordPressを入手をクリックします。

ダウンロード

ダウンロードをクリックします。

ダウンロード

ダウンロードしたファイルを解凍して、C:\xampp\htdocsにフォルダごと移動します。

htdocsに移動したフォルダは任意の名前に変更します。今回は「Original_Theme」とします。このフォルダ名がローカル環境でのWordPress URLとなるので「 localhost:(設定したポード番号、今回は80)/Original_Theme」がURLとなります。

名前を変更したら、ローカル環境のWordPressにアクセスしてみましょう。

ブラウザを立ち上げて先ほどのURL「localhost:80/Original_Theme」にアクセスします。

インストール画面が立ち上がるので赤枠をクリックします。

インストール

各項目を入力し、送信をクリックします。

・データベース名:wordpress(MySQLで設定したデータベース名)
・ユーザー名:root
・パスワード:コマンドプロンプトで設定したパスワード
・データベースホスト名:localhost(初期設定そのままでOK)
・テーブル接頭辞:そのままでOK(変更してもよい)

インストール

インストール実行をクリックでインストールが始まります。

WordPressのサイト情報入力画面になるので、各種入力してWordPressをインストールをクリックします。

成功しました!が表示されれば完了です。ログインをクリックしましょう。

ログイン画面になるので、ログインしましょう。

見慣れたダッシュボード画面に行けます。

ここでブックマークしておくと、またアクセスするときに便利なのでブックマークしときしましょう。また、

また、ローカル環境で編集をする際にはXAMPPのApacheとMySQLを起動しないとWordPressが動かないので注意が必要です。

最後に

最後に

今回は自分のPCにローカル環境を構築する方法をご紹介しました。

設定は少し面倒ですが、ローカル環境を構築できるメリットは大きいと思います。ユーザビリティーを考えるとオンラインでサイトをカスタムすることは良くないので導入をおススメします。

ローカル環境での作業ができるようになったので、オンライン上で行っていたサイトのカスタムは今後ローカルで実施するようにします。
そのうち自分でテーマ作成にもチャレンジしてみたいですね。


他のブログ運営記事は下記にまとめています。こちらも読んでみてください。

コメント

タイトルとURLをコピーしました