どうしたらいいのNAVI

どうしたらいいの?にお答えするサイト

【WordPress開発環境】レンタルサーバからローカル環境にWordPressをコピーし開発環境構築!

      2015/11/07


WordPressをレンタルサーバーを借りてブログ運営していると「レンタルサーバーからWordpressをダウンロードして開発環境を作りたいなぁ・・・」なんて事があります。
Wordpressについて知れば知るほど、「オリジナルのテーマを作成したい」「自作のプラグインを開発したい」と考える事もあり、レンタルサーバ上のWordpressの管理画面からいろいろとカスタマイズや開発作業を進めるのは、正直不可能です。

 
オリジナルのテーマであっても自作のプラグインを開発する上でも、自分のパソコン上にWordpressの開発環境を整える必要があるでしょう。

 
また、Wordpressに関係する開発を進めるとき、すでにレンタルサーバ上でWordpressを構築して本番環境として運用している場合は、レンタルサーバ上のWordpressをローカルにコピーして使用した方が開発作業が効率良く進むという事もあります。
 
Wordpressに関連する開発作業では、やはりWordpressそのものがローカル環境で動作する必要もありますし、開発を支援してくれる統合開発環境の利用も欠かせないでしょう。
ここではレンタルサーバからローカル開発にWordpressをコピーして開発環境を構築する(for Windows7)を簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Wordpress開発環境】レンタルサーバからローカル環境にWordpressをコピーし開発環境構築!
 

 

レンタルサーバからローカル環境にWordpressをコピーし開発環境構築する(Windows 7)とは

WordPressのテーマ・プラグインの開発環境を構築するというのは、Wordpress上で動作するWordpressのテーマとプラグインを開発する為に必要なIDE(統合開発環境)をパソコンにインストールしてプラグインやテーマの開発を進められるようにパソコン上の環境を整える事を意味しています。
また、開発作業に利用するWordpressそのものも、すでにレンタルサーバで使っている物があれば、それをローカル環境へコピーして開発作業を行うWordpressとして使えるようにします。

 
 
プラグインやテーマを自作したり、公開されているプラグインをダウンロード・インストールした後に自分好みにカスタマイズするにも、Wordpressの管理画面からのカスタマイズだけでは解析作業やコーディング作業が困難な場合があります。

 
そんな時は自分のパソコン上(ローカル環境)でワードプレスをテスト出来るようにセットアップして、統合開発環境上でプラグインやテーマを開発・カスタマイズするのが良いでしょう。

 
Wordpressのテーマ・プラグインの開発環境を構築する方法は次の流れで行います。

  • WordPressのテーマ・プラグインの開発環境を構築する
  • WordPress開発環境に必要なXamppの設定を行う
  • レンタルサーバ上のWordpressをローカル環境にコピーする
  • Xampp上のWordpressをEclipseに読み込ませ開発出来る状態にする
  • 開発しやすいようにEclipseの設定を変更する

 

 

 

WordPressのテーマ・プラグインの開発環境を構築する

【PHP】Windows7に開発環境をEclipseで構築! Eclipse Pleiades All in Oneの導入
PHPの開発環境を構築するには、IDE(投稿開発環境)であるEclipseを導入するのが良いでしょう。

 
Eclipseは高機能なエディタ機能や開発に必要な各種プラグインなどの機能が豊富にあり、ソースコードの入力補助機能などもあってPHPの開発をする上で作業効率や正確性を上げる上で必須ともいえる程の高機能開発環境を構築する事が出来ます。

 
Windows7に開発環境をEclipseで構築するには次の手順を行います。

  • IDE(統合開発環境)として「Eclipse(Eclipse Pleiades All in One)」をダウンロードする
  • Eclipse(Eclipse Pleiades All in One)をインストールする
  • Xamppをインストールする
  • 起動の確認を行う

 
IDE(統合開発環境)として、まずは「Eclipse(Eclipse Pleiades All in One)」をダウンロードしましょう。

 
Eclipse(Eclipse Luna Pleiades All in One)は次のサイトからダウンロードする事が出来ます。
Eclipse 日本語化 | MergeDoc Project

 
サイトへアクセスすると次のような画面になるので、現状で最新版となる「Eclipse 4.5 Mars Pleiades All in One」をクリックします。
IDE(統合開発環境)として「Eclipse(Eclipse Pleiades All in One)」をダウンロードする-1

 
次に実際にEclipseをダウンロードします。今回紹介するバージョンではWindows7で「64bit」のOSを利用しているので、ダウンロードするのは「64bit」と書かれたバージョンをダウンロードする事になります。

 
また、今後の開発の事を考え、最初はフルバージョンでダウンロードするのが賢明でしょう。
次の画像のように、列「PHP」から「64bit」の「Full Edition」の「download」を押して、日本語化されたEclipseをダウンロードしましょう。
IDE(統合開発環境)として「Eclipse(Eclipse Pleiades All in One)」をダウンロードする-2

 
Eclipseをダウンロードし、ダウンロードしてきたzipを解凍すると「pleiades」というフォルダがあり、各種フォルダやファイルが格納されています。
pleiadesフォルダには次のようなフォルダやファイルが保存されています。

  • pleiades-e4.5-php-jre_20151002(ファイル)
  • .metadata.default(フォルダ)
  • eclipse(フォルダ)
  • xampp(フォルダ)

 
画像のイメージで言うと次の通りですね。
Eclipse(Eclipse Pleiades All in One)をインストールする-1

 
pleiadesのフォルダごと、自分の扱いやすいフォルダに移動しましょう。
一般的には「Cドライブ」の直下に移動するのがお勧めです。「pleiades」フォルダを移動したらフォルダの名前を変更して「eclipse(japanese)」等と名前を付けておくと分かりやすいかと思います。

 
更に開発がしやすいようにEclipseを起動するときに使うEXEファイルをデスクトップにショートカットを作成しておきましょう。

 
次にEclipseをダウンロードした時に同梱されているXamppをインストールしましょう。

XamppはApache(Webサーバ)、MySQL(SQLデータベースサーバ)とWebプログラミング言語であるPHPや同目的で使われるPerlの4つの主要ソフトウェアとphpMyAdminなどの管理ツール、さらにSQLiteなど、いくつかの補助的なソフトウェアとライブラリモジュールが含まれているパッケージで、PHPの開発を進める上では導入が必須となっています。

Eclipseに同梱されているXamppを設定するには「pleiades」フォルダの中の「xamppsetup_xampp.bat」を起動する事で設定する事が出来ます。
「setup_xampp.bat」を起動すると次のような画面が表示され、Xamppがインストールされます。
Xamppをインストールする-1

 
次に、Xamppのコントロールパネルを起動します。Xamppのコントロールパネルは「setup_xampp.bat」のあったフォルダである「pleiades」フォルダの中の「xamppxampp-control.exe」を実行すると開く事が出来ます。

初回起動の場合、実行すると次のようなダイアログが表示され、利用する言語を選択するよう求められます。ここでは「英語」を表現するアメリカの国旗を選択しましょう。
Xamppをインストールする-2

 
言語を選択するとXamppの各種設定を行ったり、起動・停止を制御するコントロール画面が表示されます。今後はこの画面からMySQLやApatchなどの起動・停止の指示や設定を行っていく事が出来ます。
Xamppをインストールする-3

 
Eclipseをダウンロード・インストールする事が出来たら実際に起動出来るか確認してみましょう。
Eclipseの起動はデスクトップに作成したショートカット・もしくはEclipseをインストールしたフォルダの「eclipseeclipse.exe」を実行する事で起動する事が出来ます。

 
Windows7でPHP開発環境をEclipseで構築する方法について「【PHP】Windows7に開発環境をEclipseで構築! Eclipse Pleiades All in Oneの導入」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

WordPress開発環境に必要なXamppの設定を行う

【Wordpress開発環境】開発環境構築で必要なXamppの設定
Wordpressの開発環境構築で必要なXamppの設定というのは、自分のパソコン上であるローカル環境でWordpressのテーマやプラグインに必要な各種設定をXamppに行っていく事です。

 
WordpressはデータベースとしてMySQLを利用しているので、XamppにパッケージされているMySQLを有効化する必要があります。
また、Wordpressはサーバ上で動作する事が大前提としたつくりになっているので、ローカル環境をサーバとして使えるようにする「Apatche」もXamppから有効化していきましょう。

 
Wordpressの開発環境で必要なXamppの設定について手順としてまとめると次の通りです。

  • XamppのApatche(サーバ)のインストールと起動
  • XamppのMySQL(データベース)のインストールと起動

 

【Xampp】Apatcheのインストールと起動方法
Xamppではローカル環境として使用する上で必要な「Apatche」がパッケージされていて、XamppのコントロールパネルからApatcheのインストールと起動・停止をコントロールする事が出来ます。

 

XamppのApatcheはMySQLを扱うツールである「phpMyAdmin」を利用する上で必須なので、インストールし起動する必要があります。

 
手順としてまとめておくと、次のような手順を行います。

  • XamppコントロールパネルからApatcheをインストール
  • XamppコントロールパネルからApatcheを起動する

 

【Xampp】MySQLのインストール・起動方法
Xamppではローカル環境として使用する上で必要な「MySQL」がパッケージされていて、XamppのコントロールパネルからMySQLのインストールと起動・停止をコントロールする事が出来ます。

 
XamppのMySQLのインストール・起動方法を手順としてまとめておくと、次のような手順を行います。

  • XamppコントロールパネルからMySQLをインストールする
  • XamppコントロールパネルからMySQLを起動する

 
Wordpressの開発環境構築で必要なXamppの設定については「【WordPress開発環境】開発環境構築で必要なXamppの設定」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

レンタルサーバ上のWordpressをローカル環境にコピーする

【Wordpress】レンタルサーバからローカル環境にWordpressを移行する方法
レンタルサーバからローカル環境にWordpressを移行する方法というのは、レンタルサーバ上で稼働しているWordpressをローカル環境に移行する事で、Wordpressそのものやテーマやプラグイン、すでに投稿している記事内容をローカル環境で利用できるようにする方法です。

 
レンタルサーバからローカル環境にWordpressを移行する方法では、ローカル環境上にXamppが導入されていて、Wordpressを稼働する事が出来るよう構築が完了している事を前提としています。

 
サーバからローカル環境にWordpressを移行するには、「Wordpress本体」と「データベースのデータ」を別々にダウンロードする必要があります。
Wordpress本体にはWordpressと、プラグイン・テーマのファイルが含まれていて、データベースのデータにはWordpressを制御する各種データや記事等の情報があるため、別々にダウンロードし、ローカル環境に移行していく必要があります。

 
サーバからローカル環境にWordpressを移行するには次の手順を行いましょう。

  • レンタルサーバからデータベースをエクスポートしダウンロードする
  • ローカル環境のMySQLのデータをローカル環境用に編集する
  • ローカル環境のMySQLにダウンロードしたデータベースをインポートする
  • レンタルサーバからWordpressをダウンロードする
  • ダウンロードしたWordpressの各ファイルをローカル環境用に編集する
  • ローカル環境用に編集したWordpressをローカルのXampp上に配置する
  • ローカルのWordpress環境へアクセスしてみる

 
レンタルサーバからデータベースをエクスポートしダウンロードしましょう。

 
本来であればWordpressをダウンロードから行っていくのがわかりやすいかと思いますが、Wordpressダウンロード後のローカル環境用に編集する作業でデータベースの設定が絡んでくるため、先にデータベースの内容を移行するのが良いです。

 
レンタルサーバからデータベースをエクスポートするには、レンタルサーバ上で稼働している「phpMyAdmin」からエクスポートしましょう。
まずは、レンタルサーバ上のphpMyAdminにアクセスします。phpMyAdminにアクセスしたら「エクスポート」を選択しましょう。
レンタルサーバからデータベースをエクスポートしダウンロードする-1

 
エクスポートを選択したら、エクスポート画面に移動するので、次の設定を行ってファイルをエクスポートしましょう。

  • ダウンロードするデータベースを選択する
  • 「ファイルに保存する」にチェックする
  • ファイルの圧縮の形式に「sql」を選択する

 
実行すると、zip形式でSQLファイルをダウンロードする事が出来ます。

 
レンタルサーバーからデータベースの情報をダウンロードしてきたら、次にデータベースの情報をローカル環境用に編集しましょう。
編集する内容は、ダウンロードしてきたsqlファイルに含まれるレンタルサーバ環境用のドメインをローカル環境ように変更する編集を行います。

 
レンタルサーバーからエクスポートしてきたデータベースの情報には、本番環境のWordpressとして稼働する上で必要なドメイン情報が多数含まれているので、ドメイン部分をローカルで稼働できるように修正します。例えば、当サイトの「どうしたらいいのNAVI」の場合は「dousitaraiino.jp」がドメイン部分なので、これをローカル環境用の「localhost/dousitaraiino.jp」に置換する必要があります。

 
また、Wordpressの設定や記事の内容によっては「www.dousitaraiino.jp」という情報が記載されている事もあるので、こちらも「localhost/dousitaraiino.jp」に修正する必要があります。

 
レンタルサーバからデータベースのデータをダウンロードし、ローカル環境用に編集する事が出来たら、次にローカル環境のMySQLにダウンロードしたデータベースをインポートします。
ここではローカル環境のphpMyAdminを利用してインポートする方法を紹介します。

まず、ローカル環境のphpMyAdminの画面へアクセスしましょう。ローカル環境であれば「http://localhost/phpmyadmin/」でアクセス出来るかと思います。
アクセスしたら、メニューから「インポート」ボタンをおして、インポート画面を開きましょう。
ローカル環境のMySQLにダウンロードしたデータベースをインポートする

 
インポート画面を開いたら次の設定を行ってデータベースデータをインポートしましょう。次に紹介する項目以外はデフォルトのままでも大丈夫です。
設定が完了したら実行ボタンを押してインポートを実行しましょう。

  • アップロードファイル:(ローカル環境用に編集したデータベースファイル)
  • ファイルの文字セット:utf-8
  • フォーマット:SQL
  • エンコーディングへの変換:なし

ローカル環境のMySQLにダウンロードしたデータベースをインポートする-2

 
レンタルサーバからWordpressをダウンロードしてWordpress本体をローカル環境に移行できるようにしましょう。
レンタルサーバ上からWordpressをダウンロードするには「FFFTP」等のFTPツールを用いる必要があります。

 
ここではFFFTPを使ってレンタルサーバ上のWordpressをダウンロードしていきます。

 
まずは、FFFTPでレンタルサーバ上のWordpressを保存しているディレクトリにアクセスしましょう。レンタルサーバ上のWordpressのディレクトリにアクセスする次の各情報は契約しているサーバ毎に異なるので自分の契約しているサーバの情報を確認してください。

 
恐らくはサーバ契約時のメールなどで「FTPユーザー」や「FTPの接続先」等と記載があるはずです。また、ほとんどのレンタルサーバでサーバにログインするコンソール上からFTPについての情報を確認できると思います。

  • ホスト名(アドレス)
  • ユーザー名
  • パスワード/パスフレーズ

 
レンタルサーバにFTPで接続したら、実際にWordpressの保存されているディレクトリまで移動してください。
Wordpressの保存されているディレクトリまで移動したら、ディレクトリ内のすべてのファイルをダウンロードしましょう。
レンタルサーバからWordpressをダウンロードする-1

 
レンタルサーバ上からWordpressをダウンロードしてきたら、ダウンロードしたWordpressの設定ファイルをローカル環境用に編集しましょう。
サーバからダウンロードしてきたWordpressの設定ファイルは、サーバ上で稼働する設定になっていて、ローカル環境で稼働出来る設定にはなっていません。

 
ダウンロードしたWordpressをローカル環境用に編集する必要のあるファイルは次のファイルです。

  • wp-config.php
  • .htaccess

 
wp-config.phpには、Wordpressで利用するデータベースの各種設定についての記述があるため、データベース設定をローカル環境用に編集する必要があります。
wp-config.phpは、Wordpressをダウンロードしてきたままなら、Wordpres本体のディレクトリ直下にあります。

 
wp-config.phpでローカル環境用に修正しなければならない項目は次の通りです。wp-config.phpにはWordpressで利用するデータベースの設定が記述されているので、データベースの設定をローカル環境用に修正する必要があります。

  • Wordpressで利用するデータベース名
  • データベースユーザー
  • データベースユーザーのパスワード
  • データベースのホスト名

 

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', '${データベース名}');

/** MySQL データベースのユーザー名 */
define('DB_USER', '${データベースユーザー名}');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '${パスワード}');

/** MySQL のホスト名 */
define('DB_HOST', '${ホスト名}');

 

.htaccessファイルには、.レンタルサーバー上のコンフィグファイルを参照するように「.htaccess」ファイルがレンタルサーバーの機能として修正されている可能性があります。

 
なにもこれは悪意のある設定ではなく、レンタルサーバー上の機能をWordpressに適用する上での常套手段のようなものです。しかし、ローカル環境上では不要な記述で、サーバーエラーの原因となってしまいます。

 
Wordpressが動作する上で、最低限必要な記述は「# BEGIN WordPress」から「# END WordPress」までのコードです。
このコード以外はコメントアウトするか、削除します。

 
プラグインの設定によってもこのファイルは編集される可能性があるので、もしプラグインの挙動に影響があるのであれば、プラグインで追加されたコードは残すようにしましょう。ただし、どのコードがプラグインによって追加されたものかを判断できる知識が必要となります。

 
また、このコード内の「RewriteRule」はデフォルトで「. /index.php [L]」となっていますが、ここを「./${公開ディレクトリ名}/index.php [L]」に変更しましょう。

 
編集をしておかないと、Wordpressがリンクによって画面遷移をする際に「/xampp/htdocs/index.php」を参照してしまい、Xamppの管理画面に遷移してしまいます。
正しくは「/xampp/htdocs/${公開ディレクトリ名}/index.php」ファイルを参照し、リンクの挙動としてはWordpress内の各記事等に遷移するのが正しい挙動なので、先ほど紹介した記述に変更しましょう。

 
最終的にまとめると、「.htaccess」が次のような内容になればローカル環境上でWordpressを動作させる事が可能となります。
※${公開ディレクトリ名}は自分で作成した公開ディレクトリ名を設定してください。

 

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /${公開ディレクトリ名}/index.php [L]
</IfModule>

# END WordPress

 
ローカル環境用にWordpressを編集したら実際にローカルのXampp上に配置しましょう。
Xampp上では「xampp/htdocs」が公開ディレクトリになっているので、レンタルサーバーからダウンロードし、ローカル用に編集したWordpressを、このディレクトリに移動してWordpressを移行させます。

 
まずは、Xampp上に新規ディレクトリを作成しましょう。例では「dousitaraiino.jp」というディレクトリを作成しました。
ローカル環境用に編集したWordpressをローカルのXampp上に配置する-1

 
レンタルサーバからダウンロードし、ローカル環境用に編集したWordpressの本体をXamppのhtdocs内に移動しましょう。ここでは、先ほど作成した「dousitaraiino.jp」というフォルダに移動します。

 
移動したら、XamppのApatcheを再起動しましょう。

 
ここまででレンタルサーバ上からローカル環境上にWordpressを移行できているので、ローカル環境上のWordpressにアクセスして移行作業が完了しているか確認しましょう。
ローカル環境のWordpressはXamppに作成したディレクトリ名を用いて「http://localhost/${ディレクトリ名}」でアクセスする事が出来ます。

 
例えば、Xampp上に「dousitaraiino.jp」というディレクトリを作成したら「http://localhost/dousitaraiino.jp」で画面を表示する事が出来ます。
次の画面はブラウザからローカル環境に移行したWordpressにアクセスした結果です。

 
レンタルサーバ上で稼働していたテーマやプラグイン・記事内容が引き継がれてローカル環境上のWordpressを構築する事が出来ました。
ローカルのWordpress環境へアクセスしてみる-1

 
レンタルサーバからローカル環境にWordpressを移行する方法については「【WordPress】レンタルサーバからローカル環境にWordPressを移行する方法」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。


 

 

 

Xampp上のWordpressをEclipseに読み込ませ開発出来る状態にする

【Wordpress開発環境】XamppのWordpressをEclipseにインポートする方法
XamppのWordpressをEclipseにインポートする方法では、XamppにインストールしたWordpressをEclipseにインポートし、プロジェクトとして開発作業を出来るようにする設定です。

 
XamppのWordpressをEclipseにインポートする上ではXamppの設定とXampp上へのWordpressへの配置、インストールを完了させておく必要があるので、予め完了させておきましょ

 
XamppのWordpressをEclipseにインポートするには、Eclipseの機能を使って行うので、Eclipseは予め起動しておきましょう。
また、Xampp上のWordpressをEclipseにインポートする為に、EclipseのワークスペースはXamppの「htdocs」を指定しておく必要があります。

 
Wordpressをプロジェクトとしてインポートするには次の手順を行う事で実現することが出来ます。

  • PHPプロジェクト作成のウィンドウを開く
  • Xampp上に配置したWordpressと同じ名前のプロジェクトを作成する
  • Xampp上に配置したWordpressがEclipseにインポートされたか確認する

 
XamppのWordpressをEclipseにインポートするには、プロジェクトを作成する必要があるため、PHPプロジェクト作成のウィンドを開きます。
その後、Xampp上に配置したWordpressを同じ名前のプロジェクトを作成する事によって、WordpressのリソースがEclipseに認識・インポートされプロジェクトとして開発できる状態になります。

 
XamppのWordpressをEclipseにインポートする為、PHPプロジェクト作成のウィンドウを開きましょう。
PHPプロジェクト作成のウィンドウを開くにはEclipseのメニューから「ファイル」->「新規」->「PHPプロジェクト」を選択して開く事が出来ます。
PHPプロジェクト作成のウィンドウを開く-1

 
PHPプロジェクトの新規作成ウィンドウが開かれたら、Xampp上に配置したWordpressと同じ名前のプロジェクトを作成しましょう。
同じ名前を付けると新規PHPプロジェクトのウィンドウ下部に「既にプロジェクトが存在するので読みんでビルドパスを適切に構成しますよ」という旨のメッセージが表示されます。
また、JavaScriptサポートという項目で「このプロジェクトでJavaScriptサポートを使用可能にする」というチェックボックスがあるのでチェックボックスを入れておきましょう。

 
入力が終わったら「完了」ボタンを押してプロジェクトを新規作成し、WordpressをEclipseにインポートしましょう。

 
Xampp上に配置したWordpressと同じ名前のプロジェクト名を指定して、プロジェクトを作成する事で、Eclipse上からWordpressが認識され、Wordpresを開発できる状態にリソースをインポートしてくれます。

 
例えば、Xamppのhtdocsフォルダの中に「dousitaraiino」という名前でWordpressを配置していた場合は、EclipseのPHPプロジェクト新規作成で「dousitaraiino」と、同じ名前を付けてプロジェクトを作成します。

 
Xampp上に配置したWordpressと同じ名前のプロジェクトを作成する-1

 
実際にXampp上に配置したWordpressがEclipseにインポートされたか確認しましょう。
Eclipseのプロジェクト一覧に、作成したプロジェクトが追加され、中にWordpressのコアファイルなどを確認する事が出来れば正しくインポートする事が出来ています。
Xampp上に配置したWordpressがEclipseにインポートされたか確認する-1

 
XamppのWordpressをEclipseにインポートする方法は「【WordPress開発環境】XamppのWordPressをEclipseにインポートする方法」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

開発しやすいようにEclipseの設定を変更する

【Wordpress開発環境】Eclipseで開発をスムーズにするオススメの設定
Wordpress開発環境としてEclipseを使っていると、デフォルトのままでもWordpressの管理画面のエディタや、テキストエディタだけで開発を進めるのと比較するとかなり開発作業が効率化されます。

 
しかし、Eclipseのデフォルトの状態では開発作業のパフォーマンスを発揮できないシーンがあったり、デバッグの設定が出来ていない状態ですので、これらの設定を行った開発作業を十分スムーズに行えるようにしていきたいですよね。

 
開発環境であるEclipseで行うべきオススメの設定は次の通りです。

  • Eclipseが起動するブラウザの変更
  • Wordpressデバッグ環境の設定

 
Eclipeが起動するブラウザの変更によって、自分が普段使っているブラウザを指定する事で、開発作業をスムーズに進める事が出来ます。
また、Wordpressデバッグ環境の設定を行う事で、テーマやプラグインのデバッグを行い、プログラムが正しく動作しているか検証・テスト出来るように設定します。

 

【Eclipse】Eclipseで起動するブラウザを変更する設定
Eclipseで起動するブラウザを変更する設定では、EclipseでWeb画面を表示した時に起動されるブラウザをEclipseデフォルトの内部ブラウザから、パソコンにインストールされている別のブラウザに切り替える設定をします。

 
EclipseにはEclipseが用意した独自ブラウザが用意されていて、デフォルトでその内部ブラウザが設定されています。

 
ブラウザでの検証を自分が普段使っているブラウザで確認したい人や、テストの為に他の外部ブラウザに切り替えたい人は、Eclipseが用意している内部ブラウザではなく、外部ブラウザであるパソコンにインストールされているブラウザを指定する必要があります。

 
ここでは次のバージョンのEclipseを使ってブラウザを変更する設定を行っていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Eclipseで起動するブラウザを変更する設定の手順は次の通りです。この設定ではEclipseの設定項目を使ってブラウザの設定をしていくので、予めEclipseは起動しておきましょう。

  • Eclipse設定画面を開く
  • Webブラウザーの設定項目を選択する
  • 利用するWebブラウザーの設定を行う

 

【Eclipse】PHPのデバッグツールXdebugの設定と使い方
EclipseでPHPのデバッグを行うXdebugとは、Eclipseで使える高機能なPHPのデバッグツールの一つで、PHPのデバッグでおなじみの「var_dump」を見やすくしてくれたり、ボトムネックになっている処理を見つけたり、ステップ実行できたりします。

 
すでにXdebugをつかえるようになっている次のバージョンのEclipseを使って、Xdebugの設定と使い方を見ていきます。

  • Eclipse 4.5 Mars Pleiades All in One

 
Xdebugのデバッグの設定では次の設定を行う事でPHPアプリケーションのデバッグを行う事が出来ます。

  • デバッグの構成 設定画面を開く
  • PHP Webアプリケーションの新規構成
  • デバッグするサーバーの設定
  • デバッガーの設定
  • 共通設定
  • 名前を変更して適用しよう

 
Wordpress開発環境のEclipseで開発をスムーズにするオススメの設定については「【WordPress開発環境】Eclipseで開発をスムーズにするオススメの設定」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

 

スポンサーリンク


レンタルサーバからローカル環境にWordpressをコピーし開発環境構築する(Windows 7) あとがき

Windows7でレンタルサーバーからローカル環境にWordpressをコピーし開発環境構築する方法について紹介しました。

 
このページ自体かなり大きなものとなってしまいましたが、少しでもわかりやすいよう画像を多く使ったので実際の作業は、このページのボリュームと比較すると手順通り進めば意外とすんなりと済むのではないでしょうか。

 
Wordpressの開発環境を構築する上でXamppやEclipseといった専門的な用語があったかと思いますが、最初の内はこれらのツールが「使える」だけで良いと思います。
使っているうちに「これはこんなものなんだな」とすんなりと受け入れられる事もあるので、まずは習うよりも使って慣れるというのが良いのではないでしょうか。

 
デバッグについても、本来はとても重要な事なのですが、何が何だかわからないという人はとりあえず使ってみる、というのが良いかもしれません。
デバッグについて馴染みがない人はそもそもPHPに対してまだ慣れていない事もあるかもしれないのでPHP自体を使って慣れていくと、デバッグそのものの重要性を理解できるようになってくると思います。(というよりもデバッグが出来ないと開発作業は本当に進みません(`・ω・´))

 
テーマやプラグインの開発をする上で最低限必要な事はこのページに記したので是非ご活用いただければと思います。
レンタルサーバからローカル環境にWordpressをコピーし開発環境構築する(Windows 7)を使って、Wordpressのテーマ・プラグイン開発をスムーズに進めて頂ければと思います!

 

 

 

 

レンタルサーバからローカル環境にWordpressをコピーし開発環境構築する(Windows 7) まとめ

WordPressのテーマ・プラグインの開発環境を構築するというのは、Wordpress上で動作するWordpressのテーマとプラグインを開発する為に必要なIDE(統合開発環境)をパソコンにインストールしてプラグインやテーマの開発を進められるようにパソコン上の環境を整える事を意味しています。
また、開発作業に利用するWordpressそのものも、すでにレンタルサーバで使っている物があれば、それをローカル環境へコピーして開発作業を行うWordpressとして使えるようにします。

 
 
プラグインやテーマを自作したり、公開されているプラグインをダウンロード・インストールした後に自分好みにカスタマイズするにも、Wordpressの管理画面からのカスタマイズだけでは解析作業やコーディング作業が困難な場合があります。

 
そんな時は自分のパソコン上(ローカル環境)でワードプレスをテスト出来るようにセットアップして、統合開発環境上でプラグインやテーマを開発・カスタマイズするのが良いでしょう。

 
Wordpressのテーマ・プラグインの開発環境を構築する方法は次の流れで行います。

  • WordPressのテーマ・プラグインの開発環境を構築する
  • WordPress開発環境に必要なXamppの設定を行う
  • レンタルサーバ上のWordpressをローカル環境にコピーする
  • Xampp上のWordpressをEclipseに読み込ませ開発出来る状態にする
  • 開発しやすいようにEclipseの設定を変更する

 

【PHP】Windows7に開発環境をEclipseで構築! Eclipse Pleiades All in Oneの導入
PHPの開発環境を構築するには、IDE(投稿開発環境)であるEclipseを導入するのが良いでしょう。

 
Eclipseは高機能なエディタ機能や開発に必要な各種プラグインなどの機能が豊富にあり、ソースコードの入力補助機能などもあってPHPの開発をする上で作業効率や正確性を上げる上で必須ともいえる程の高機能開発環境を構築する事が出来ます。

 
Windows7に開発環境をEclipseで構築するには次の手順を行います。

  • IDE(統合開発環境)として「Eclipse(Eclipse Pleiades All in One)」をダウンロードする
  • Eclipse(Eclipse Pleiades All in One)をインストールする
  • 起動の確認を行う

 

【Wordpress開発環境】開発環境構築で必要なXamppの設定
Wordpressの開発環境構築で必要なXamppの設定というのは、自分のパソコン上であるローカル環境でWordpressのテーマやプラグインに必要な各種設定をXamppに行っていく事です。

 
WordpressはデータベースとしてMySQLを利用しているので、XamppにパッケージされているMySQLを有効化する必要があります。
また、Wordpressはサーバ上で動作する事が大前提としたつくりになっているので、ローカル環境をサーバとして使えるようにする「Apatche」もXamppから有効化していきましょう。

 
Wordpressの開発環境で必要なXamppの設定について手順としてまとめると次の通りです。

  • XamppのApatche(サーバ)のインストールと起動
  • XamppのMySQL(データベース)のインストールと起動

 

【Wordpress】レンタルサーバからローカル環境にWordpressを移行する方法
レンタルサーバからローカル環境にWordpressを移行する方法というのは、レンタルサーバ上で稼働しているWordpressをローカル環境に移行する事で、Wordpressそのものやテーマやプラグイン、すでに投稿している記事内容をローカル環境で利用できるようにする方法です。

 
レンタルサーバからローカル環境にWordpressを移行する方法では、ローカル環境上にXamppが導入されていて、Wordpressを稼働する事が出来るよう構築が完了している事を前提としています。

 
サーバからローカル環境にWordpressを移行するには、「Wordpress本体」と「データベースのデータ」を別々にダウンロードする必要があります。
Wordpress本体にはWordpressと、プラグイン・テーマのファイルが含まれていて、データベースのデータにはWordpressを制御する各種データや記事等の情報があるため、別々にダウンロードし、ローカル環境に移行していく必要があります。

 
サーバからローカル環境にWordpressを移行するには次の手順を行いましょう。

  • レンタルサーバからデータベースをエクスポートしダウンロードする
  • ローカル環境のMySQLのデータをローカル環境用に編集する
  • ローカル環境のMySQLにダウンロードしたデータベースをインポートする
  • レンタルサーバからWordpressをダウンロードする
  • ダウンロードしたWordpressの各ファイルをローカル環境用に編集する
  • ローカル環境用に編集したWordpressをローカルのXampp上に配置する
  • ローカルのWordpress環境へアクセスしてみる

 

【Wordpress開発環境】XamppのWordpressをEclipseにインポートする方法
XamppのWordpressをEclipseにインポートする方法では、XamppにインストールしたWordpressをEclipseにインポートし、プロジェクトとして開発作業を出来るようにする設定です。

 
XamppのWordpressをEclipseにインポートする上ではXamppの設定とXampp上へのWordpressへの配置、インストールを完了させておく必要があるので、予め完了させておきましょ

 
XamppのWordpressをEclipseにインポートするには、Eclipseの機能を使って行うので、Eclipseは予め起動しておきましょう。
また、Xampp上のWordpressをEclipseにインポートする為に、EclipseのワークスペースはXamppの「htdocs」を指定しておく必要があります。

 
Wordpressをプロジェクトとしてインポートするには次の手順を行う事で実現することが出来ます。

  • PHPプロジェクト作成のウィンドウを開く
  • Xampp上に配置したWordpressと同じ名前のプロジェクトを作成する
  • Xampp上に配置したWordpressがEclipseにインポートされたか確認する

 
XamppのWordpressをEclipseにインポートするには、プロジェクトを作成する必要があるため、PHPプロジェクト作成のウィンドを開きます。
その後、Xampp上に配置したWordpressを同じ名前のプロジェクトを作成する事によって、WordpressのリソースがEclipseに認識・インポートされプロジェクトとして開発できる状態になります。

 

【Wordpress開発環境】Eclipseで開発をスムーズにするオススメの設定
Wordpress開発環境としてEclipseを使っていると、デフォルトのままでもWordpressの管理画面のエディタや、テキストエディタだけで開発を進めるのと比較するとかなり開発作業が効率化されます。

 
しかし、Eclipseのデフォルトの状態では開発作業のパフォーマンスを発揮できないシーンがあったり、デバッグの設定が出来ていない状態ですので、これらの設定を行った開発作業を十分スムーズに行えるようにしていきたいですよね。

 
開発環境であるEclipseで行うべきオススメの設定は次の通りです。

  • Eclipseが起動するブラウザの変更
  • Wordpressデバッグ環境の設定

 
最後までお読みいただきありがとうございました。

スポンサーリンク





 - Eclipse, Wordpress ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定
【Head Cleaner】ブログを高速化するHead Cleanerのお勧めの設定

WordPressでブログのパフォーマンス高速化の為に、Head Cleaner …

【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ
【TinyMCE Templates】TinyMCE Templatesで出来る便利なカスタマイズ

ブログの定型文や決まり文句、JavaScript等々、様々なものをテンプレートと …

【Eclipse】Eclipseで起動するブラウザを変更する設定
【Eclipse】Eclipseで起動するブラウザを変更する設定

Eclipseを利用して、Webプログラムを作成している人は、Eclipseのブ …

【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法
【Stinger5】ウィジット機能を使ってGoogle Adsenseの広告を掲載する方法

WordPressのテーマであるStinger5にはデフォルトの基本機能として、 …

【Wordpress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!
【WordPress】プログラムコードをブログで紹介する方法 使いやすくてキレイ!

運営するブログによってはプログラムのソースコードを表示して紹介したい場合がありま …

【Head Cleaner】Google Ajax Libraries を使う設定!
【Head Cleaner】Google Ajax Libraries を使う設定!

Head Cleanerの設定にはGoogle Ajax Librariesを使 …

【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定
【Autoptimize】JavaScriptを縮小化するAutoptimizeの高度な設定

Autoptimizeには基本設定と高度な設定があり、高度な設定については技術的 …

【Stinger5】プラグインを利用してGoogle Adsenseを掲載する方法
【Stinger5】プラグインを利用してGoogle Adsenseを掲載する方法

WordPressでブログを運営している人で、テーマとしてStinger5を導入 …

【Wordpress】プラグインを使う上で絶対参考にしたい考察
【WordPress】プラグインを使う上で絶対参考にしたい考察

WordPressでブログを運営し、さまざまなプラグインを利用しオリジナリティあ …

【Wordpressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法
【WordPressプラグイン自作】管理画面の任意画面のヘッダー作成時に処理を実行する方法

WordPressのプラグインを自作していて、Wordpressの管理画面の任意 …