DreamweaverでWordPressのテーマを編集・管理する方法

本記事では、DreamweaverでWordPressのテーマを編集・管理する方法する方法について解説します。

1 DreamweaverでWordPressのテーマを編集・管理するメリットとは
- 1.1 テキストエディタとFTP転送機能の両方が搭載されたツール
- 1.2 Adobeの画像・動画編集ソフトウェアとの連携
2 WordPressのインストール
3 Dreamweaverで必要な事前設定
4 WordPressの構築に必要な環境設定
- 4.1 Localというフリーソフトを使ってWordPressのローカル環境を構築する方法
5 まとめ

DreamweaverでWordPressのテーマを編集・管理するメリットとは

WordPressのテーマを編集・管理する方法は、Dreamweaver以外にも様々な方法があります。DreamweaverでWordPressのテーマを編集・管理できるように設定しておくと、どんなメリットがあるのか確認しておきましょう。

テキストエディタとFTP転送機能の両方が搭載されたツール

Dreamweaverは、HTMLやCSSといったマークアップ言語、Webサイト制作に必須のJavaScriptやWordPressで用いられているPHPといったプログラミング言語をコーディングできるテキストエディタであると同時にFTP転送ソフトウェアである点がメリットです。

テキストエディタは、現在VS Codeのシェア率が高く一強となっていますが、FTP転送機能は搭載されていないのでFTP転送ソフトを別途用意する必要があります。

FTP転送ソフトには、FFFTP、Cyberduck、FileZilla、ForkLift、FetchといったFTP転送ソフトが数多く提供されており、無料で利用できるツールもありますが、日本語化されているものはそれほど多くなく、特にMacユーザーの場合は選択肢が限られています。

Dreamweaverは、完全日本語化されているツールなので、FTP転送の設定も安心して利用できるのです。

Adobeの画像・動画編集ソフトウェアとの連携

DreamweaverでWordPressのテーマを編集・管理するもう一つのメリットは、Adobeの画像・動画編集をはじめとした他のソフトウェアとの連携に強いという点です。

WordPressのテーマを編集する際に、Adobe Creative Cloudのクラウドストレージにアップされた画像や動画コンテンツに直接アクセスし、Dreamweaver内に配置できるのは大変便利です。

また、UIデザインやワイヤーフレームの作成において、Webデザイナーに高い人気を誇る無料のプロトタイピングツールであるFigmaがAdobeに買収されることが発表されています。

今後、DreamweaverがAdobeのWeb制作ツールの中でどんな立ち位置として機能していくのかはまだ不確定ですが、Figmaとの連携が強化されればDreamweaverのテキストエディタとしての価値も再び高まってくる可能性もあるかもしれません。

WordPressのインストール

DreamweaverでWordPressのテーマを編集・管理するために、WordPressのインストール方法についても簡単に触れておきます。WordPressをインストールするには、いくつかの方法があります。

一つは、WordPressの公式サイトからWordPressをダウンロードする方法です。WordPressの公式サイトにアクセスするとページ上部のメニュー右端に「WordPressを入手」というボタンがありますので、これをクリックするとWordPressがダウンロードできます。

ダウンロードしたWordPressサイトを、レンタルサーバーのFTPサーバーにアップロードすることで、WordPressのインストールができます。

この方法は、FTP転送やWordPressフォルダをアップロードする場所など、ある程度専門的な知識が必要になってくるので、初心者の方には少し難しい方法です。

もう一つは、レンタルサーバーに用意されている、WordPressのインストール機能を利用する方法です。上の画像は、ロリポップという大手レンタルサーバーの管理画面ですが、ここにある「WordPress簡単インストール」というのがそれに当たります。

WordPressをインストールできる機能を搭載しているレンタルサーバーは他にも沢山存在しますので、契約しているレンタルサーバーにWordPress関連の機能がないかチェックしてみましょう。

こうしたインストール機能を使えば、簡単にサーバーにWordPressをインストールできます。

WordPressのインストールや初期設定に関しては、以下の記事も参考にしてみてください。

▷【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

Dreamweaverで必要な事前設定

DreamweaverでWordPressを編集・管理していくためには、事前にサイトの設定やサーバーの設定が必要になってきます。ここからは、事前に必要な設定として、サイトの設定、サーバーの設定、自動同期の設定を説明します。

サイトの設定を行う

サイトの設定とは、パソコン端末上（ローカル）のどこに、Webサイトのフォルダを設置するのかを決める作業です。

ファイルの保存場所がわかるパス（経路）が設定されていないと、ファイルとファイル、ファイルと画像などのリンクの設定ができません。そのため、Webサイトに必要なファイルデータは一つのフォルダにまとめて格納しておく必要があるのです。

以下に、サイトの設定の手順を説明します。

1.メニューから「新規サイト…」を選択

画面上部にあるメニューバーからサイトをクリックし、表示されたメニュー項目の中から「新規サイト…」を選択します。

2.サイト名を入力しローカルサイトフォルダーを選択

「新規サイト…」を選択すると、上の画像のようなサイト設定のパネルが開きます。このパネルでサイト名を入力・設定し、ローカルサイトフォルダーを選択します。

ローカルサイトフォルダーとは、パソコン端末上（ローカル）にある、Webサイト作成用のファイルが入ったフォルダーのことです。

ローカルサイトフォルダーを変更する場合は、ローカルサイトフォルダーの欄の右端にあるフォルダーのアイコンをクリックします。

フォルダーのアイコンをクリックすると、上の画像のようなフォルダーを選択するパネルが表示されます。このパネルでローカル上にあるWordPressフォルダーを指定してパネル右下の「選択」をクリックします。

ローカルサイトフォルダーを指定できたら、サイトの設定パネル画面に戻りますので、パネル右下の「保存」をクリックします。

「保存」をクリックして設定が完了すると、右側のファイルパネルに、先程設定したローカルサイトのサイト名が表示されるようになります。

これでサイトの設定が完了です。

サーバーの設定を行う

サーバーの設定はサイトを公開するためにファイルをインターネット上のどこに配置していくのかを決める作業です。

この作業は、レンタルサーバーの契約（もしくはサーバーの構築）が必要になります。

1.メニューから「サイトの管理…」を選択

画面上部にあるメニューバーからサイトをクリックし、表示されたメニュー項目の中から「サイトの管理…」を選択します。

2.FTPサーバーの情報を設定・入力

「サイトの管理…」を選択すると、上の画像のようにサイトの管理パネルが表示されます。このパネルに表示されたサイト名の中から編集したいサイト名を選んでダブルクリックします。

サイト名をダブルクリックすると、サイト設定パネルが開きます。このパネル左側にあるメニューから「サーバー」という項目を選択します。

「サーバー」の項目にある欄の左下に＋マークと−マークがありますので、＋マークをクリックします。

＋マークをクリックすると、上の画像のようなFTPサーバーを設定するパネルが開きます。

このパネルで、FTPアドレスやユーザー名、FTPサーバーにログインするパスワードなどを設定・入力します。

各項目の設定・入力が完了したらパネル右下の「保存」をクリックします。

FTPサーバーの情報は、レンタルサーバーの管理画面を確認することで分かります。

レンタルサーバーによって、サーバー情報が記載されている箇所は異なりますが、大手のレンタルサーバーであれば「レンタルサーバー名 FTP」といった検索にかければ、どこに記載されているかはすぐに分かると思います。

上の画像はロリポップの管理画面です。ロリポップではアカウント情報にあるサーバー情報という項目に、FTPサーバーの情報が記載されています。

FTPサーバーの設定が完了したら、サイト設定のパネルに戻りますので、欄に追加されたFTPの情報を確認して。パネル右下の「保存」をクリックします。

サイト設定を保存したら、サイトの管理パネルに戻りますので、パネル右下の「完了」をクリックします。

これでサーバーの設定は完了です。

3.リモートサーバーに接続する

サーバーの設定が完了したら、実際にリモートサーバー（FTPサーバー）に接続できるか確認しておきましょう。

画面右側にあるファイルパネルの上部に「リモートサーバーに接続」というアイコンがありますので、これをクリックします。

「リモートサーバーに接続」されると、アイコンが黄色のチェックマークが入ったものに変わります。

リモートサーバーに接続できたら、ファイルパネルの右上にあるプルダウンメニューで「リモートサーバー」を選択します。

「リモートサーバー」を選択すると、上の画像のように、ファイルパネルにリモートサーバー（FTPサーバー）にインストールしたWordPressのフォルダーが表示されるようになります。

自動同期の設定

Dreamweaverでコードを編集しているのは、ローカル上にあるファイルです。そのため、リモートサーバー上に編集結果を反映させるには、編集済みのファイルをアップロードして更新する必要があります。

しかし、このアップロード作業を手作業で一つ一つやっていると、非常に手間がかかり、ローカル上のファイルとリモートサーバー上のファイルが同じデータに更新されていないといったリスクも起きやすいです。

そこで、自動同期の設定を行っておくと、編集の度にアップロードする手間を省かれ、編集内容がすぐにリモートサーバー側のファイルに反映されるようになります。

以下にその設定方法を説明します。

1.メニューから「サイトの管理…」を選択

画面上部にあるメニューバーからサイトをクリックし、表示されたメニュー項目の中から「サイトの管理…」を選択します。

2.サイト名をダブルクリック

「サイトの管理…」を選択すると、上の画像のようなサイトの管理パネルが開きます。このパネルに、サイトの設定で作成したサイト名が表示されていますので、設定を変更したいサイト名をダブルクリックします。

3.サーバーをダブルクリック

サイト名をダブルクリックすると、選択したサイト名のサイトの設定を行うパネルが表示されます。このパネル左側にあるメニューから「サーバー」を選択します。

「サーバー」を選択すると、設定したリモートサーバーが表示されていますので、このサーバーをダブルクリックします。

4.「詳細設定」のタブをクリック

サーバーをダブルクリックすると、サーバーの設定パネルが開きます。パネル上部に「基本」と「詳細設定」というタブがありますので、「詳細設定」をクリックします。

5.「保存時にファイルをサーバーへ自動的にアップロード」にチェックを入れる

「詳細設定」をクリックすると、上の画像のようなウィンドウ画面に切り替わります。この画面にある「リモートサーバー」という欄に、「保存時にファイルをサーバーへ自動的にアップロード」という項目があるので、これにチェックを入れます。

「保存時にファイルをサーバーへ自動的にアップロード」のチェックボックスにチェックを入れたら、パネル右下にある「保存」をクリックします。

これで、自動同期の設定は完了です。

WordPressの構築に必要な環境設定

WordPressをリモートサーバーにインストールして直接編集していく方法は、個人でサイトを運用していく場合は問題がありませんが、会社でサイトを管理したり、企業からWebデザインやWebサイト管理業務を請け負って運用していく際は、リスクが高いので適切な方法ではありません。

WordPressのテーマをリニューアルする場合などに関しても、ローカル環境でWebサイトを作成し、テスト等を実施して問題がないことを確認してからサーバーに実装していきます。

そのため、WordPressのローカル環境を構築する必要があるのですが、WordPressはPHPというサーバーサイドのプログラミング言語やMySQLなどのデータベース言語が使われているので、XAMPPやMAMPといったPHP開発環境をインストールする必要があります。

このPHP開発環境の設定は、ある程度知識が必要になりますので、初心者には少し難しい作業になります。

Localというフリーソフトを使ってWordPressのローカル環境を構築する方法

Webデザイナーやフロントエンジニアであれば、PHP開発環境を必要としない人が多いと思いますので、本記事ではLocalというフリーソフトを使ってWordPressのローカル環境を構築する方法を解説します。

Local（旧名Local by Flywheel）は、WordPressのローカル開発環境を簡単に構築できるツールです。無料で利用できるので、導入コストもかかりません。

以下にLocalのインストール方法と設定方法を説明します。

1.Localの公式サイトTOPページにある「DOWNLOAD」をクリック

Localの公式サイトにアクセスし、TOPページにある「DOWNLOAD」をクリックします。

2.プラットフォームを選択

「DOWNLOAD」をクリックすると、上の画像のようにプラットフォームを選択するモーダルウィンドウが表示されます。プラットフォームとは、使用しているOS環境のことですので、現在使っているパソコンのOSを選択します。

3.名前やメールアドレスなど必要事項を入力

OSを選択すると、上の画像のようなダウンロードに必要な事項を入力するモーダルウィンドウが表示されます。名前やメールアドレスを入力したら下部にある「GET IT NOW!」というボタンをクリックします。

必要事項に電話番号の入力欄がありますが、こちらは入力しなくてもダウンロードへ進めます。

4.Localをパソコンにインストール

Localの圧縮ファイルがダウンロードできたら、ファイルをクリックして解凍します。ファイルを解凍するとインストールファイルが表示されますので、これをクリックします。

インストールファイルをクリックすると、上の画像のようなウィンドウが表示されますので、ここにあるLocalのアイコンをアプリケーションフォルダへドラッグしてパソコン端末にインストールします。

5.起動して「Create a new site」をクリック

インストールが完了したら、アイコンをクリックしてソフトウェアを起動します。ソフトウェアが起動すると、上の画像のような管理画面が開きます。

まだ何も設定していない状態では、画面中央に「Create a new site」というボタンが表示されているので、これをクリックします。

6.サイト名を入力

「Create a new site」をクリックすると、サイト名を入力する画面へ移行します。サイト名を設定したら、画面右下にある「Continue」ボタンをクリックします。

7.「Preferred」を選択

「Continue」をクリックすると、環境を設定する画面へ移行します。これは、PHPのバージョンなどを設定する項目ですので、「Custom（カスタム）」ではなく、推奨を意味する「Preferred（プレファード）」を選択しておきます。

「Preferred」を選択したら、画面右下にある「Continue」ボタンをクリックします。

8.WordPressのユーザー名とパスワードを設定

「Continue」をクリックすると、WordPressのユーザー名とパスワードを設定・入力する画面へ移行します。これは、WordPressの管理画面にログインする際のユーザー名とパスワードなので、メモしておきましょう。

ユーザー名とパスワードを設定したら、画面右下にある「Continue」ボタンをクリックします。

9.「WP　Admin」をクリック

これでLocal側の設定は完了しました。次にWordPressを開いて、WordPressの設定を進めていきます。

ローカル環境に構築したWordPress環境にアクセスするには、サイトの情報が表示されている右上にある「WP Admin」というボタンをクリックします。

10.WordPressにログイン

「WP Admin」というボタンをクリックすると、WordPressのログイン画面が表示されます。

この画面で、さきほど設定したユーザー名とパスワードを入力し「Log In」ボタンをクリックし、WordPressにログインします。

11.「Setting」にある「General」を選択

上の画像のように、WordPressのダッシュボード（管理画面）にログインできました。しかし、WordPressが英語表示になっていますので、これを日本語表示に変更しておきましょう。

画面左側にあるメニューに「Setting」という項目があります。この「Setting」をクリックして表示されるメニュー項目の中から「General」を選択します。

12.「Site Language」で日本語を選択

「General」を選択すると、上の画像のような設定画面が表示されます。この画面の中から「Site Language」という項目をクリックするとプルダウンメニューで世界各国の言語が表示されます。

言語の中から「日本語」を探し選択します。

13.変更を保存

「Site Language」を日本語に設定した状態で、画面をスクロールして一番下にある「Save Changes」というボタンをクリックし変更を保存します。

14.WordPressの設定が日本語になる

上の画像のように、日本語表示に変更できました。

15.LocalのWordPressフォルダーの場所を確認

Localの設定とWordPresssの設定が完了したら、Localで作成したWordPressフォルダーを、Dreamweaver上でサイト設定しておきます。

Localの管理画面上部にある「Go to site folder」という項目をクリックすると、Local　Sites（Localで作成したWordPressフォルダー）の場所がカラム表示で確認できます。この場所を覚えておきます。

16.ローカルサイトフォルダーにLocalのWordPressフォルダーを設定

Dreamweaverのサイト設定で、ローカルサイトフォルダーの場所を指定するフォルダーアイコンをクリックします。ローカルサイトフォルダーに、Local　Sitesのフォルダーを選択すると、DreamweaverでLocalで作成したWordPressのファイルを編集することができるようになります。