【ハウツー】

「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]をクリックする。

・サーバー名:サンプルサイト2
・使用する接続:ローカル/ネットワーク
・サーバーフォルダー:xamppなどWebサーバーをインストールした場所\htdocs\wordpress_3_0_1
・Web URL:http://localhost/wordpressのインストールディレクトリ

キャッシュが更新されるので、少し待つ。その後、「このページにはサーバーのみによって検索される動的関連ファイルがある可能性があります。」とメッセージが出るので、[検索]をクリックする。その後、警告ダイアログが出るが、[はい]を押して先に進む。

これでDreamweaver CS5でWordPressのサイトを編集する準備が整った。Dreamweaver CS5を[分割]表示にし、[ライブビュー]をクリックしてみよう。右に実際の画面、左にコードが表示されるはずだ。次回より、さらに作業を進めていく。

転職ノウハウ

あなたが本領発揮できる仕事を診断
あなたの仕事適性診断

シゴト性格・弱点が20の質問でサクッと分かる!

「仕事辞めたい……」その理由は?
「仕事辞めたい……」その理由は?

71%の人が仕事を辞めたいと思った経験あり。その理由と対処法は?

3年後の年収どうなる? 年収予報
3年後の年収どうなる? 年収予報

今の年収は適正? 3年後は? あなたの年収をデータに基づき予報します。

激務な職場を辞めたいが、美女が邪魔して辞められない
激務な職場を辞めたいが、美女が邪魔して辞められない

美人上司と可愛い過ぎる後輩に挟まれるエンジニアの悩み

人気記事

一覧

イチオシ記事

新着記事

求人情報