「Adobe Dreamweaver CS5」新機能を使う -WordPressのテーマをカスタマイズ

「Adobe Dreamweaver CS5」で加えられた新機能を、数回に渡り使い込んでいきたい。今回から数回に渡り、「WordPressのコード補完」、「CMS対応」、「CSSインスペクタ」などを活用しWordPressのテーマをカスタマイズしていく。

「Adobe CS5」体験版はこちらから

「Adobe Dreamweaver CS5」のレビュー記事でも紹介したが(※下部参照)、Dreamweaver CS5には新規に追加された便利な機能が多数存在する。その中でも特に便利なのが「WordPressのコード補完」、「CMS対応」、「CSSインスペクタ」の3つだ。今回はこれらの機能を使ってWordPressのテンプレートをカスタマイズするというサンプルを制作していく。今回は、Dreamweaver CS5上での、WordPressファイルの読み込みを試すことにする。

●「Adobe Dreamweaver CS5」新機能徹底レビュー(前編)
●「Adobe Dreamweaver CS5」新機能徹底レビュー(中編)
●「Adobe Dreamweaver CS5」新機能徹底レビュー(後編)

WordPressのテーマは、ヘッダーやフッターなどページで使われる様々な部分が別ファイルにてPHPで記述されており、サーバー側で合成してクライアント側のブラウザで表示される形式となっている。デザイナーが見た目を把握しながらデザインの変更を行なっていくのは少し面倒な仕組みといえるだろう。Dreamweaver CS5ではこれら複数のファイルをDreamweaver上で合成して、編集画面に表示させることが出来る。今まで分割して編集し、出来上がりをブラウザで確認しなければいけなかった切替作業から開放されるだろう。

Thematicのダウンロードとインストール

今回はWordPressのテーマを標準のものではなく、高機能なテンプレートのフレームワークとして名高いThematicというフレームワークとし、Dreamweaver上でカスタマイズしてみることにする。Thematicは、海外で人気が高く、あらかじめよく使うレイアウトが機能として盛り込んでおり、デザインに専念できる仕組みだ。なお、既にWordPRessがローカル環境にインストールしてあることを前提としている。まず、こちらををブラウザで開き、[Download]ボタンを押してzipファイルをハードディスクにダウンロードする。次にダウンロードしたthematic.0.9.7.7.zipを解凍する。

thematicディレクトリをwordpressのインストールディレクトリ内にある/wp-content/themesへと移動する。

thematicディレクトリ内にあるthematicsamplechildthemeディレクトリを、thematicディレクトリと同じ階層(wordpressインストールディレクトリ/wp-content/themes)へ移動する。WordPressでは、テーマを継承したテーマというものを持つことが出来、Thematicもこのようにして使用する。こうして出来たテーマは子テーマと言い、親テーマとは区別して使用される。親テーマのディレクトリには様々なテーマファイルが含まれるが、子テーマには数ファイル程度しか含まれていない。ただし、実際には親テーマに含まれる全てのファイルが入っていることになる。

続いて、WordPressの管理画面にログインして、[外観]→[テーマ]へと移動。

[利用可能なテーマ]にある「A Thematic Child Theme 1.0 : Ian Stewart 作」の「有効化」をクリックする。wordpressのサイトを表示し、下記のように適用されていれば完了だ。

続いて、dreamweaver CS5を起動する。上部メニューバーより、[サイト]→[新規サイト]を選択し、サイトの名前を「サンプルサイト2」、ファイルがある箇所を「xamppなどWebサーバーをインストールした場所「\htdocs\wordpressのインストールディレクトリ」と指定して保存する。

次に、[ファイル]パネルよりindex.phpを読み込んでみよう。すると「テストサーバーが定義されていないため、動的関連ファイルを見つけられませんでした。」というメッセージが出るので、横にある「設定」をクリックする。

サーバ選択パネルが現れるので、[+]ボタンを押して、新規サーバを追加する。表示されたパネルに、以下のように入力し、［保存］ボタンを押す。すると、ダイアログが出るので[OK]をクリックする。