どうしたらいいのNAVI

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

【WordPress開発環境】WordPressのテーマ・プラグインの開発環境を一から構築する[Windows7]

      2015/11/07


WordPressについて知れば知るほど、「オリジナルのテーマを作成したい」「自作のプラグインを開発したい」と考える事もあるでしょう。
オリジナルのテーマであっても自作のプラグインを開発する上でも、自分のパソコン上にWordpressの開発環境を整える必要があるでしょう。

 
最悪テキストエディタで開発する事もできますが、開発作業ともなるとあまりにも苦難の連続となりオススメはできません。

 
Wordpressに関連する開発作業では、やはりWordpressそのものがローカル環境で動作する必要もありますし、開発を支援してくれる統合開発環境の利用も欠かせないでしょう。
ここではWordpressのテーマやプラグインの開発環境を構築する(for Windows7)を簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 
【Wordpress開発環境】Wordpressのテーマ・プラグインの開発環境を構築する[Windows7]
 

 

WordPressのテーマ・プラグインの開発環境を一から構築する(Windows 7)とは

WordPressのテーマ・プラグインの開発環境を構築するというのは、Wordpress上で動作するWordpressのテーマとプラグインを開発する為に必要なIDE(統合開発環境)をパソコンにインストールしてプラグインやテーマの開発を進められるようにパソコン上の環境を整える事を意味しています。

 
Wordpressのテーマやプラグインを導入する前のWordpressを使い、何の記事も投稿されていない状態のWordpressを使いたい方はWordpressを一から構築するのが良いでしょう。

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

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

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

  • WordPressのテーマ・プラグインの開発環境を構築する
  • WordPress開発環境に必要なXamppの設定を行う
  • XamppにWordpressをインストールする
  • MySQLにWordpressに必要なデータベースを作成する
  • 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の設定」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。

 

 

 

MySQLにWordpressに必要なデータベースを作成する

【Wordpress開発環境】Wordpress初期設定で必要なデータベースの作成
Wordpressのデータベースの作成では、Wordpressがデータを保存・格納するのに利用するデータベースを作成します。
Wordpressは利用しているデータベースとしてMySQLを利用しているので、予めMySQLをインストールし、利用できる状態にしておく必要があります。

 
Wordpress初期設定のデータベース作成を手順としてまとめておくと次の流れで行います。

  • phpMyAdminへアクセスする
  • データベースの作成
  • データベースユーザーの作成

 
MySQLのインストール・起動が完了したら、実際にデータベースを作成したり、ユーザーを作成するにXamppにパッケージされている「phpMyAdmin」へアクセスします。
phpMyAdminへアクセスするにはXamppのApatcheを起動している状態で「http://localhost/phpmyadmin/」へアクセスします。

 
実際にアクセスした画面が次の画像の通りです。
phpMyAdminへアクセスする

 
Wordpressのデータベースの作成では、Wordpressがデータを保存・格納するのに利用するデータベースを作成します。
データベースを作成するの大まかな流れはphpMyAdminのトップ画面の「データベース」からデータベース作成に必要な情報を入力・選択した後、作成ボタンを押す事で、Wordpressで利用するデータベースを作成する事が出来ます。

まずはphpMyAdminのトップ画面の「データベース」を押します。
データベースの作成-1

 
画面の読み込みが終わると「データベース」画面に移動するので画面の「データベース名」と「照合順序」を設定します。

  • データベース名 : 任意のデータベース名(例:wp_db)
  • 照合順序 : utf8_general_ci

 
設定した例が次の画像の通りです。設定が終わったら「作成」ボタンを押してデータベースを作成しましょう。
データベースの作成-2

 
作成が完了すると一覧に作成したDBが追加されている事が確認できます。
データベースの作成-3

 
Wordpress専用のDBに対して、情報の参照や新規追加、更新などを行う事が出来るユーザーを追加していきます。
デフォルトで「rootユーザー」を利用する事が出来るのですが、このユーザーは他のDBも操作出来たり、DBそのものを削除出来たり出来てしまうユーザーでスーパーユーザーとしての役割があります。

 
Wordpressのユーザーとして利用できない事もありませんが、権限が強すぎるのでWordpressのDBを操作する専用のユーザーを追加して利用していきましょう。

 
データベースユーザの作成の大まかな流れは、データベースの一覧から、WordpressのDBの特権を確認し、新たに特権ユーザーを追加します。

 
データベースの画面のデータベースの一覧から、WordpressのDBの「特権をチェックする」リンクをクリックします。
データベースユーザーの作成-1

 
特権をチェックするリンクをクリックして、画面が読み込まれた後、「New」の項目の「ユーザーを追加する」リンクをクリックしましょう。
データベースユーザーの作成-2
 
「ユーザーを追加」画面に移動するので、実際にデータベースユーザーを作成する為の情報を入力していきます。
ユーザーを作成する為の情報は次のような形式で入力していきましょう。設定を入力するのは「ログイン情報」の部分だけで、ユーザー専用データベースとグローバル特権は設定を変更する必要はありません。

  • User name
    • (リスト選択):テキスト入力項目の値を利用する
    • (テキストボックス):任意のユーザー名(例:wp_db)
  • Host
    • (リスト選択):ローカル
    • (テキストボックス):localhost
  • パスワード
    • (リスト選択):テキスト入力項目の値を利用する
    • (テキストボックス):任意のパスワード
  • Re-type:パスワードで入力した値を再入力する

 
画像のイメージでは次の通りとなります。
データベースユーザーの作成-3

 
Wordpress開発環境を構築する際のWordpress初期設定で必要なデータベースの作成については「【WordPress開発環境】WordPress初期設定で必要なデータベースの作成」で簡単でわかりやすく詳しく紹介しているのでチェックしていってくださいね。


 

 

 

XamppにWordpressをインストールする

【Wordpress開発環境】XamppにWordpressを新規インストールする方法
Wordpressの開発環境を構築するで、Xamppをローカル環境(自分のPC環境)にいれたら、次は実際にWordpressをXamppにインストールする事でWordpressをローカル環境で利用可能な状態にする事が出来ます。

 
Xamppにはサーバーとして起動したときの「公開フォルダ」が存在するので、そこに新たにフォルダを作成し、作成したフォルダの中にWordpressのモジュールを格納する事でXamppにWordpressをインストールする事が出来ます。

 
Wordpress本体をすでに持っている人は良いのですが、Wordpress本体を持っていないという人は公式サイトから予めダウンロードしておく必要もあります。

 
XamppにWordpressをインストールする流れを手順としてまとめると次の通りです。

  • Wordpress本体を公式サイトからダウンロードしてくる
  • Xamppの公開ディレクトリにWordpress公開用フォルダを作成する
  • Wordpress公開用フォルダの中にWordpress本体を格納する
  • ブラウザでローカル環境のWordpressにアクセスする

 

【Wordpress】Wordpressの本体をダウンロードする方法
Wordpressの本体をダウンロードする方法というのは、Wordpressでブログを作成したり、Wordpressのテーマや開発環境を構築する上で必要な、Wordpressのモジュール群をダウンロードする方法の事を意味しています。

 
Wordpressの本体をダウンロードするには次の手順でダウンロードする事が出来ます。

  • Wordpressの公式サイトへアクセス
  • 公式サイトからWordpressの最新版をダウンロードする

 
Xamppはインストールされているフォルダの「htdocs」が公開フォルダとなっているので、公開フォルダの中に新規フォルダを追加します。
Xamppの中に「dousitaraiino」フォルダを新規作成した結果が次の画像の通りです。
Xamppの公開ディレクトリにWordpress公開用フォルダを作成する

 
Wordpress公開用フォルダの中にWordpress本体を格納していきましょう。

 
格納するのはWordpress公式サイトからダウンロードしてきたWordpressのコアファイル郡です。
Wordpressを解凍した本体の中身をすべて作成したWordpress公開用フォルダの中に移動しましょう。

 
例えば「dousitaraiino」のWordpress公開用フォルダを作成したのであれば、そのフォルダに対して次のようにファイルを格納します。(※格納ファイルのイメージはWordpressのバージョンによって異なります)

  • xampphtdocsdousitaraiinowordpressxmlrpc.php
  • xampphtdocsdousitaraiinowordpresswp-admin
  • xampphtdocsdousitaraiinowordpresswp-content
  • xampphtdocsdousitaraiinowordpresswp-includes
  • xampphtdocsdousitaraiinowordpressindex.php
  • xampphtdocsdousitaraiinowordpresslicense.txt
  • xampphtdocsdousitaraiinowordpressreadme.html
  • xampphtdocsdousitaraiinowordpresswp-activate.php
  • xampphtdocsdousitaraiinowordpresswp-blog-header.php
  • xampphtdocsdousitaraiinowordpresswp-comments-post.php
  • xampphtdocsdousitaraiinowordpresswp-config-sample.php
  • xampphtdocsdousitaraiinowordpresswp-cron.php
  • xampphtdocsdousitaraiinowordpresswp-links-opml.php
  • xampphtdocsdousitaraiinowordpresswp-load.php
  • xampphtdocsdousitaraiinowordpresswp-login.php
  • xampphtdocsdousitaraiinowordpresswp-mail.php
  • xampphtdocsdousitaraiinowordpresswp-settings.php
  • xampphtdocsdousitaraiinowordpresswp-signup.php
  • xampphtdocsdousitaraiinowordpresswp-trackback.php

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


 

 

 

WordPressの初期設定を行う

【Wordpress】Wordpressインストールと初期設定
Wordpressインストールと初期設定では、Wordpressをサーバー・もしくはローカル環境に設置したあとに、ブラウザからWordpressにアクセスし初期設定とインストールを行っていきます。
既にWordpress本体はサーバーに設置されている前提で作業を進めていくので、まだサーバやローカル環境にWordpressを設置していない人は予め設置しておきましょう。

Wordpressインストール後の初期設定は次の流れで行う事が出来ます。

  • Wordpressへブラウザでアクセスする
  • Wordpressで利用するデータベースの設定
  • Wordpressをインストールする
  • Wordpressの初期設定
  • Wordpressにログインしてみよう

 
Wordpressをサーバ・ローカル環境に配置したら、Wordpressへブラウザへアクセスしましょう。
サーバ・ローカル環境どちらにおいても「Apatche」が起動し、Wordpressそのものが公開ディレクトリに配置されていないとWordpressにアクセスする事が出来ないので注意しましょう。

 
Wordpressへブラウザでアクセスするにはサーバであれば「http://${ドメイン名}/」を入力し、ローカル環境であれば「http://localhost/${公開ディレクトリ名}」でアクセスする事が出来ます。

 
WordpressへブラウザでアクセスするとWordpress設定の導入画面になりますので、「さぁ、始めましょう!」ボタンを押して設定を開始しましょう。
Wordpressへブラウザでアクセスする-1

 
Wordpress導入画面でトップ画面から移動するとデータベースの設定画面へ移動します。
ここで、Wordpress上で利用するデータベースとMySQLに定義しているデータベースを関連付ける事が出来ます。
Wordpressで利用するデータベースの設定で入力する項目は次の通りです。

  • データベース名 : (MySQLで作成したWordpress専用のデータベース名)
  • ユーザ名 : (Wordpress専用データベースを扱えるユーザ)
  • パスワード : (ユーザのパスワード)
  • データベースのホスト名 : (データベースが稼働しているホスト名)
  • テーブル接頭辞 :(Wordpressテーブルの頭文字に着ける文字)

 
各項目を入力したら「送信」ボタンを押して、データベース設定を反映します。

 
ローカル環境にWordpressを配置した場合の入力例では次のような例になります。

  • データベース名 : wp_db
  • ユーザ名 : wp_db
  • パスワード : (任意のパスワード)
  • データベースのホスト名 : localhost
  • テーブル接頭辞 :wp_

Wordpressで利用するデータベースの設定-1

 
Wordpressのデータベースの設定が完了すると、インストールの確認画面になります。
インストール確認画面になったら「インストール実行」ボタンを押してインストールを実行しましょう。
Wordpressをインストールする

 
Wordpressのインストールが完了すると、Wordpressの初期設定画面に移動するので、必要情報を入力して初期設定を行っていきましょう。
万が一、初期設定を間違ってしまったとしてもWordpressの設定画面で設定を変更する事が出来ます。
ただし、設定を変更するにはWordpressへログインする必要があるので「ユーザー名」「パスワード」は忘れないようにどこかに控えておきましょう。
Wordpressの必要情報として次の情報を入力します。入力が終わったら「Wordpressをインストール」ボタンを押します。

  • サイトのタイトル
  • ユーザー名
  • パスワード
  • メールアドレス
  • プライバシー

 
次の画像は実際に入力してみた一例です。
Wordpressを初期設定する

 
Wordpressのインストール・初期設定が完了するとインストールが正しく完了した旨、表示されます。
Wordpressのインストール・初期設定完了画面に「ログイン」画面があるので「ログイン」ボタンを押してログインをしてみましょう。
Wordpressにログインしてみよう-1

 
また、URLで直接指定して入力するのであればサーバであれば「http://${ドメイン名}/wp-login.php」で、ローカル環境に構築したWordpressにログインするのであれば「http://localhost/${公開ディレクトリ名}/wp-login.php」でアクセスする事が出来ます。

 
ログイン画面を表示すると、ユーザ名・パスワードを聞かれるので初期設定時に設定したWordpressのユーザ名・パスワードを入力して「ログイン」ボタンを押してログインします。
Wordpressにログインしてみよう-2

 
ログインが完了し、Wordpressの管理画面にログインする事が出来ると、Wordpressが利用可能な状態である事が確認できます。
Wordpressにログインしてみよう-3

 
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のテーマ・プラグインの開発環境を構築する方法は次の流れで行います。

  • WordPressのテーマ・プラグインの開発環境を構築する
  • WordPress開発環境に必要なXamppの設定を行う
  • XamppにWordpressをインストールする
  • MySQLにWordpressに必要なデータベースを作成する
  • 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開発環境】XamppにWordpressを新規インストールする方法
Wordpressの開発環境を構築するで、Xamppをローカル環境(自分のPC環境)にいれたら、次は実際にWordpressをXamppにインストールする事でWordpressをローカル環境で利用可能な状態にする事が出来ます。

 
Xamppにはサーバーとして起動したときの「公開フォルダ」が存在するので、そこに新たにフォルダを作成し、作成したフォルダの中にWordpressのモジュールを格納する事でXamppにWordpressをインストールする事が出来ます。

 
Wordpress本体をすでに持っている人は良いのですが、Wordpress本体を持っていないという人は公式サイトから予めダウンロードしておく必要もあります。

 
XamppにWordpressをインストールする流れを手順としてまとめると次の通りです。

  • Wordpress本体を公式サイトからダウンロードしてくる
  • Xamppの公開ディレクトリにWordpress公開用フォルダを作成する
  • Wordpress公開用フォルダの中にWordpress本体を格納する
  • ブラウザでローカル環境のWordpressにアクセスする

 

【Wordpress開発環境】Wordpress初期設定で必要なデータベースの作成
Wordpressのデータベースの作成では、Wordpressがデータを保存・格納するのに利用するデータベースを作成します。
Wordpressは利用しているデータベースとしてMySQLを利用しているので、予めMySQLをインストールし、利用できる状態にしておく必要があります。

 
Wordpress初期設定のデータベース作成を手順としてまとめておくと次の流れで行います。

  • phpMyAdminへアクセスする
  • データベースの作成
  • データベースユーザーの作成

 

【Wordpress】Wordpressインストールと初期設定
Wordpressインストールと初期設定では、Wordpressをサーバー・もしくはローカル環境に設置したあとに、ブラウザからWordpressにアクセスし初期設定とインストールを行っていきます。
既にWordpress本体はサーバーに設置されている前提で作業を進めていくので、まだサーバやローカル環境にWordpressを設置していない人は予め設置しておきましょう。

Wordpressインストール後の初期設定は次の流れで行う事が出来ます。

  • Wordpressへブラウザでアクセスする
  • Wordpressで利用するデータベースの設定
  • Wordpressをインストールする
  • Wordpressの初期設定
  • 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デバッグ環境の設定

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

スポンサーリンク





 - Wordpress , , , ,

Message

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

  関連記事

【Wordpressプラグイン自作】プラグインで一番初めに実行されるPHPファイルはどれ?
【WordPressプラグイン自作】プラグインで一番初めに実行されるPHPファイルはどれ?

WordPressのプラグインを自作する場合であっても、インストールして利用して …

【Wordpress】オススメのプラグイン激まとめ タメになるプラグイン特集!
【WordPress】オススメのプラグイン激まとめ タメになるプラグイン特集!

WordPressでブログを運営していると色々なプラグインを利用していると思いま …

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

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

【Wordpressプラグイン自作】Wordpressのプラグインの初期化処理の方法(plugins loaded)
【WordPressプラグイン自作】WordPressのプラグインの初期化処理の方法(plugins loaded)

WordPressで自作プラグインを認識させ、アクションフックやフィルターフック …

【Wordpress】Wordpressでブログ運営する上で参考にしたい考察 
【WordPress】WordPressでブログ運営する上で参考にしたい考察 

WordPressはブログを運営する上でメジャーなCMSです。 Wordpres …

【Wordpress】HTMLの自動整形を停止する方法
【WordPress】WordPressのHTML自動整形を停止する方法

WordPressでブログを運営して記事を投稿している人の中には「テキスト」で記 …

【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!
【Autoptimize】JavaScriptを縮小化するAutoptimizeの基本設定 簡単設定!

Autoptimizeには基本設定と高度な設定があり、基本設定については初心者で …

【W3 Total Cache】全体設定(General Settings)を設定しよう!
【W3 Total Cache】全体設定(General Settings)を設定しよう!

WordPressを運営していて、W3 Total Cacheを利用している人は …

【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方
【Quick Adsense】Quick Adsenseで広告を掲載する設定と使い方

WordPressをブログを運営し、広告掲載の上でQuick Adsenseを導 …

【Autoptimize】HTMLを縮小化するAutoptimizeの基本設定 初心者でも簡単!
【Autoptimize】HTMLを縮小化するAutoptimizeの基本設定 初心者でも簡単!

AutoptimizeはWordpressのプラグインで、HTMLを縮小化する機 …