Dreamweaver CS5とWordPressを連携させる方法

世界でトップクラスのシェアを誇るCMS（コンテンツ管理システム）である「WordPress」が、最近日本でも注目されてきています。WordPressはオープンソースのCMSで、商用であっても無料で利用することができます。CMSとして無限の可能性を秘めたWordPressを利用することは、Dreamweaverを利用する上でも大きなメリットになり得るでしょう。本記事では、Dreamweaver CS5の新機能を活用してWordPressと連携させる方法について解説します。

ローカルサーバーの構築

WordPressとの連携作業でライブビューや関連ファイルの参照など、CS5の新機能を活用するには、ローカル環境にWebサーバーを構築してそこにWordPressをインストールする必要があります。

統合パッケージ（無料）を利用すれば、簡単にローカル環境にWebサーバーを構築することができます。Windows環境の場合はXAMPP、MacOS X環境の場合はXAMPPやMAMPがあります。インストール方法については、下記のサイトを参考にしてください。

• MAMPのインストール解説
• XAMPPのインストール解説

この記事ではMAMPの利用を前提として解説しています。

WordPressのインストール

WordPress.org からWordPressをダウンロードして、上記で構築したローカルサーバーにインストールします。インストール方法については、下記のサイトを参考にしてください。

• MAMPにWordPressをインストールする手順の解説
• XAMPPにWordPressをインストールする手順の解説

これで準備は完了です。なお、Dreamwerverで作業をする際には、事前にXAMPPやMAMPを起動しておく必要があります。

準備が完了したら、DreamweaverでWordPressを扱うための設定をしていきましょう。本記事では、デフォルトテーマの「Twenty Ten」を利用します。

サイト定義

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

テストサーバーの定義

次に［サーバー］カテゴリを選択します。左下にある［+］ボタン（新規サーバーの追加ボタン）を選択し、新規サーバーを追加します。

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

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

動的関連ファイルの検索

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

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

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

このようにWordPressのデザインチェックを行うには、デザインビューではなくライブビューで行うことになります。

テーマの編集

次にテーマを編集する作業に移りましょう。WordPressのテーマは複数のPHPファイルなどから構成されています。関連ファイル一覧には読み込まれた順にWordPressのファイルが表示されており、テーマを編集するためにはこの中からテンプレートファイルを探す必要があります。

利用しているテンプレートファイルは「template-loader.php」以降に表示されます。関連ファイル一覧の右端の［>>］ボタンもしくは［表示］メニュー→［関連ファイル］を選択し、表示されるメニューの一番下までスクロールして「template-loader.php」を探します。すると、テーマで利用している「index.php」には「header.php」「loop.php」「sidebar.php」「footer.php」「sidebar-footer.php」が読み込まれているのがわかります。

それでは、index.phpを開いて少し手を加えてみましょう。20行目に、WordPerssの基本情報を出力するタグ「<?php bloginfo('name') ?>」（サイトのタイトルを出力する）を記述し保存します。

［表示］メニュー→［デザインビューの更新］を選択すると、最初の投稿のタイトル（Hello world!）の上にサイトのタイトルが表示されます。

このようにしてテーマを編集していきます。編集後は、公開サーバーにインストールしたWordPressの該当ファイルを上書きします。今回の場合、WordPressインストールディレクトリがrootで、デフォルトテーマ（Twenty Ten）を利用しているため、WordPressのテーマファイルの場所はwp-content/themes/twentytenにあります。このディレクトリに編集したindex.phpをPUTすれば、テーマの変更が反映されます。

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

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

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