WordPress

WordPressとDreamWeaver ccを連携

ローカルにDreamweaverというadobeソフトとXAMPPという仮想サーバー環境を構築できる無料ソフトを使用してWordPress環境を構築してみました。2017年にXAMPPはデータベースがMySQLからMariaDBに変更されたり、このページとは変更点があります。
スポンサーリンク

サイトの定義をします

最近はブログ全盛ですし、Dreamweaverは以前ほど知名度が無いかもしれません。私もOpen Live Writerでこの記事を書いています。馴染みが無いと「サイトの定義」って言われてもわからないし、Dreamweaver ccではサイトの設定となっています。以前は一つのサイトをトップから全てのファイル、画像、スクリプト全体を○○サイトの構成要素だとするので「サイトの定義」となっていました。まぁサイトをDreamweaverにローカルでもリモートのサーバーと同構成で作りそれをDreamweaverに登録することで利便性を図るということです。難しそうですけど勝手にDreamweaver側がやってくれるのでこちらは登録するだけです。WordPressだとデータサーバーも使うからそれらも登録します。構成要素フォルダを変更して内部リンクを訂正すると、その下に位置するhtml全て変更する必要がありますが、内部リンクを貼ってあったところを自動的にDreamweaver側で訂正してくれたりします。サイト全体をDreamweaverに覚えてもらうのが「サイトの定義」です。画像、スクリプト、cssとファイルの数も種類も結びつきも多様になってサイトのアドレスとファイルだけじゃなくて全体をDreamweaverに登録すると便利になるのです。逆に単なるスクリプトの編集や、html1ページだけ独立したものを作成するのなら必要無い場合もあります。

「サイト」→「新規サイト」

「サイト」メニューから「新規サイト」をクリックします。XAMPPでローカルに構築したWordPressをまずDreamweaverに定義します。
xserverwordpress155
「サイト」メニュー→「新規サイト」をクリックします。

「サイト名」と「ローカルサイトフォルダー」

xserverwordpress157
サイト名:ここは本来はサイトタイトルを書きます。今回はローカルのWordPressのカスタイマイズなどを試すためですから「ローカルwordpress」としておきました。自分がわかればいいですけど、基本はサイト名そのままです。

ローカルサイトフォルダー:これはXAMPPフォルダがCドライブ直下にある場合、「C:\xampp\htdocs」となります。右にある「フォルダーの参照」で開いていけば自動で記載されます。
xserverwordpress158
記入したら「保存」ボタンをクリックします。
WordPressはサーバーにインストールされているので登録します。ここではXAMPPの仮想サーバーですけど、登録する必要があります。

サーバー設定

WordPressでは連携させるにはリモートのサーバー設定もDreamweaverに認識させないと接続できないので設定する必要があります。

サイトの設定ウィンドウの先ほどは「サイト」でしたがその下の「サーバー」をクリックします。(サイトの設定ウィンドウを閉じてしまった場合、「サイト」メニュー→「サイトの管理」で「サイトの管理」ウィンドウが開きますので、設定したいサイトの名前をダブルクリックします。今は「ローカルWordPress」とサイト名をつけたのでそれをダブルクリックします。)
xserverwordpress159

xserverwordpress160
あまり変わりませんけどサーバーの設定する画面です。サーバーの設定をします。中央の左下よりに「+」の印があってそこをクリックします。
xserverwordpress161
デフォルトではFTPになっているので「ローカル/ネットワーク」に変更します。

xserverwordpress162
「ローカル/ネットワーク」を選択したら、先ほどwordpressをXAMPP内ローカルに保存した場所とXAMPPにあるwordpressのURLを記入します。
記入したら「保存」をクリックします。
xserverwordpress163
サイト設定のウィンドウに戻ります。リモートになっていると思うので「テスト」を選択して、「保存」をクリックします。
xserverwordpress164
「完了」をクリックします。

正しく設定できていることを確認します

xserverwordpress165
「サイトの管理」ウィンドウの「完了」クリックで、定義されたローカルのWordPress構成がウィンドウとして表示されます。表示されなかったり、再度表示したい場合は右の「ファイル」をクリックします。
xserverwordpress166
index.phpを開きます。

これだけだとXAMPPの仮想サーバーが動いていないので表示されません。
xserverwordpress167
XAMPPコントロールパネルソフトを起動させて、ApacheとMySQLのstartボタンをクリックします。
xserverwordpress168
Dreamweaverの「表示」メニューから「ライブビューを切り替え」を選択します。ビューもコード、分割、ライブとありますが、ライブにするとWordPress初期画面が現れます。
xserverwordpress169
「Hello world!」と表示されれば、連携できています。

-WordPress