HTMLサイトをWordPressに移行する手順のまとめーその1

こんにちは!最近、HTMLサイトをWordpressに移行するという作業を何回か行う機会がありました。立て続けに同じような作業を行っていたので、だいぶ流れも覚えられたのですが、ちょっと時間が経ったらきっと色々忘れてしまうだろう・・・ということで、HTMLサイトからWordpressへの移行の手順についてまとめてみました。

自分の備忘録的な感じで書いたので、分かりにくいところも多々あると思いますが、何かのヒントになれば・・・。もし間違っているところや質問などあったらぜひコメント欄からご連絡いただけると嬉しいです!

HTMLサイトのコピーをローカルに作成

サーバーからローカルにコピー。バージョン管理システムなどを使っていない場合は、バックアップ用にzipファイル化しておくと万が一の時に解凍して元に戻せる。

 

HTMLファイルを整理する

HTMLファイルの中で同じような構成のページ(内容が違うだけ)のものは一つを残し、あとは別フォルダに移動する(あとで使うファイルやフォルダもあるので削除はしない)。

例えば、

  • トップページ
  • 会社概要
  • お問い合わせ
  • 製品一覧ページ
    • 製品情報ページ1
    • 製品情報ページ2
    • 製品情報ページ3
  • ブログ記事一覧
    • ブログ記事1
    • ブログ記事2
    • ブログ記事3

というような構成のサイトの場合、製品情報ページ1~3やブログ記事1~3は内容が違うだけでHTMLの構成はほぼ同じはずなので、製品情報ページ1のhtmlファイルのみを残す。ブログ記事も同様にブログ記事1のhtmlファイルのみを残す。

 

HTMLファイルとWordpressテンプレートとの対応を考える

WordPressテンプレート階層を参考に、HTMLサイトのページがそれぞれ、どのWordpressテンプレートで対応できるかを考える。

例えば、前述の例の場合、

  • トップページ ⇒ フロントページ(front-page.php)
  • 会社概要 ⇒ 固定ページ(page.php)
  • 問い合わせ ⇒ 固定ページ(page.php)
  • 製品カタログ ⇒ カスタムテンプレートファイル または archive-カスタム投稿タイプ.php
  • 製品情報 ⇒ 固定ページ(page.php) または single-カスタム投稿タイプ.php
  • ブログ ⇒ インデックス(index.php)
  • ブログ個別記事 ⇒ 個別投稿記事(single.php)

 

注意点1: トップページに使うのはhome.phpかfront-page.phpか

WordPressでブログではなくサイトを作成する場合、トップページはindex.phpにならないのでhome.phpかfront-page.phpを用意する必要があります。個人的にはフロントページをいつも使用。index.phpとhome.php、front-page.phpの違いや使い分けについては以下のサイトで確認。

WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い

 

注意点2: 製品カタログ(製品一覧)と製品情報のページの作り方

幾つか考えられる方法があるので、サイトに適したものを選ぶ。

製品カタログと製品情報ページを両方固定ページで作成

カスタム投稿タイプの作成がいらないのでその分、簡単。製品の数が少ない場合はこれで十分いけそう。この場合、カタログ(一覧)ページは、通常の固定ページで作るとなると、新しい製品を追加したり、古い情報を削除するたびに、カタログの内容を手動で編集しなくてはいけない。が、これは専用にテンプレート(カスタムテンプレートファイル)を作成すればok。

具体的には、

製品カタログ(親ページ)

―製品情報1(製品カタログの子ページ)

―製品情報2(製品カタログの子ページ)

―製品情報3(製品カタログの子ページ)

という風に固定ページの親子関係を指定しておき、製品カタログ用に、子ページの一覧を取得して表示するテンプレートを作成する。こうすれば、子ページが増えたり減ったりしても、カタログを編集することなく最新の情報で表示できる。

このあたりのやり方は以下のサイトが参考になりそう。

WordPressで親ページに子ページの一覧を表示する方法

 

製品情報をカスタム投稿で作る

より本格的なのがこっち。クライアントさんのほうで情報を追加・更新したいなどの要望がある場合は、カスタム投稿タイプを使って他の固定ページやブログ投稿と分けてあげるほうが分かりやすい。

例えば、製品情報(product)というカスタム投稿タイプを作成する場合、single-product.phpを用意すると、製品情報ページの表示の際は、このファイルを読み込んでくれる。(single-product.phpがない場合はsingle.phpで代用されます)

この場合、カタログ(製品一覧)は、専用のアーカイブページ(archive-product.php)を用意してもいいし、archive.phpやindex.phpので代用してもOK。あるいは、固定ページで、カスタム投稿タイプ一覧を取得して表示する専用のテンプレート(カスタムテンプレート)を用意するのもあり。

カスタム投稿タイプの具体的な使い方については以下のサイトが参考になっています。

 

カスタム投稿タイプの一覧ページ作成で参考になるサイト:

カスタム投稿タイプの一覧ページの作成

カスタム投稿タイプのアーカイブページを作成する

 

カスタム投稿タイプを一から設定するのに参考になるサイト:

WordPressのカスタム投稿(ポスト)タイプを作成するまでの手順リスト

 

カスタム投稿タイプとカスタムタクソノミーを初めて使う時に参考にしたいサイト:

カスタム投稿タイプとカスタムタクソノミーまとめ

 

WordPressテーマの基本的なファイルを作成

いよいよWordpressのテーマファイルにhtml内のコードを移行していく。まず、Wordpressテーマ用のフォルダをローカルに作成します。フォルダ名はテーマ名に合わせる(例えばnomadというテーマ名にする場合は、nomadという名前のフォルダに。)

いちばん基本的な以下のphpファイルとスタイルシートをフォルダ内に作成しておく。空ファイルでOKなので、以下に挙げる通りのファイル名で一通りファイルを作成!

 

共通部分のパーツファイル

  • header.php :ヘッダー部分
  • footer.php :フッター部分
  • sidebar.php :サイドバー部分

HTMLサイトでは基本、ヘッダーからフッターまで一つのファイルに記述していたものが、Wordpressでは幾つかのパーツごとにファイルを分けてコードを記述できる。ヘッダーやフッター、サイドバーのコードがそれぞれパーツ化されることで、メンテナンスもグッとしやすくなるのはありがたいですね^^

 

基本となるテンプレートファイル

  • index.php :ブログ投稿の一覧を表示させるテンプレート
  • front-page.php :サイトのトップページのテンプレート
  • single.php :個別投稿記事のテンプレート

これらのファイルに、header.php、footer.php、sidebar.phpを読み込む設定をし、それ以外のコンテンツ部分のコードを記述する。ちなみに、index.php、single.phpをある程度作り込んでからarchive.phpやpage.phpなどを作る方がラクなので、まずは上記のテンプレートファイルだけ作成していけばOK。

 

WordPressテーマに必須の二つのファイル

  • functions.php :関数を定義
  • style.css :スタイルを定義

functions.phpには、もともとのWordpressの設定を変更したり、拡張したりするための関数を記述するファイル。何も書かなくてもいいけど、このファイル自体が存在しないとWordpressテーマとして認識してもらえないのでファイルは必要。絶対何か記述する必要はでてきますけど^^;

style.cssにはCSSを記述し、他のphpファイルと同じ階層に配置しておきます。(cssフォルダ内とかに配置するのはNG)

 

 

ちょっと寄り道

実はWordpressテーマには、index.phpとfunctions.php、style.cssさえあればテーマとしては成り立ちます。なので例えば一枚モノのサイトを作るときは最低限の三つのファイルだけでもいいわけですよね。でもたいていの場合は、パーツを共通化したほうが便利だったり、ページによってレイアウトやデザインを変えたいはずです。私もまだまだですが、テンプレート階層をちゃんと意識して、必要なところは切り分けたり、別のテンプレートを使ったりと、サイトの構成に合わせてテンプレートファイルを用意していくのが良さそうですね。

テンプレート階層

 

元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行

WordPressに必要な基本ファイルが用意できたところで、HTMLファイルの内容を各phpファイルに移していく。

まずは何も編集せず、htmlファイルからphpファイルに該当する部分をコピペするだけ。例えば、以下のようなhtmlの場合には、こんな風にパーツごとにコピペしていく。

 

header.php

DOCTYPE宣言から始まって、<head></head>の部分、そしてサイトのヘッダータイトル、ナビゲーションメニュー部分まで。

上の例で言うと

の部分。

 

footer.php

サイトのフッター部分から最後の</body></html>まで。

 

sidebar.php

コンテンツのサイドバー部分。上の例だと、section#content内のsidebarのdiv。

 

残りの部分

で、残った部分のコードを、トップページのhtmlならfront-page.phpにコピペ、記事のhtmlならsingle.phpにコピペする。そして、ヘッダー、フッター、サイドバーがあったところを以下のようなコードに置き換える。

 

htmlの一部をphpコードに置き換える

htmlではサイトのタイトル名や読み込むcssやjavascriptのファイルの場所を直に書いていたが、Wordpressの場合、phpで動的に取得する。

一例をあげると、ヘッダー部分はこんな感じ。

<? php … ?>のコードに置き換わっている部分が動的に読み込まれる。

header.php、footer.php、sidebar.php、index.php、single.phpのコードの置き換えには、以下のサイトの解説が非常に分かりやすい。オリジナルテーマを作る手順の解説ですが、ベースとなるhtmlを作成してからそれをwordpress化するという方法で解説されているので、ループの部分なども含めて見ながらやるとラク!

WordPressオリジナルテーマの作り方

※front-page.phpの解説は上のサイトにはありませんがひとまずコンテンツ部分は編集しなくてもOKです。

 

 

style.cssとfunctions.php

style.cssの始めには必ずテーマの名前を設定する必要がある。以下のコードをコピペ。Theme Nameは必ず指定すること。他は必要な部分の情報を設定。

 

functions.phpによく使うコード。必要な部分をコピペして使う。

 

WordPressテーマをzip化し、アップロード

htmlサイトのほうで使っていたcss、js、imagesなどのフォルダ類を、この作業の最初の方で別フォルダに取り分けておいたところから移してくる。ただし、imagesフォルダには、サイトのデザインに関係した素材ファイルのみを移動させ、コンテンツに使う写真や画像ファイルなどは含めない。

HTMLサイトのトップページのスクリーンショットを撮って、screenshot.pngという名前でWordpressテーマフォルダ内に保存。

以下のファイルやフォルダ類が揃っていることを確認する。

  • header.php
  • footer.php
  • sidebar.php
  • index.php
  • front-page.php
  • single.php
  • functions.php
  • style.css
  • cssフォルダ
  • jsフォルダ
  • imagesフォルダ
  • fontフォルダ(あれば)
  • screenshot.png

 

確認できたら、zipファイルに圧縮。ここまででWordpressテーマづくりは一息^^

残りは、phpの処理の記述の間違いなどもあるかもしれない(というか必ずある!)が、そういったものは、WordPressにテーマをインストールしてからデバッグしていく。

 

この後の作業をリストアップ

ちょっと長くなってしまったので、Wordpressをインストールしてテーマをアップロードした後の手順は次回の記事にまとめます。残りの作業としては

  • WordPressのインストール(まだの場合)
  • テーマのアップロード
  • wp-config.phpをデバッグモードにする
  • PHPファイルの記述の誤りを修正していく
  • 残りのテンプレートファイル(page.php、archive.phpなどの作成)
  • メニューやウィジェットの作成
  • front-pageの編集
  • 基本的なプラグインの導入
  • パーマリンク設定
  • コンテンツの作成
  • 全体的な動作確認
  • リダイレクト設定(必要な場合)
  • wp-config.phpをデバッグモードをオフに
  • htmlからwordpressにトップページを切り替え

といった作業が残りのタスク。これらについて注意点や参考になるサイトなども含め次回まとめたいと思います。

超時短!ブラウザ上でCSSの編集がサクサクできる開発ツールの基本的な使い方

この記事ではウェブサイトの制作やカスタマイズでのCSS、HTML編集が何倍速にもなるツールの魅力と、基本的な使い方についてご紹介します。最近のブラウザには標準で備わっている開発ツールなので、もちろん無料ですし、一度使い方に慣れると「も~手放せない!」っていうくらい便利なので、まだ使っていない人はぜひ試してみてください。

ブラウザの開発ツールを使うと何が変わるのか?

プログラミングがあまりできなくても最近は、比較的簡単にウェブサイトやブログを自作することができますよね。サイトを簡単に作成できるオンラインアプリケーションを使ったり(有名どころだとWixとか)、テンプレート(Wordpressならテーマ)を利用たりすれば、HTMLやCSSの知識がほぼゼロの状態からでもサイト作成に挑戦することができます。

ただ、テンプレートを使ってサイト制作をするときでも、ちょっとしたカスタマイズをしたくなる、というのはよくあること。

例えば、簡単な例として「見出しの色と文字の大きさを変えたい」とします。さて、HTMLやCSSのどこをどんなふうに変更したらよいか?

もし、開発ツールを使わないとなると、手順はこんな感じになります。

開発ツールがない場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。
  4. CSSを変更し、保存する。
  5. ブラウザでサイトを再読み込みして、確認する。
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…
  7. …続く

面倒くさいですよね。こんな簡単なカスタマイズなのに時間はどんどん過ぎていきます。15分くらいは最低でもかかっちゃうんじゃないでしょうか。

親切なHTMLテンプレートなら、どこに、どのパーツが記述されているかコメントから判断できるようになっていますが、それでも、HTMLやCSSの知識があまりない段階は、何かを変更するにも一回一回時間がかかるものですよね。

WordPressなら、ダッシュボードから 外観>テーマの編集 のページに行くと、何やらわからないプログラミング言語が書かれたファイルがたくさん出てきて、勝手に障ったら何かが起きそうな危険な香りがしてきますし(苦笑)。

 

じゃあ、開発ツールを使うとこのプロセスはどうなるのか。ものの5分で終わると思います。

ブラウザの開発ツールを使った場合の手順

  1. HTMLファイル内で見出しが記述されているタグを見つける。→ブラウザ上で2クリック(3秒)で見つかる
  2. 見出しのhtmlタグや適用されているCSSクラスを確認。→ブラウザ上で確認(1秒)
  3. 見出しのスタイルが定義されている場所をCSSファイルから見つける。→ブラウザ上で確認(5秒以内)
  4. CSSを変更し、保存する。→ブラウザ上で気に入るまで変更(3分)し、気に入ったらCSSをコピーして該当するCSSファイルに貼り付け・保存。(1分)
  5. ブラウザでサイトを再読み込みして、確認する。→(5秒)
  6. 色やサイズが微妙だったらまた修正して、サイトを再読み込みして…→ なし(0秒)

お気づきと思いますが、開発ツールを使うとほぼブラウザ上で作業が完結します。HTMLファイルやCSSファイルを探して編集して、ブラウザで確認して・・・という時間のロスがなくなるので、とにかく早い!

とはいえ、文字で読んでいるだけではこの威力が分からないと思いますので、ぜひ以下の手順で基本的な使い方を覚えて自分で使ってみてください^^

 

開発ツールの使い方

開発ツールとは

紹介が遅れましたが、開発ツールとは、「プログラマーがWebアプリケーションを開発するときに、プログラミング上のミスを発見したり修正するために使うデバッグツール」のことです。HTMLやCSSなどの変更・修正に使える以外にも色々な機能があります。

ブラウザによって呼び方が多少異なり、Chromeではデベロッパーツール、Firefoxでは開発ツール、IEでは開発者ツール、Operaでは開発者用ツール、Safariでは開発メニューなどと呼ばれているようです。まぁ、どれも同じような感じですね^^

Safariの場合、メニューバーを確認して「開発」というメニューがない場合は、設定の「詳細」で「メニューバーに”開発”メニューを表示」にチェックを入れるようにしておいてください。

 

開発ツールの起動の仕方

ブラウザの設定ボタンからも探せますが、ショートカットキーで表示させる方が便利です。何回か使うと覚えられます。

開発ツールを表示させるショートカットキー

ChromeあるいはFirefox、Opera、Safariでは Ctrl + Shift + i (Windowsの場合)

IEの場合は F12

 

以降はブラウザChromeのデベロッパーツールを例に説明していきます。

ショートカットキーCtrl + Shift + i で起動します。するとこんな感じに表示されます。赤枠の部分がデベロッパーツールです。

デベロッパーツール1

現在ブラウザに表示されているページのHTML(左側)とCSS(右側)が同時に確認できるようになっています。機能は色々あるのですが、まずはこのHTMLとCSSのウィンドウだけで十分。あまり気負わずに使っていきましょう。

 

開発ツール上でCSSを編集する

では見出しの色と大きさを変更してみます。

 

まずは開発ツールの左上のほうにある検索マークをクリック(青色に変化します)し、見出しの部分にカーソルを移動してクリックします。(他のブラウザの場合、マークや位置が多少異なりますが、基本は左上にあるので探してみてください。)

デベロッパーツール2

 

すると、左側では、見出しのリンク(aタグ)のHTMLの位置がハイライトされ、そのaタグに適用されているCSSが右側にずらっと表示されます。

デベロッパーツール3

 

見出しのhtmlタグや適用されているCSSクラス(CSSセレクタ)を確認してみます。

左側のHTMLの部分を見ると、ちょっとキャプチャの文字が小さくて見づらいですが

  • 見出しはh2タグでpost-titleというCSSクラスが適用されている
  • 見出しのh2タグの中にaタグが入っている

ということがわかりますね。

デベロッパーツールHTML

 

右側のCSSを見てみましょう。スクロールしてみると、適用されているCSSがたくさんあることが分かりますが、上の方にに表示されているCSSが下のプロパティを上書きしているので、基本的には一番上に表示されているCSSセレクタの中身を編集していけばOKです。

#main-contents h2 a:link に適用されているCSSが、design.cssという名前のCSSファイルの328行目に定義されていることが分かります。

デベロッパーツールcss

 

ではデベロッパーツール内で見出しの文字色を変更してみましょう。下図のように、文字色(colorプロパティ)の値のところに表示されている■のところをクリックしてカラーピッカーを表示させます。

デベロッパーツール6

 

カラーピッカー上で色を選んでいきます。すると、その選択した色が瞬時に見出しに反映されます!これ、すごくいいですよね!プレビューしながら気に入る色が見つかるまでたっぷり悩めます(笑)

デベロッパーツール7

 

色が決まったら、今度はフォントサイズの変更ですね。

#main-contents h2 a:link セレクタに、文字サイズのCSSプロパティfont-sizeを加えてみましょう。下図で示すあたりをクリックすると、新たなCSSプロパティと値の入力欄が表示されます(下図の黄色いマーカー部分)。

デベロッパーツール8

 

入力欄には今回 font-size: 1.5em; と入力しました。

デベロッパーツール10

 

見出しの大きさの変更がちょうどいいかどうか、すぐに確認できます。大きすぎたり小さすぎたりしたときは、先ほど設定した値を変更して、またそれもすぐ確認できるので調節がしやすいですね。

デベロッパーツール9

 

開発ツール上のCSSの変更をCSSファイルに反映する

開発ツール上でのCSS変更がすべて終わったら、その変更をCSSファイルに反映させる必要があります。これを忘れてブラウザを再読み込みしたり閉じたりすると、せっかく色々検討しながら決めたCSSが消えてしまいますので注意してくださいね。

 

編集するCSSファイルは、開発ツールのCSSが表示されている部分にヒントがあります。下図のピンク枠にdesign.css:328と書かれていて、design.cssファイルの328行目を編集すればいいことがわかります。

テキストエディタなどでdesign.cssを開き、328行目~のところに下図の青枠の内容をコピペし、ファイルを保存します。

デベロッパーツール11

 

 

CSSの保存が完了したら、ブラウザにまた戻ってページを再読み込みしてみましょう!変更内容が反映されていれば完了です。

 

開発ツールを使いこなすには

今回の解説で扱ったのはほんの一部の機能ですが、この機能だけでもかなり時間の節約になることは想像できたでしょうか。

初めて開発ツールを使うときは、どこで何をしたらいいのかよく分からなくて、逆に時間が取られるかもしれません。「今までの方法のほうが自分には楽だ」と思ったりしがちですが、それは最初の2,3回だけで、少し慣れてくれば本当に大きな時間の節約になると思います。

開発ツールを使いこなすための一番の近道は、とにかく自分で使う!ということです。

ブラウザ上での編集なので、別にHTMLやCSSを変更して表示がぐちゃぐちゃになってしまっても、再読み込みすれば元の表示に戻せるわけですし、もとのCSSやHTMLファイルには何の影響もないので、仮にサイトが公開されていても他のユーザーには全く編集状況を見られることもありません。

他にもHTMLにタグを追加・削除したり、新たなCSSクラスを定義したり、Javascriptのデバッグをしたり・・・など、色んなことができますので自分のニーズに応じて色々試してみてくださいね^^

WordPressサイトをデバッグ!Pleiades All in oneの設定手順

この記事では、Wordpressサイトのローカル開発環境をXAMPPとEclipsePDTで作るための手順をまとめています。

WordPressでも既存のテーマを利用したシンプルなウェブサイトやブログなら、ローカルで動かさずに直接サーバーにアップしてコンテンツを追加していくので十分いけますし、ちょっとしたデザインの変更や機能の追加などもダッシュボードからの編集でなんとかなりますよね。

 

これまでは私のWordpressの利用レベルもそんな軽い感じだったのですが、最近、オリジナルテーマを作りはじめたり、クライアントから依頼されたウェブサイトに、条件検索フォームを組み込む必要がでてきたりして、一気に「デバッグできるローカル環境がほしい!」モードになってきました。

 

WordPressサイトをローカルホストで動かすのに欠かせないXAMPPは既に使用中だったのですが、これに加えてPHPのデバッグ環境がどうしても欲しくなり、久々にEclipseを使うことにしました。(この時のこの変数の中身がどうなってるのか見たい!!!って思っちゃうとね・・・)

Eclipseはプログラマー勤務時代にJavaの開発で使っていたのですが、当時から開発環境の設定は本当に嫌い(ぜったい何かしらで躓いちゃうから)で、Google先生にお世話になりつつ、あれこれ5日間くらい手間取ってようやく全てが何とか動くように。。こんな苦労は二度としないためにも、この記事に一発、手順をまとめておこうと思った次第です。

前提条件

今回、XAMPP + Eclipse PDTを使い始めるにあたって、「こんな条件下でゴニョゴニョやっていました」という前提条件をまず挙げておきたいと思います。

  • OS: Windows 7 (64ビット)
  • Cドライブ直下にxamppを設置済み
  • 複数のWordpressサイトをローカルホストにインストール済み

上記のような状況ですので、今回の記事は、Wordpressを初めてローカルホストにインストールするのではなく、ローカルホストで動いている既存のWordpressサイトをEclipseで編集・デバッグできるようにするという流れになっています。

 

最初の試みと失敗

以前もEclipseで開発環境を作るときはAll in One パッケージを使っていたという記憶があり、Pleiades All in One PHPというのがとっても便利そうだったので、これをダウンロードすることにしました。

Pleiades All in One PHPには、xamppも含まれ、xdebugというデバッガーもxamppに設定済みだったり、eclipseでphpで開発するためのPDTとか、eclipseでphpを動かすために必要なものが一通りそろっているようです。

ただ私の場合、すでにxamppは利用していたので、Pleiadesの中のxamppではなく、Cドライブ直下にあった既存のxamppと今回ダウンロードしたeclipseを組み合わせて使おうという考えになり、この方向で設定を進めていきました。

が、これが原因で、いろんなところでエラーが発生。。。

 

Eclipseのほうではwordressサイトが見れなかったり(アクセス権がないエラー)、そのエラーを治すためにApacheの設定をいろいろいじっているうちに、今度はブラウザからwordpressサイトのトップページ以外Object not foundエラーになり、パーマリンクの設定をしなおしたけど結局エラーは消えず・・・などなど。

まだまだ、開発環境の設定の怖さを甘く見ていた初日。 「やっぱりダメだったか・・・」と痛い思いをしながら解決を試みたものの、モグラたたきのようにあちこちで発生しつづけるエラーには収集がつかなくなりました。(トホホ)

 

そんなときに、とあるサイトで「素直にPleiadesだけ使えばすんなりいく」みたいな言葉を発見。この言葉でふと我に返り、既存のxamppを使うというこだわりはやめて、Pleiadesに含まれるxamppを利用しようという結論に至ったのでした。

ここまでが大体ウダウダしながら2日間。今まで使っていたPleiadesはごっそり削除して、新たにzipファイルを解凍してやりなおし。以下、あらためて手順はPleiadesをダウンロードするところから始めます。

 

Pleiades All in One PHPのダウンロード

ダウンロードサイト: http://mergedoc.sourceforge.jp/

まず上のサイトからPleiades All in One をダウンロードします。私の場合、eclipseの現時点の最新版Eclipse 4.4 Luna、64bit Full EditionのPHP版を選んでダウンロードしました。(結構ボリュームがあるzipファイルなので、場合によってはちょっと時間がかかります。)

 

ダウンロードが無事に終わったら、zipファイルを解凍します。ここでの注意点は、二点。

  1. 解凍する場所をデスクトップなどパスが深くなるところに解凍しない。エラーが起きる可能性があるので。cドライブ直下(C:\pleades)のようにパスが長くならない場所に解凍する
  2. 解凍ソフトにLhaplusを使わない。ちゃんと解凍ができないらしいです。知らないでLhaplusで解凍し、見事eclipse.exeが起動しませんでした。。Windows7デフォルトの展開ウィザードか、7zipを使う。私は7zipでいけました。

 

解凍も結構時間がかかるので気長に待ちましょう。私のようにすでにxamppを使っているという方は、ここでバックアップを取っておいてください。

 

既存XAMPPからデータをバックアップ

  • データベースのバックアップ

まず、以前に使っていたXAMPPを起動し、ApacheとMySQLをスタートさせて、phpMyAdminにアクセス。今後も利用したいデータベースをエクスポートしておきます。エクスポートは普通にデータベースを選んでエクスポートボタンをクリックすれば、ファイルのダウンロードがはじまります。

あと、xamppやmySQLにパスワードを設定している場合はそれもメモっておくと後で楽です。

 

  • ファイルのバックアップ

xamppフォルダのhtdocsの中にあるフォルダのうち、今後も利用したいものを別の場所にコピーしておきます。

 

ここまでできたら、XAMPPのコントロールパネルを終了します。Pleiadesのダウンロードが完了していたら、ここで一度PCを再起動しておきましょう。

※既存のxamppは残しておいても起動さえしていなければ、Pleiades内のxamppとの間で特に問題は起きないので、私はあえてアンインストールしないで進めました。(何かの時にすぐ戻せるように・・・)

 

Pleiades内のXAMPPの初期設定

解凍されたpleaiadesフォルダをエクスプローラで開き、その中のxamppフォルダ内からsetup_xampp.batを見つけてダブルクリックします。

次に、xampp-control.exeを実行し、コントロールパネルを開きます。いつものようにApacheとMySQLのstartボタンをクリック。

※Apacheの起動でエラーになる場合、既存のxamppが実行中になっていないか、またSkypeなどの他のプログラムとのポートのバッティングがないか、チェックしてください。(Skypeの設定が問題の場合は、Skypeにログインし設定>詳細>接続にて「追加の受信接続にポート80と443を使用」のチェックを外します。)

 

ブラウザからhttp:// localhost/xampp/にアクセスし、以下のように表示されればOKです。

xamppようこそ

ここで、セキュリティ関係の設定をします。

上のページの左サイドバーのメニューから「セキュリティ」をクリック。表示されたページに「これらのXAMPPページは一般的にネットワーク経由でアクセス可能です」「MySQLユーザルートにパスワードがありません」「PhpMyAdminはネットワーク上から自由にアクセスできてしまいます。」といった警告がある場合、設定が必要になります。

 

同ページの「そのような問題をすべて修正するには、単純に次のツールを使ってください。」の下にあるURL

http://localhost/security/xamppsecurity.php

にアクセスします。「MYSQL 項目: “ROOT” パスワード」と「XAMPPのディレクトリ制御 」の項目を入力します。これまでxamppを使っていた方は、その時のユーザー名、パスワードを入力しましょう。

 

http://localhost/phpmyadmin/にアクセスして、ログインが成功すれば初期設定完了です。

※phpMyAdminのアクセスでエラーが起き、エラーメッセージにconfig.inc.phpの設定がどうのこうのうと書かれている場合、pleiades/xampp/phpMyAdmin/config.inc.phpを開いて、/* Authentication type and info */のパスワード設定がちゃんとされているかチェックしてみてください。パスワードが設定されていない場合は、xamppのセキュリティページで入力したパスワードを入力してファイルを保存し、再度phpMyAdminにアクセスしてみてください。

 

XAMPPにバックアップデータを取り込む

既存xamppから移行したいデータがある方は、バックアップしておいたwordpressサイトのデータをpleiades内のxamppに取り込んでいきます。以下の2点を行います。

  1. xampp/htdocsフォルダ内からバックアップ(コピー)しておいたフォルダ・ファイル類をpleaiades/xampp/htdocs内に配置
  2. エクスポートしておいたmySQLのデータをphpMyAdminからインポート

 

ここまでできたら、ローカルホストからwordpressサイトにアクセスできるかチェックします。

http://localhost/wordpressサイトのルートフォルダ名/wp-admin/

で、ダッシュボードにアクセス。

※ここでデータベースのユーザー・パスワードに関するエラーが出たら、htdocs/wordpressサイトのルートフォルダ/wp-config.phpを開き、DB_USER、DB_PASSWORDに書かれているユーザー名、パスワードをphpMyAdminのユーザに追加してください。

 

無事にダッシュボードにアクセスできることが確認できたら、次はサイトのトップページや他のページを開けるかどうか確認しておきます。

 

さて、ここまででPleiades内のxamppの初期設定と、既存サイトデータの移行が完了しました。ここから、wordpressサイトのデバッグ環境=eclipse の設定を行っていきます!

 

 

EclipseにWordpressサイトをプロジェクトとして追加する

ここからが今回の肝、まずはpleiades/eclipse/eclipse.exeを実行し、eclipseを起動。起動には少し時間がかかるけど気長に待ちます。

もしここで起動されない場合は、zipの解凍がうまくいっていない可能性あり。Pleiades eclipse Luna 4.4の場合、pleiades/eclipseのフォルダ内は以下のような構成になっています。

pleiadesのeclipseフォルダ構成

見比べてフォルダがなんか足りないなと思ったらPleiadesを別の場所に解凍しなおし、その中のeclipseフォルダだけごっそりコピーしてくればOK。

 

起動されると、最初にワークスペースの場所を聞かれますが、今回はpleiades/xampp/htdocs/にwordpressサイトのフォルダを配置しているので、デフォルトで入力されている ../xampp/htdocs/のままでOKボタンをクリックします。

 

プラットフォームが表示されたら、ファイル>新規>PHPプロジェクトを選択。

ウィザードが表示されるので、プロジェクト名に今回編集したいwordpressサイトのルートフォルダ名(xampp/htdocフォルダに配置してあるwordpressサイトのフォルダ名)を入力します。

ここ、重要なので、しつこくキャプチャも載せておきますです。(こんなこと分からないのは自分くらいかもしれないですが、最初は適当なプロジェクト名を付けて全然うまくいかなかったので。。)

eclipseでPHPプロジェクト作成

 

このようにするとワークスペース(../xampp/htdocs/)内にあるwordpressサイトのフォルダ以下をプロジェクトとして編集することができるようになります。上記のウィザードでは、Javascriptサポートにチェックをいれてあとは「次へ」でどんどん進んで完了すればOKです。

以下のようにプラットフォームにwordpressサイトが追加されました!ツリーを展開して、wp-adminなどのフォルダやphpファイル類が読み込まれていることを確認してみてください。

eclipseにwordpressサイト追加

 

Eclipseでwordpressサイトをデバッグする

さて、Eclipseでwordpressサイトをデバッグするには、もう少し設定が必要になります。

ウィンドウ>設定>PHP>PHP実行可能ファイルを選択し、追加ボタンをクリック。

eclipse php実行ファイルの設定

名前のところには分かりやすいようにPHPのバージョンなどを入れておくといいです。実行可能ファイルとphp iniファイルをpleiades/xampp/php/php.exeとphp.iniにそれぞれ設定し、PHPデバッガーにXDebugを選択してOKをクリックします。

 

次に、デバッグの構成を作成します。

実行>デバッグの構成をクリックし、画面左側のPHP Webアプリケーションを右クリックして「新規」を選択します。

eclipseデバッグ構成1

 

以下のような画面が表示されたら各項目を設定していきます。

eclipseデバッグ構成2

名前は分かりやすいようにプロジェクト名などを入力します。

ファイルのところはプロジェクト名(ルートフォルダ)/index.phpを入力。

URLには、デバッグしたいページを設定します。トップページをデバッグしたい場合は自動生成をチェックすればいいですが、それ以外の場合は、自動生成のチェックを外し、そのページのURLに合うように入力する必要があります。ここがうまく設定できていないとデバッグがうまく行われないので注意してください。

 

次に「デバッガー」タブをクリックし、以下のようにデバッガーがXDebugになっていることを確認します。

eclipseデバッグ構成3

 

適用ボタンをクリックして閉じます。

以上で、デバッグの設定が完了しました!

 

実際にデバッグするには、XAMPPでApacheとMySQLが起動されている必要があります。起動していない場合は、XAMPPコントロールパネルでApacheとMySQLをstartさせましょう。

eclipseでデバッグを実行します。実行>デバッグをクリックしてもいいですし、緑色の虫マークをクリックしてもデバッグを開始できます。パースペクティブの変更のポップアップがでたら許可します。

index.phpの最初の行でブレークされればデバッグが無事、動いていることになります。ホッと一息ですね^^ デバッグしたい部分にブレークポイントを貼ってガンガン中身をチェックしてデバッグを加速させていきましょう!!

 

終わりに

WordPress + XAMPP + Eclipse(PDT)の組み合わせで検索すると、かなり親切な解説をしてくれているサイトが幾つかあってとても参考になりました。特に、以下のサイトの説明に大変お世話になりました。ありがとうございます!