マネトラ

これからのお金と仕事と転職について

WEBスキル

ローカルにWordPress開発環境を構築。(XAMPP導入~Dreamweaver連携)

更新日:

WordPressのテーマを作成するにあたって、ローカルに環境構築した経緯と手順を紹介します。

WordPressのテーマを自分のPCで開発するメリット

手軽にテストできるから。無料ですし

WordPressのバージョンアップが正常に出来るか手軽にチェックしたり、プラグインを入れてみたり…。稼働中のサイトでは試せないようなことってありますよね。そんな時、最悪消えても問題ないテスト環境があると精神的にかなり楽になります

しかもそれが自分のPC(ローカル)で出来るとなれば、レンタルサーバーを借りたりドメインを取る必要が無い為、当然無料です

効率的に開発できる

通常WordPressのコードをいじる場合、

  1. ローカルに全ファイルをダウンロード
  2. 変更を加えて保存
  3. 変更したファイルをサーバーにアップロード
  4. ブラウザでリロードし確認作業
  5. ②に戻る

という流れになります。2~3行変更したらアップロードして確認しての繰り返しです。

数行程度のデザイン変更であれば問題無いですが、がっつりと変更する場合はこの毎回アップロードする作業が非常に手間になってきます。

その点、ローカルであればアップロードしなくても都度確認しながら作業が勧められ効率的です。

セキュリティ上安心できる

開発途中のサイトがユーザーに見られたり、クローラーにインデックスされたりするのは望ましくありません。

もちろんWEBサーバー上にあってもアクセス制限をかけてみられないように出来ますが、ローカルにある方が外部からアクセス出来ないため安全です。

WordPressをローカルで動かす為には何が必要…?

WordPressが動作に必要な要件

PHPとMySQLをサポートしている、HTTP接続可能なサーバーが必要です。大体のレンタルサーバーはそれらがサポートされているためWordPressのインストールが可能なのです。

自分のPCでは通常そのような環境が整っていないので、いろいろと準備が必要ということになります。

みんなどうやって環境構築しているの?

ローカル環境構築用のパッケージが無料で提供されているため、それを利用しています。XAMPPというパッケージが非常に有名ですが、最近ではお手軽さを重視したパッケージ等、いろいろと提供されています。

興味のある方は「Wordpress ローカル 環境」などでググると良いかと思います。今回は王道のXAMPPを使って環境構築したいと思います。

結構あっさり出来る!XAMPPを使ってローカル環境構築

XAMPPとはなんなのか

読みづらいですね。ザンプって呼んでます。ローカルでウェブアプリケーションを実行するための様々なソフトウェアをパッケージしたものです。読みづらい名前の由来は、各ソフトウェアの頭文字に由来します。

  • X:クロスプラットフォーム
  • A:Apache
  • M:MySQL
  • P:PHP
  • P:Perl

XAMPPダウンロード方法

早速ダウンロードしましょう。下記ページからインストーラをダウンロードします。

http://www.apachefriends.org/jp/xampp-windows.htmlapache friends xampp for windows

XAMPPインストール方法

特に変わった点は無いので、NEXTを押してインストール完了しましょう。名称未設定-1

早速XAMPPを起動しましょう

XAMPP起動方法

インストールが終われば自動的にコントロールパネルが起動します。(もしくはxampp-control.exeを実行しましょう) WordPressに必要なApachとMySQLのStartボタンを押してスタートさせましょう。名称未設定-2

エラーが出た場合

PORT80が使われているとエラーがでます。Skypeがインストールされていると使われている可能性が高い為、一時的に終了するか、PORT80を使わないよう設定しましょう。それでも解決しない場合は、下記ページを参考にすると解決するかもしれません。

WindowsでApache(XAMPP)が動かないときはポートをチェック→やっぱだめ→何とかなったAdd Star名称未設定-2

 XAMPPの初期設定をしておきましょう

XAMPPの設定画面にアクセスするには、ブラウザから「http://localhost/」を開き、日本語をクリックします。名称未設定-3

このような画面が表示されれば、正常にインストールされています。名称未設定-4

 セキュリティ設定

不正なアクセスを防ぐため、セキュリティの設定を最初にしておきましょう。管理者用のパスワードを設定するだけなのですぐ終わります。まずはサイドにあるセキュリティをクリック名称未設定-4

遷移先の「そのような問題をすべて修正するには、単純に次のツールを使ってください。」をクリック。名称未設定-4

遷移先の画面で

  1. MySQL用パスワード設定
  2. パスワード変更しましたボタンをクリック
  3. XAMPP用ユーザーとパスワード設定
  4. 安全なXAMPP~ボタンをクリック

を行います。パスワード設定後はMySQLを再起動しておきましょう。5

WordPress用のデータベース作成

レンタルサーバーなどにインストールする場合と同様に、WordPress用のデータベースを作成します。

データベース管理ツールのphpMyAdminへアクセスします。(サイドバーの「phpMyAdmin」をクリックするかhttp://localhost/phpmyadmin/をクリック。)

※先ほど設定したMySQLのパスワードでログイン出来ます。

6

 

ユーザタブから「ユーザを追加する」をクリック7

 

ユーザタブを選択し、ログイン情報を入力します。

  • ユーザ名:任意
  • ホスト:ローカルを選択
  • パスワード:任意

同名のデータベースを作成して全ての特権を与える」をチェックします。(これでユーザ名と同じ名前のデータベースが作成されます。)下部の「実行」をクリックします。8

これでXAMPPの設定は完了です。

いよいよローカルにWordPressをインストール

WordPressダウンロード

WordPress公式サイトよりダウンロートします。

WordPressインストール

WordPressを配置

ダウンロードしたzipファイルを解凍し、XAMPPのhtdocsフォルダ内にWordPressを格納します。CドライブにXAMPPがある場合下記のようなフォルダ構成になると思います。

C:/xampp/htdocs/wordpress/(wordpressは好きなフォルダ名で構いません。)

WordPressの初期設定

http://localhost/wordpress/にアクセスしましょう。初期設定画面が表示されるので、入力しましょう。

設定ファイルを作成するをチェック9

データベース情報を入力し送信をクリックします。11

その後、WordPressのユーザ名パスワードの設定画面がありますので、任意の値を入力しインストールを実行すると

成功しました!問題なければこのような画面が表示されます。12

動作確認をしましょう

もう一度http://localhost/wordpress/にアクセスしてサイトが表示されていることを確認しましょう。13

Dreamweaverと連携して効率的に開発しよう

僕がDreamweaverを使う理由

それは使っている人が多いから!コレにつきます。使っている人が多ければ解説記事が増え、困ったときの問題解決がしやすくなります。

また、phpやWordPressのコードヒントも出せるので重宝しています。

有料だし、重い時もあるし、デザインビューが信用出来ないこともあります。しかしながら(無駄に)高機能ですし、今後も更新され続けていくであろうソフトですので僕はDreamweaverを選びました。

ローカル環境でDreamweaverによるWordPressテーマ開発

サイトの管理からサイト情報の設定

サイト管理から新規サイトを追加し、XAMPP内格納したWordPressフォルダーを指定します。a1

サーバーから、サーバの追加をクリックします。a2

上記のように、サーバフォルダーにXAMPP内のWordPressを指定し、URLにはWordPressをブラウザから見るときのhttp://localhost/wordpress/を指定します。a3

リモートのチェックを外し、テストにチェックします。保存をクリックa4

 

キャッシュが始まりますので少し待ちます。a5

 

キャッシュが終わったら、試しにindex.phpを開いて、ライブをクリックしてみましょう!デザインが見れているのがわかりますね。a6

やっぱりブラウザでみましょう

とはいえ、ライブビューで見えている見栄えが絶対ではないことを認識しましょう。デザイン確認はブラウザで行ったほうが安心です。要所要所でブラウザから確認するようにしましょう。

まとめ

これでローカルでWordPressテーマをDreamweaverを使って開発する準備が整いました。

文章にすると長いですが30分あればできると思いますので、ぜひお試しください。

 

-WEBスキル
-, ,

Copyright© マネトラ , 2019 All Rights Reserved.