Dreamweaverを使ったWordPressのテーマ制作-導入編-

弊社ではAdobeのコンプリートプランを契約しているため、ホームページ制作はDreamweaverを使用しています。

最新バージョンを使ったテーマ制作方法がインターネットに少なかったため、段階を踏んで記録をいたします。今回は導入編を記載いたします。

これからWordPressを使ったホームページ制作をメインに仕事にされる方やHTML初心者の方まで広く見ていただけるかと思います。よろしければ参考にしてみてください。

当初、私も「そもそも、WordPressのテーマってDreamweaverで作れるの？」と疑問を抱いておりまして、検索を重ね今の状態にたどり着くことが出来ました。ですので、方法に自己流が入ってしまうかと思いますが予めご了承ください。

用意するもの

• Dreamweaverを操作するパソコン１台
• パソコンモニタ（できれば）
• ローカルサーバーソフト（XAMPP または Laragon）

まず、当たり前のことですがAdobeのソフトが入っているパソコンを使ってテーマ制作を行いますので、動かすにはそこそこスペックが良いものでないと動作が重くなりストレスを感じることがあるかと思います。多少、お金に余裕があればメモリの増設を行うなどパソコンのスペックを高めてから操作することをお勧めいたします。

次にパソコンモニタが別にあると尚良いかと思います。基本的にDreamweaverを全画面で操作することと、実際のホームページをプレビューしながら制作になるという理由です。もちろん、画面を分割して操作することもできますがレスポンシブデザインを意識されて作られるのであれば、タスクを切り替えせずに作っていくことをお勧めいたします。

最後に肝となるのがローカル上PHPが動作するようにするため、ローカルサーバーソフトをインストールします。

XAMPPの操作

デフォルトの状態でインストールした場合はローカルディスクのルートフォルダにXAMPPが作成されたかと思います。

以降で新しくテーマを作っていく場合は C:\xampp\htdocs 内にフォルダを作成してけば複数の運用も可能です。

WordPressに必須となるデータベースを作成していきます。最初のページからログインするために以下の手順を踏んでください。

バズ部様の手順を参考にさせていただきました。

XAMPPを使ってWordPressローカル環境を構築する全手順

WordPressのダウンロード

WordPress公式サイトよりWordPressをダウンロードします。

ダウンロードしたzipファイルを展開すると「wordpress」というフォルダが展開されます。

1. 「wordpress」フォルダを好きな名前にリネームします（テーマ作成時のアクセスURLになるため、サイト名にするのが無難です）
2. リネームしたフォルダ（ここでは sample とします）を C:\xampp\htdocs 内に配置します

これでWordPressの下準備は完了です。

WordPressの起動

無事データベースにWordPressをインストールできれば、ブラウザから http://localhost/sample にアクセスしてWordPressの画面を確認することができたら次の手順へ移ります。

Dreamweaverの設定

WordPressのテーマフォルダは C:\xampp\htdocs\sample\wp-content\themes になります。なのでテーマはこちらに新しくフォルダを作成しておきます。

今回は「sample」というテーマを作成していきますので「sample」フォルダを一つ作りました。以降は、Dreamweaverでテーマ作成できるように初期設定をしていきます。

まずは、Dreamweaverを立ち上げます。

ツールバーの「サイト」より「新規サイト」を選択し、適当なサイト名とローカルサイトフォルダーを C:\xampp\htdocs\sample\wp-content\themes\sample に設定します。

まとめ

基本的なWordPressの導入とDreamweaverの設定は以上になります。

次の記事ではWordPressのテーマの作成に移ります。

Dreamweaverを使ったWordPressのテーマ制作-制作編-

前回から記載を始めた「Dreamweaverを使ったWordPressのテーマ制作-導入編-」の続きです。 今回からDreamweaverを使っ…

この記事を書いた人

スギちゃん杉原 優介

ましろ未来図で制作を担当。