Dreamweaverで始めるWordPressサイト構築の基礎知識：爆捗！ WordPressテーマ作成ショートカット（1）（1/3 ページ）

本連載について

　本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。

　今回は、Dreamweaverの概要と最新版Dreamweaverの新機能、WordPressの概要、Dreamweaver＋WordPressの環境構築を行う際に必要な初期設定などを紹介していこう。

そもそもDreamweaverとは、なぜDreamweaverを使うのか

　DreamweaverはWebサイト／Webアプリケーションの制作ツールだ。HTMLエディタという見方をすれば非常に動作が重そうで、他の軽量なエディタに見劣りする部分もある。しかし、軽量なエディタには搭載されていない、さまざまな機能があることから、エディタというよりは統合開発環境（IDE）ということもできるだろう。

　Dreamweaverは「Adobe Creative Cloud」の一製品なので、Adobe Creative Cloudに加入していれば常に最新版を利用できる。まだ加入していない人は体験版を30日間利用できる無償メンバーに登録しておくことをお勧めする。

　Adobe Creative Cloudは、これまでのアプリケーションのアップデートサイクルよりもかなり短い間隔で新機能の追加や修正を加えてきていることが特徴だ。これによって日々進歩しているWeb技術にも少ないタイムラグで追い付くことができる。

DreamweaverをWordPressのテーマ作成に使う2つのメリット

　Dreamweaverを制作に使う利点としては、歴史が長いアプリケーションであるため、ユーザー数がとても多く、仮に標準で対応していない機能であっても、何らかの工夫を加えて利用できるようにする拡張が頻繁に行われている点にある。本連載でも、そのようなアプローチを通して、Dreamweaverがまだ対応していない技術にも対応できるような方法を紹介する予定だ。

　またDreamweaverを使ってWordPressのサイト構築を行う場合、Dreamweaverの出番はテーマ（テンプレート）の作成がメインとなる。Dreamweaverの目玉機能である「ライブビュー」を使うことで、作成しているテーマがどのように表示されているかをDreamweaver上で確認しながら制作できる。ライブビューによってバラバラになっているCSSなどの各ファイルが統合されているため、CMSによるサイト構築の悩みの種であった「実際にサイト上で見るまで表示結果が分からない」といった問題も解決できるのが、もう1つの利点だ。

Dreamweaverの現在

　2013年夏に公開されたDreamweaver 13.1ではCSSデザイナーの機能強化が図られ、より直感的にCSSの調整ができるようになった。また、Chromium Embedded Framework（CEF）と統合できるようになり、Google Chromeと同等のパフォーマンスでHTMLの要素を表示できるようになった。13.1のアップデートについては記事「前版リリースからわずか2カ月、Dreamweaver CCはアップデートで何が変わったのか」でも触れているので、参考にしてみてほしい。

　その後公開されたバージョン13.2では、ユーザーの声を反映する形でユーザビリティの向上が図られている。

最も利用者がいるCMS、WordPressとは

　WordPressはCMS（Contents Management System）の一種だ。CMSはオープンソースのものもあれば有償のもの、企業で利用することを前提とした高額なものまでさまざまなタイプのCMSがリリースされている。

　WordPressはオープンソースなので無償で利用でき、アップデートごとにさまざまなWebのトレンドを吸収、個人ユーザーはもちろん、企業でも採用例が多く、最も利用者がいるCMSといえる。

　プログラム自体はPHPで書かれている。PHPとはWebアプリケーションを構築する際に利用される言語の1つだ。HTML内にスクリプトとして、直接プログラムを書き込んでいけるスタイルだが、比較的高度な処理も可能であり、学習コストも低いことから、さまざまなアプリケーションで利用されている。ソーシャルゲームでもPHPを採用しているところが多くある。

Dreamweaver＋WordPressの環境構築

Dreamweaverのインストール

　まず、Dreamweaverをインストールしていない方は、インストールを行おう。Adobe Creative Cloudに加入していれば、すぐにダウンロードして利用できる。