Dreamweaver CS6とWordPressを連携させる

Adobe Dreamweaverでは、CS5からWordPressの連携機能が強化されています。
ライブビューでデザインを確認しながら制作を行うことができたり、WordPressのテンプレートタグをコードヒント機能で呼び出すことができます。

【記事執筆時の確認環境】
Windows 7 Professional 32bit SP1
Dreamweaver CS6
WordPress 3.8.1
XAMPP 1.8.1

ここでは、Windowsのローカル環境にXAMPPとWordPressを既にインストールしていることを前提とします。

設定の前にXAMPPは起動しておきます。

また、WordPressのパーマリンク設定は、「デフォルト」になっている必要があります。

Dreamweaverでのサイト設定

Dreamweaverを起動して、[サイト]メニューの[新規サイト]をクリックします。

サイト定義

サイト設定画面

サイト名(任意)と、ローカルサイトフォルダーを入力します。

ローカルサイトフォルダーには、WordPressをインストールしたフォルダを指定します。

サーバー定義

左メニューの[サーバー]をクリックしてから、[+]アイコンをクリックします。

サーバー定義画面

パネルの各項目を以下のように設定します。

サーバー名:
任意の名前を入力します。

使用する接続:
「ローカル/ネットワーク」を選択します。

サーバーフォルダー:
ローカルサーバー(XAMPP)をインストールした場所を入力しますが、
WordPressをインストールしたフォルダと同じにします。

Web URL:
ローカルでWordPressサイトのトップページにアクセスするURLを入力します。

サーバー定義パネル入力例

[保存]ボタンをクリックします。

サーバー定義済み画面

[リモート]のチェックを外し、[テスト]にチェックを入れます。

テストにチェックする画面

[保存]ボタンをクリックします。

「サイトキャッシュを更新中」のメッセージボックスが表示され、更新が終了するとメッセージボックスは消えます。

サイトキャッシュを更新中のメッセージボックス

ライブビューでのページの表示

WordPressをインストールしたフォルダ直下にある、「index.php」をDreamweaverで開いてみます。
関連ファイルツールバーに、動的関連ファイルが表示されていることがわかります。

動的関連ファイル表示状態のDreamweaver画面

次に、[ライブ]ボタンをクリックしてみましょう。
現在選択しているテーマでページが表示されます。

ライブビュー表示画面

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

サイト固有のコードヒント機能を設定すると、WordPressのテンプレートタグや変数を入力時に補完してくれます。

[サイト]メニューの[サイト固有のコードヒント]をクリックします。

コードヒント設定画面

構造に、"WordPress"が選択されているのを確認して、OKをクリックします。

コードヒントを表示するには、PHPのコードブロック内 にカーソルがあるとき、[Ctrl + スペース]を押します。

コードヒント表示画面

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ