DreamweaverとWordPressを連携してテーマを編集する手順 第1回：WordPressの基本知識

Dreamweaverl CC （2014年06月公開） 対応

この記事はアドビのDreamweaverを使ってWordPressのテーマを編集する手順を紹介するシリーズの第1回です。今回は、 WordPressの基礎として、多くのユーザーに使われる理由、インストールの手順、WordPressテーマとは何か、を学びます。また、 Dreamweaverでのテーマの編集を容易にするいくつかの機能を紹介します。

Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード

WordPressは今日最も広く使われているブログプラットフォームです。当初はブログ記事の作成や管理を容易にするよう設計されていたものが、次第にフル機能のコンテンツ管理システム以上へと進化しました。

WordPressの本当に優れた点はコンテンツとスタイルの分離にあります。WordPressブログのコンテンツはMySQLデータベース内に保管され、ページの読み込みのタイミングでビジュアル表現と組み合わされます。そのため、テーマを編集して公開することで、ブログの見た目を完全に変更できるのです。

テーマはファイルの集合（PHP, CSS など）です。動的に組み合わされて、CSSスタイル付きのHTMLになります。WordPressには標準のテーマが提供されていますし、インターネット上には数千の無償のテーマが公開されています。独自のテーマを作れば、CSSスタイルからコラムの数や位置まで全てをコントロールも可能です。多くの場合、新しいテーマを作る際には、既存のテーマをカスタマイズして希望する見た目に仕上げます。

この連載では独自のWrodpressテーマをDreamweaverでカスタマイズするまでの手順を紹介します。この記事では、以下の2つのトピックを扱います。

WordPressを構成する要素

世界に発信するべくWordPressブログを作ろうと思ったら、 WordPressサーバーを自分で立ち上げるか、wordpress.com を利用するかの2つの手段から選べます。wordpress.comへの開設を選ぶ場合はbrianwood.wordpress.comのようはURLからアクセスしますが、自前のサーバー上でWordPressを実行する場合は利用可能な全てのドメイン名を利用できます。

自身のサイトにWordPressを立ち上げるには、ブログを始めるまでの手間が少し増えます。WordPressソフトウェアの準備に加えて、PHPやMySQL,さらに独自のドメイン名が必要です。WordPressはwordpress.orgからダウンロードしてインストールできますが、サイトによっては簡易インストールツールが用意されていることもあるでしょう。

独自のテーマをつくる場合は、公開前に念のため確認したくなるかもしれません。既存のテーマを編集するにせよ、一から始めるにせよ、テーマをつくる際の最良の方法は、ローカル環境にWordPressとWebサーバーをインストールして作業することです。このような環境であれば、Dreamweaverを使ってテーマを編集してはテストし、完了したら公開用のWordPressサイトにアップロードできます。

この連載の第2回ではWordPressのインストール手順やDreamweaverにサイトを登録する手順を紹介します。

WordPressの動作の仕組み

WordPressをインストールすると、ブログを動作させるたくさんのファイルがインストールされます。 これらのファイルには、コアのファイル、管理用のファイル、実行用のスクリプト、テーマを保持するフォルダなどが含まれます。管理用のファイルは、http://www.mywebsite.com/wp-admin/ のようなURLを持った管理用サイトの一部となっています。管理サイトは、ブログの命名、スタイルの編集、などに使います。使用するテーマを指定するのもこの箇所です。この連載でDreamweaverをつくったら、WordPressの稼動するWebサイトにアップロードした後、管理画面を使って有効にします。

WordPressの管理画面

WordPressのブログページをブラウザーで開いたとき、裏では数多くの作業が行われています。ユーザーに送信され表示されるページの内容は、 その作業により決定されます。WordPressのコアファイルが、管理画面で設定されたオプションに基づいてページを組み立てるのです。

例えば、テーマのサイドバーにウィジェットを追加してあれば、WordPressは以下の手順を実行します：

  1. テーマがウィジェットをサポートすることを確認
  2. 追加されているウィジェット関連のコードを取得
  3. データベースや外部ソースからウィジェットを実現
  4. ページの読み込み時にサイドバーにウィジェットを表示

これらの全てが、ページを要求してからブラウザーに表示されるまでの間に行われます。それ以外にも、WordPressは、ページが投稿のリストな のか単独の投稿なのか、コメントがあるのか、コメントを許可するのか、パスワードで保護されているか、などの数多くのオプションを処理します。

WordPressはページを動的に生成するため、ブログを更新するたびにページを再構築する必要はありません。全てのページはリクエストのたびに データベースとテンプレートから生成されます。この仕組みのため、ブログやデザインの更新に必要な手間は少なく、サーバーに必要な容量も最小です。

WordPressテンプレートファイルの階層構造

WordPressのテーマを構成するテンプレートファイルはパズルのピースのようなものです。組み合わされるとWordPressサイトの完成さ れたWebページを形成します。ヘッダーやフッターなどいくつかのテンプレートファイルは、サイト内の全てのページで使われますが、他のファイルは条件に 応じて一部のページのみで使用されます。

テンプレートの階層内の全てのパスはindex.phpへと辿ることができます。index.phpは全てのテーマが必要とするファイルです。CSSスタイルシートと組み合わされ、デザイナーの意図次第で様々なPHPファイルを含みます。

ページのスタイルを変更する目的で、階層内にindex.phpより優先して使用する新しいファイルを作ることができます。例えば、ホームページの 見た目を刷新したい場合には、index.phpとは異なる構造とスタイルを持つhome.phpを追加します。ホームページが読み込まれるとき、 WordPressは、まずhome.phpを探し、見つからないとindex.phpを使用します。

WordPressページの構造

さて、WordPressがページ読み込み時にどのようにファイルを見つけるかを理解したら、個々のテンプレートがどのように組み合わされて完成したブログページになるのかを見てみましょう。以下の手順で、この記事で扱うテーマのコードを確認できます：

  1. サンプルファイルをダウンロードして展開
  2. Dreamweaverを起動
  3. index.phpをDreamweaverで開く
  4. ドキュメントツールバーの「コード」をクリックしてコードビューを表示

基本的なWordPressのページは3つの要素から構成されます。ヘッダー、コンテンツ、フッターです（下図参照）。これはよくある静的な HTMLページと似ています。ヘッダー要素には、通常 <doctype>, <html>, <head> といったタグが含まれます。スタイルシートやJavaScriptファイルへのリンクもここに含まれます。コンテンツ要素に含まれるのはブログ投稿やユー ザーが追加したその他の情報です。フッター要素は、著作権情報、関連リンク、問い合わせ先などと、</body>や< /html>といったタグも含みます。

WordPressページの基本要素

ダウンロードしたサンプルファイルにはindex.php以外にもいくつものファイルが含まれています。HTMLページの構築はindex.phpから始 まりますが、このファイルからテーマを構成する他のファイルが参照されます。最も一般的に参照される3つのファイルは、header.php, footer.php, sidebar.phpです（下図参照）。ヘッダーとフッターは必須ですが、サイドバーはオプションです。

基本的なWordPressページを構成するテンプレートファイル

Dreamweaverでindex.phpのコードを確認すると、3つのファイルを参照する以下のようなコードが見つかるでしょう。

<?php get_header(); ?> . . . <?php get_sidebar(); ?> . . . <?php get_footer(); ?>

これらのタグ（get_header, get_sidebar, get_footer）は、PHPエンジンに、ヘッダー、サイドバー、フッターのコンテンツを含むファイルを見つけ、それぞれの箇所に挿入するよう指示し ます。どうして直接index.phpファイルにヘッダーやフッターのコンテンツを記述しないのか？なぜ別のファイルを使うのか？これにはいくつかの理由 があります。しかし、一番重要なのは、分割しておくことで、他のページでもまったく同じヘッダーやフッターを表示できる点です。これは、CSSコードを 各々のページに記述する代わりに、外部ファイル化するアプローチと同様です。

誰かがブログページを訪問すると、WordPressはindex.phpファイルを読み込み、ヘッダーやフッターも含めたHTMLページを完成さ せて送り返します。たとえブログ投稿が何もない状態でも、CSSや画像のおかげでページはブログらしい外観を持つことでしょう。もちろん、ページ内には実 際のブログ記事があるべきです。それを実現するため、WordPressテーマは、PHPコードを使った「ループ（繰り返し処理）」を実装しています。

ループはindex.phpの中でも重要なコードのひとつです。Dreamweaverでサンプルコードを見ると下の図のようにループを記述した行が見つかります。以下のように書かれたコードです。

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> index.phpコード内のループの記述

このループ処理は、まず、表示すべきブログ記事の有無を確認しています。その後に、表示すべきブログ記事がなくなるまでブログ記事を表示するのに必要な処理を繰り返します。

では、ループ処理はどこから記事を持ってくるのでしょう？WordPressのインストール時には、自動または手動でMySQLデータベースを作成 します。ブログ記事、その他のコンテンツはそのデータベースに格納されます。ホームページに訪問者があると、ループ処理はデータベースを調べて、ブログ記 事のデータが格納されていれば、表示すべき全記事の情報を取得してホームページに挿入します。

WordPressをDreamweaverから扱う

WordPressは優れたオープンソースプラットフォームです。それでも、いきなりテーマの作成を始めるのはいささかの重荷でしょう。 WordPressから提供される編集環境は、簡単なハイライト機能を持つファイル管理ページくらいです。一方、Dreamweaverには WordPressテーマファイルの作成から、編集、確認までを支援する様々な機能があります。テーマの作成や修正には、まずDreaamweaverの 入手から始めましょう。

Dreamweaverに組み込まれているコードヒントはWordPressファイル内で役に立つヒントを示したり、不正なコードをハイライト表示します（下図参照）。WordPressのPHPコードの編集の助けにもなります。

DreamweaverのWordPressファイル向けコードヒント

Dreamweaverでは、テスト用のWebサーバーとWordPressを設定して、ライブビューで表示を確認しながらコード修正もできます。その他インスペクトモードやライブコードなど、WordPressテーマの編集に役立ついくつもの機能が利用可能です。

次のステップ

この連載の第2回では、ローカルにテスト用のWebサーバーをインストールして、Dreamweaverにサイト設定を登録したり、サイト固有のコードヒントが表示されるよう設定したり、ライブビューを使った表示確認する方法を紹介します。