@ WordPress

WordPressとDreamweaverCCを連携させる

DreamweaverCS5からはWordPress(他にも一部のCMS)との連携が更に強化されていますので、DreamWeaverCC と連携させる方法を紹介します。

サイト定義

まずはサイト定義を行います。[サイト]->[新規サイト]を選んで、[サイト設定]ダイアログを表示させます。[サイト]カテゴリの[サイト名]は、複数のサイト定義を区別するために利用するもので、任意の名前で構いません(例ではWordPressとしています)。[ローカルサイトフォルダー]に、ローカルサーバーの「WordPressのインストールディレクトリ」を指定します。

テストサーバーの定義

次に[サーバー]カテゴリを選択します。左下にある[+]ボタン(新規サーバーの追加ボタン)を選択し、新規サーバーを追加します。

表示されたパネルに下記の項目を入力します。

  • サーバー名:サーバーの名前(複数のサーバーと区別するために利用されるもので、任意の名前でOKです)
  • 使用する接続:ローカル/ネットワーク
  • サーバーフォルダー:ローカルサーバーをインストールした場所
  • Web URL:http://localhost/【WordPressのインストールディレクトリ】

新規サーバーを登録したら、リモートのチェックを外し、テストにチェックを入れます

[保存]ボタンをクリックすると、サイトのキャッシュが更新されます。

動的関連ファイルの検索

サイト設定が完了したら、デフォルトテーマのサイトをDreamweaverで開いてみましょう。サイトのメインページのファイルはindex.phpです。

[ファイル]パネルからindex.phpを開きます

すると、ビューの上部に「このページにはサーバーのみによって検索される動的関連ファイルがある可能性があります。」とメッセージが表示されるので、[検索]をクリックします。その後、[スクリプト警告]ダイアログが表示されるので、[はい]ボタンを選択します。

メッセージ横の[検索]をクリックします

[はい]ボタンを選択します

ライブビューで表示してみる

ビューの表示を[表示]メニュー→[コードとデザイン]を選択して分割ビューに切り替えると、デザインビューには何も表示されません。ビューの上部に「このページには、デザインビューで表示できないサーバー処理ディレクティブがあります。ライブビューに切り替えてください。」とメッセージが表示されるので、[ライブビュー]ボタンをクリックします。

WordPressサイトのリンク部分をクリックしてもページは遷移しませんが、Ctrlキー(Commandキー)を押しながらクリックすると、Dreamweaverのウィンドウ内で遷移できます。

連続してページ遷移したい場合は、[ライブビューオプション]ボタンをクリックし、[リンク先を連続表示]にチェックを入れると、Ctrlキー(Commandキー)を押さなくても、クリックだけでページ遷移できるようになります。

[戻る][進む]ボタンも表示されるので、これらのボタンでも遷移できます。

インスペクトでテーマの構造を把握する

上部にある[インスペクト]ボタンをクリックすると「インスペクトモード」と呼ばれる状態に切り替わります。

この状態で各要素にマウスオーバーさせると、カラフルな矩形が表示されます。水色は要素のボックスの内容部分、黄色はマージン、紫色はパディングを意味します。矩形のツールチップには、マウスが指している領域のHTMLタグやclass名、id名、幅と高さが表示されます。

HTMLタグ、class名、id名がわかれば、CSSでスタイルを定義したり変更したりすることが容易にできるでしょう。

矩形が表示された状態で、キーボードの[<]キーを押すとその親要素に移動し、キーボードの[>]キーを押すとその子要素に移動します。

矩形が表示されている状態でクリックすると、表示をロックできます。ロックすると、そのまま他の操作を行うことが可能です。画面のどこかをクリックすると、インスペクタモードが終了して、ロックが解除されます。

インスペクトモードで様々な要素をマウスで指していくと、[CSSデザイナー]パネルの表示がコロコロ変わることに気づくと思います。[CSSデザイナー]パネルは、CSSを変更する際に役立つ便利な機能です。

WordPressのコードヒント

WordPresssには独自のテンプレートタグや変数が多数存在します。Dreamweaver CCでは「サイト固有のコードヒント」という機能があり、テンプレートタグや変数を補完してくれるため、テーマの編集作業を行う上で役に立ちます。

コードヒントの設定を行うには、[サイト]メニュー→[サイト固有のコードヒント]を選択し、表示されるパネルの[構造:WordPress]が選択されているのを確認し[OK]ボタンをクリックします。

[構造:WordPress]が選択されているのを確認してください

テンプレートタグのコードヒントは、PHPのコードブロック
内でcontrolキー(WindowsではCtrlキー)+スペースキーで表示されるようになります。

テンプレートタグのコードヒントは、PHPのコードブロック
内でcontrolキー(WindowsではCtrlキー)+スペースキーで表示されるようになります。

テンプレートタグの後に[ ( )]を入力すると、パラメータのヒントが表示されます