DreamweaverとWordPressを連携してテーマを編集する手順 第2回：ローカルにWordPressの制作環境を構築する

Dreamweaverl CC （2014年06月公開） 対応

この記事はアドビのDreamweaverを使ってWordPressのテーマを編集する手順を紹介するシリーズの第2回です。第1回ではWordPressの基本動作やテーマを構成する要素について紹介しました。今回は、WordPressの設定方法、ローカルサーバーのインストール、Dreamweaverのサイト設定、コードヒントの設定、テーマファイルのインストールとプレビューを扱います。

Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード

この記事は以下の項目から構成されます：

DreamweaverでWordPressテーマをプレビュー

DreamweaverでWordPressテーマをプレビューするには、ローカルのWebサーバーとWordPressをインストールして、 Dreamweaverにサイト定義を登録します。初めての人には大変な作業のように聞こえるかもしれませんが、ひとたび設定が済んでしまえば、あとはい くつでも必要な数のテーマを扱えます。

プレビュー動作の仕組み

テーマをプレビューするためDreamweaverにWordPressサイトを定義しても、Dreamweaver単体ではページのプレビューができません。ローカルにWebサーバーとWordPressのインストールが必要です（下図参照）。

WordPressテーマをDreamweaverでプレビュー

通常WordPressはWebサーバーのhtdocsのようなフォルダー内にインストールされます。テーマファイルは更にその下にインストールさ れます。Dreamweaverのサイト定義にテスト用のサーバーを追加し、htdocs以下のフォルダーを参照するよう指定すると、サイト内のPHP ファイルをライブビューでプレビューできます。

XAMPPかMAMPをローカルのWebサーバーとしてインストールする場合、PHPやMySQLも一緒にインストールできます。PHPはPHPファイルの解釈のために、MySQLはWordPressデータの保管用に必須の機能です。

ローカルWebサーバーの設定

手始めにローカル環境にWebサーバーを設定しておきましょう。MAMPやXAMPPを利用したWebサーバーのインストール手順やデータベースの設定の詳細は以下の記事をご覧ください。

WordPressのインストール

ローカルにWebサーバー環境ができたら、次はWordPressのインストールです。これが完了すればWordPressテーマを正しく表示できるようになります。

WordPressのインストール手順は以下のとおりです。

  1. WordPressサイトから最新版のWordPressをダウンロード
  2. ファイルを展開して、フォルダー内のファイルを全て（wordpressフォルダー自体ではない）ローカルWebサーバーのインストール時に作成されたhtdocsフォルダーの下に移動（下図参照）

Mac OS X上のWordPressファイルを配置した例

次はphpMyAdminを使ったWordPress用のデータベース作成です。phpMyAdminはMySQLの管理画面で、XAMPP, MAMPの一部としてインストールされます。詳細については以下の記事を参考にしてください

phpMyAdminの画面を開き、以下の手順でデータベースを作成します。なお、phpMyAdminは、ローカルのWebサーバーが実行中でないと使用できません。

  1. 「データベースを作成する」の下のテキストボックスにデータベース名としてwordpressを入力
  2. 「作成」ボタンをクリック

データベースが作成されたら、管理用のユーザーを追加します。

  1. 画面左上のホームアイコンをクリックしてメインページを表示し、特権をクリック
  2. 新しいユーザーを追加するをクリック
  3. 「テキストフィールドの値を利用する」がドロップダウンから選ばれていることを確認して、ユーザー名フィールドにWordPressのユーザー名を入力
  4. 「テキストフィールドの値を利用する」がドロップダウンから選ばれていることを確認して、パスワードフィールドにパスワードを決めて入力
  5. もう一度入力してくださいフィールドにパスワードを再入力
  6. グローバル特権のすべてのオプションはデフォルトのままにして「実行する」をクリック
  7. 特権画面に戻ったら、先ほど作成したユーザー名の右にある特権を編集アイコンをクリック
  8. データベースに固有の特権、の場所にある、データベースに特権を追加ドロップダウンから、先ほど作成したデータベース名を選択
  9. すべてチェックするをクリックしてすべての特権を選択し、次に、実行をクリック
  10. 結果ページで、ページ上部にある「サーバ」の後に続くホスト名を確認（通常はlocalhost）

最後に、WordPressとデータベースを接続する、WordPressインストールスクリプトを実行します。

  1. ブラウザーを開き、次のアドレスを入力：http://localhost/wp-admin/install.php
  2. 設定ファイルの通知が表示されたら新しい設定ファイルを作成するためのボタンをクリック
  3. データベース情報入力画面に進み、作成したデータベース名を入力
  4. 作成したユーザー名とパスワードも入力
  5. ホスト名に上で確認した名前（localhost）を入力
  6. 「作成する」をクリック

WordPress設定用のデータベース情報を入力する画面

以上がWordPressインストールの前準備です。後は、画面の指示に従って、ブログのタイトルや、ブログ管理用のユーザー名とパスワードなどを入力し てインストールを進めます。インストールが完了するとWordPressサイトの管理画面が表示されます。ここからログインして、ブログ記事を追加した り、テーマを変更したりできますが、ここではそのままブラウザーを閉じましょう。

テーマののインストールとDreamweaverのサイト設定

ローカルにWebサーバーとWordPressがインストールされたら、次はDreamweaverのサイト設定です。この記事に添付されているサンプルをサイトのテーマに使います。

テーマファイルのインストール

サンプルファイルをダウンロードして展開したら、そのコンテンツをWordPressのテーマフォルダーにコピーします。テーマフォルダーの場所は以下を確認してみてください。

通常、テーマごとに必要なファイルがフォルダー内にまとめられています。今回のサンプルでは、フォルダー名はMyThemeとして、コピー後のフォルダーのパスは以下のようになります。

WordPressにテーマを設定

では、WordPressが、新しく追加したテーマファイルを使用するよう設定してみましょう。

  1. ブラウザーを開きWordPress管理画面を表示 (通常は http://localhost/wp-admin/)
  2. WordPressにログイン
  3. 左のサイドバーの「外観」をクリック。テーマの編集画面が表示されない場合は、「外観」の下のリストから「テーマ」を選択
  4. 「Adobe Developer Connection Theme 1.0」の下にある「有効化」をクリック
  5. ブラウザーを開き、http://localhost/ を入力。テーマが変更されたことを確認

Dreamweaverにサイト設定

テーマファイルの設定が完了したら、Dreamweaverから編集やプレビューができるように設定します。まず、以下のステップでサイト設定を行います。

  1. Dreamweaverの「サイト」メニューから「新規サイト」を選択
  2. サイト設定のダイアログボックスが表示されたらサイト名を入力（例えば MyTheme）
  3. ローカルサイトフォルダーには、XAMPPやMAMPのインストール先のhtdocsを指定
    Windows：C:xampp
    Mac OS：Macintosh HD/Applications/MAMP
  4. 「保存」をクリック

サイト設定についてより詳しくは「Dreamweaver入門 第1回 サイト設定がDreamweaverのカナメです」をご覧ください。

新記サイト設定ダイアログ画面

サイト設定にローカルWebサーバーの情報も追加します。DreamweaverでWordPressテーマをテストする際、必要な処理がこのサーバーで実行されます。

より詳細な手順はPHP学習のススメ 第1回 DreamweaverでPHP内の「PHPのでサイト設定をして、ライブビューをしよう」の箇所をご覧ください。

  1. 「サイト」メニューから「サイトの管理」を選択
  2. 先ほど追加したサイト名の行をダブルクリックしてサイト設定ダイアログを開く
  3. 左のサイドバーから「サーバー」を選び、表示されたテーブルの下にある「＋｝ボタンをクリック
  4. サーバー名、使用する接続、ルートディレクトリ、Web URL（http://localhost/）を入力
  5. 詳細設定タブをクリック、テストサーバー欄のサーバーモデルにPHP MySQLを設定
  6. 保存したら、リスト内の追加したサーバーの行を見て、「テスト」にチェック

以上でDreamweaverのサイト設定は完了です。WordPressのデザインをライブビューで確認できます。

サイト固有のコードヒント設定

Dreamweaverには、Wordpressのようなフレームワークを使用する際、コードビューにフレームワーク固有のコードヒントを表示する 機能があります。コード編集時にタグや編集を保管してくれるため、テーマの編集には大変便利です。WordPressのコードヒントを表示するには、「サ イト固有のコードヒント」ダイアログを使って、サイトごとに構成ファイルを生成します。

  1. 「サイト」メニューから「サイト固有のコードヒント」を選択
  2. 表示されたダイアログボックスの「構造」に「Wordpress」を指定
  3. 「サブルート」フィールドの右のフォルダボタンをクリック、htdocsフォルダー（WordPressがインストールされている場所）を指定

サイト固有のコードヒントの設定画面

  1. 確認のパネルが表示されたら「OK」をクリック、設定画面も閉じる
  2. Dreamweaverのファイルパネルにdw_php_codehinting.configが追加されたことを確認。（このファイルを削除するとサイト固有のコードヒントが使用できなくなります）

ファイルパネルに追加されたdw_php_codehinting.config

コードヒントを使ってみる

さっそくコードヒントを使ってみましょう。以下は簡単な使い方を確認する手順です。

  1. Dreamweaverのファイルパネル内のindex.phpをダブルクリックして開く
  2. ドキュメントツールバーの「コード」をクリックしてコードビューに切り替える
  3. 2行目にカーソルを移動（<?php get_header(); ?>の下）
  4. <?php ec と入力してから、Ctrl+スペースキーでPHPのコードヒントを表示させる
  5. 入力した <?php ec を削除する
  6. 2行目に今度は <?php wp と入力
  7. Ctrl+スペースキーで、サイト固有ののコードヒントを表示させる
  8. さきほどの入力に続けて _lis とタイプ（<?php wp_lis となる）。コードヒントの表示が変化することを確認
  9. コードヒントのリストから wp_list_pages($args) をクリック（その行の右のpost-template.phpは、wp_list_pages($args)が見つかった場所を示す）

サイト固有のコードヒント

  1. エスケープキーを押してコードヒントを閉じる
  2. 「ファイル」→「閉じる」→「いいえ」と選択し、保存せずにファイルを閉じる

WordPressページのプレビュー

最後にDreamweaverのライブビューを使ってWordPressのPHPファイルをプレビューしてみます。ライブビューはブラウザーと同様 の表示を確認しつつ、ページをビジュアル編集できる環境です。ブラウザーごとの表示の違いを確認するため、「ブラウザーでプレビュー」メニューも平行して 利用可能です。

プレビューするにはローカルのWebサーバーが実行中でなければなりません。ブラウザーにhttp://localhostと入力することで、サーバーが動作しているかを確認できます。

  1. htdocsフォルダー直下のindex.phpを開く
  2. ドキュメントツールバーの「デザイン」もしくは「ライブ」をクリック
  3. ドキュメントツールバーに「デザイン」と表示されていたらドロップダウンから「ライブ」を選択

ライブビューに表示されたWordPressページ

  1. 「ライブ」の右側にあるライブコードを表示するボタンをクリック。分割ビューのコードビュー側に、PHPコードではなく、描画されているソースHTMLコードが表示されることを確認
  2. ライブビューを操作して、HTMLコードが動的に更新される様子を確認
  3. 「ライブコード」ボタンを再度クリック、「コード」をクリックしてPHPコード表示に戻る

次のステップ

必要な設定が完了したら、いよいよテーマファイルの編集です。次の記事では、実際にテーマを編集して、スタイルを変えたり、ロゴやメニューを追加します。