WordPressのテーマ編集をDREAMWEAVER CCで行うための全設定手順

この記事で解決できる問題点・疑問点

いつもワードプレスのテーマ編集を管理画面から行っているけど、ワードプレスのエディタはコーディングの補助機能がなくて時間がかかるし、使いづらい。
ワードプレスのテーマ編集をsublimetextやDreamWeaverのようなコーディング向けのテキストエディタで編集できるようにしたいけど、具体的な設定方法が分からない。

この記事では、このような疑問に答える形で、Word Press(ワードプレス)とADOBE製のテキストエディタであるDREAMWEAVER CC（ドリームウィーバー）を連動する方法を初心者の方でも分かるように解説していきます。

無料体験

Wordpressをしっかり学びたいなら・・・

TechAcademy　WordPressプログラミングコース

パーソナルメンターによる学習サポート
HTML/CSS/PHPが身につくカリキュラム
Wordpressテーマの作成スキルが身につく

TechAcademy公式サイト

Word Press(ワードプレス)のテーマ編集する3つの方法

ワードプレス上のファイルというのは、サーバー上の指定のフォルダの中に置かれており、今回取り扱うテーマ（theme）ファイルもこの中に置かれています。

レンタルサーバー上でのワードプレステーマのフォルダ階層

つまり、編集する必要がある”style.css”や”functions.php”というファイルは、

“example1.com”というフォルダの中の”public html”というフォルダの中の”wp-content”というフォルダの中の”themes”というフォルダの中の”theme1″の中に置かれているということになります。

レンタルサーバーが提供しているファイルマネージャを利用すると、このテーマファイルに直接アクセスすることができるため、それぞれのファイルを直接編集することも可能です。

sublimetextやDreamWeaverを利用する場合も、直接このファイルに接続して編集することになります。

すなわち、

ワードプレスのテーマの編集を行う方法は、この記事で説明するテキストエディタによる編集を含めると大きく3つの方法があることになります。

①ワードプレスのテーマカスタマイズを利用する。（Theme Editor） ②ファイルマネージャを利用して、直接ファイルを編集する。 ③コーディング向けのテキストエディタで編集する。（sublimetext、DreamWeaverなど）

以上の3つの方法のうち、②の方法は、そもそも編集用ではなく、ファイルの管理用のユーザーインターフェースになっているため、テーマ編集で使おうとすると、非常に使いづらいのでお勧めできません。

①の方法はワードプレスの管理画面から気軽に利用できるので、簡単な編集をする程度であれば便利でお勧めです。

しかし、コーディングの補助機能、例えば、pと入力するだけでpaddingが表示されるような機能は提供されておらず、初心者の方が複雑な編集をする場合には適していません。

③の方法は、コーディング専用のプログラミング環境を用いてテーマの編集ができるため、あらゆる機能が備わっており、初心者から上級者まで様々な要望に対応します。

初期設定が少し複雑ですが、一度設定してしまえば、いつでも編集が可能です。以下で、初めての方でも分かりやすいように丁寧に解説しているので、是非参考にしてください。

Word Press(ワードプレス)のテーマ編集するためのDREAMWEAVER CCでの設定

①「新規サイト」を定義する

まず、DREAMWEAVER CCを起動し、メニューの「サイト」→「新規サイト（N）」をクリックします。

②サイトの設定

「サイト設定ダイアログ」が開くので、「サイト名」・「ローカルサイトフォルダー」を入力し指定します。

ここでは、「サイト名」には「ウェブサイトの名前＋レンタルサーバー」を指定していますが、任意の名前で大丈夫です。

また、「ローカルサイトフォルダー」には、Cドライブの中に”LocalWebSerever”というフォルダを作り、その場所を指定しています。このローカルサイトフォルダーについても任意の場所を指定できるので、ご自身で使いやすい場所を指定することがおすすめです。

③サーバーの設定

次は、サーバーの設定を行います。ここの設定をすることで、Dreamweaverがレンタルサーバーに置かれているファイルに直接アクセスできるようになり、テーマを編集できるようになります。

まず、ダイアログボックス左側の「サーバー」タブをクリックし、ダイアログ中央下部の「＋（プラス）」ボタンをクリックします。

すると、新規サーバーの設定画面が開くので、必要な情報を入力します。

サーバー設定に必要な情報一覧

サーバー名	任意の名前でOKです。使用しているレンタルサーバーの名前を入力すると分かりやすいです。
使用する接続	FTPを選択します。
FTPアドレス	レンタルサーバーの管理画面で確認します。
ユーザー名	レンタルサーバーのIDを入力します。
パスワード	レンタルサーバーのパスワードを入力します。
ルートディレクトリ	「対象のドメイン/public_html/」にしてください。
Web URL	対象のウェブサイトのURLを入力してください。

必要な情報はレンタルサーバーの管理画面で確認することができます。

ここでは、Xサーバーの管理画面を例に、必要な情報の取得方法を説明します。

まず、サーバーパネルにログインします。

左上に表示されているサーバーIDが「ユーザー名」になります。

続いて、サーバー情報をクリックして開きます。

このような画面が開くので、「ホスト名」を確認します。

この「ホスト名」が、「FTPアドレス」となります。

④自動同期の設定

次は、自動同期の設定です。

テキストエディタというのは、通常、ローカル、つまり、PC内にあるファイルを編集します。そして、その編集したファイルをサーバーにアップロードして修正を反映させます。

つまり、自動同期をしない場合は、ファイルの修正をするたびに併せてファイルのアップロード（put）もする必要があるので、いちいち手間になります。

そこで、変更をしたら自動で同期するように設定しておくことで、編集の度にアップロードする手間を省け、ブラウザでタイムリーに変更を確認しながらテーマの編集ができるようになります。

自動同期の設定は、サーバー設定ダイアログの上部右側のタブ「詳細設定」から行います。

ここで、「保存時にファイルをサーバーへ自動的にアップロード」にチェックを入れます。

そして、「保存」をクリックします。

以上でサーバーの設定が完了です。サーバーが追加されているのを確認してください。

以上でDreamWeaverの設定は完了です。

DreamWeaver編集画面の右側のエリアから、「新規で作成したサイト」を選択し、さらに、その右側のプルダウンメニューから「リモートサーバー」を選択します。

すると、下部に編集可能なファイルがツリー構造で表示されます。ここから、テーマの編集を行いたいファイルを選択して編集することで、ワードプレスのテーマの編集ができるようになります。

まとめ

DreamWeaver CCでワードプレスのテーマ編集ができるようになるためのDreamWeaver CCの設定方法を説明してきましたが、いかがだったでしょうか？

ワードプレスの管理画面から直接編集することに比べると、たしかに、DreamWeaverのようなテキストエディタの設定をすることは複雑で手間もかかります。

しかし、ここで説明した設定方法を一度だけ行うだけで、cssやhtmlといったプログラミング言語の文法上の間違いも減り、かつ、テキストエディタのもつ補助機能などの開発環境によりコーディングのスピードも上がるので、テーマ編集は圧倒的に効率的になります。

ワードプレスを始めたけど、既存のテンプレートだけじゃ満足できない。自分で好きなようにカスタムしたい。というような方には、特に、DreamWeaver CCをワードプレスと連動させることはお勧めの方法です。ぜひ、試してみてください。