DreamweaverでWordPressを編集する方法!

Yuichiro Suzuki

9年前

WordPressとDreamweaverを連携させてテーマを編集する方法を公開します。

僕が連携を試みた理由は、DreamweaverCCの、CSSデザイナーを使用して
Wordpressテンプレートのデザイン作業効率を少しでもあげたいと思ったからです。

この記事では、WordpressとDreamweaverの連携方法だけではなく、
連携後のメリットデメリットも取り上げています。

Dreamweaverを利用してWordpressテーマの編集を試みようと思っている方に
少しでも参考になればと思います。

一般的にテーマの編集は、サーバーを通して行いますが、
作業効率とセキュリティの都合上、ローカル環境で行います。

WordPressをローカル環境で使用する方法については、下記をご参考ください。

WordPressをローカル環境で動作させる方法
http://sozoen.com/yuichiro/wordpress-local

ローカル環境用に設定したURLをブラウザで開き、管理画面にログインします。
(http://localhost:8888/○○○/)

管理画面から編集するテーマを選択します。

今回は、Twentyelevenをベースに作成したテーマを選択しています。

この記事では、DreamweaverCCで説明しております。
CSのバージョンでは多少、表記が異なる場合がございます。

Dreamweaverを起動してサイトの設定をクリックします。
（CS5 / 6では、メニューバー＞サイト＞新規サイトを選択します。）

サイト項目のサイト名（任意）とローカルサイトフォルダーを指定します。
ローカルフォルダーはWordpressをインストールしたディレクトリーを入力します。

サーバー項目を選択して左下の”＋”をクリックします。

以下を、入力して保存をクリックします。

保存が完了したら、リモートのチェックを外し、テストにチェックを入れます。

サイトの設定が完了後は、基本設定を行います。

ファイルウィンドウをローカルビューにして”index.php”を読み込みます。

“このページはサーバーのみによって検索される動的関連ファイルがある可能性があります”
と警告文は閉じてかまいません。

右上の”ライブ”をクリックすると、プレビューが表示されます。

これでDreamweaverでWordPressの連携が完了です。

最後にDreamweaverでwordpressを編集するメリット / デメリットを紹介します。

メリットは、Dreamweaverの新機能であるCSSデザイナーによるデザイン作業効率の向上です。
これにより、デザインの修正、構成が直感的に行えるようになりました。

Dreamweaver以外にもWordpressと連携して編集できるソフトはありますが、
ここまで直感的にCSSを編集できるソフトはありません。

デメリットは、立ち上がりが遅い、動作がもっさりとしていることでしょうか。
あとは、変更するたびに更新をクリックしなくてはならない点ですね。

速度、効率を重視してコーディングを行うの方には不向きかもしれません。

僕がWordpressのテーマを編集する際は、CODA2をメインで使用して、
デザインはDreamweaverと使い分けています。

以上、ご観覧ありがとうございました！！