今日もまたWordPressのテーマいじりをはじめましょう。
前回は、ローカルにWordpressの環境を用意しました。
おかげで、自分のブログを見ている人に迷惑をかけないで、ゆっくりとテーマの変更に専念できるようになります。

今回は、Wordpressのテーマの全体の構成について、見ていきたいと思います。

Etudeテーマ作成

インストールしたばかりのWordpressには、二つのテーマがあります。defaultとclassicです。

ここでは、defaultのテーマを利用して、Wordpressのテーマについて、理解を深めていきましょう。

まず、NetBeansで、前回作成したwordpressプロジェクトを開きます。
左のプロジェクト・ウィンドウの中の、ソースファイル/wp-content/themesに、

Etudeフォルダを作る

ここに、お勉強用フォルダを作成します。

名前は、「etude」(エチュード)としておきましょう。習作・練習曲という意味ですね。

etudeフォルダに、defaultフォルダから、style.cssとindex.phpをコピーします。

style.cssを開き、テーマに関する基本情報を設定します。

/*
Theme Name: Etude
Theme URI: http://wordpress.org/
Description: 練習用
Version: 0.1
Author: <あなたの名前>
Author URI: <あなたのブログのURL>
*/

2-20行目までの薄く灰色になったコメントの箇所を上のように書き直してください。
そして、ブラウザで、wordpressのダッシュボードへアクセスし、「外観」メニューを開くと、Etudeテーマができていますね。

(テーマのスクリーンショットのところが空白なのは、画像を用意していないからです)

Etudeを試してみる

defaultには、たくさんのファイルが含まれていますが、Wordpressテーマは実はこのたった２つのファイルだけで動作するのです。

さっそく、Etudeテーマをつかってみましょう。

クリック

クリックして、テーマを適用します。どうでしょうか。

Etudeテーマ

あまり見た目はよろしくありませんが、動作していますね。

さて、index.phpのソースを見てみましょう。1行目が、

となっています。このget_header()という関数は、その名の通り、header.phpというファイルを探して、そのファイルの中身を挿入する機能を持っています。

ここで、覚えておいていただきたいのは、ヘッダを出力するためのheader.phpがない場合、defaultテーマのheader.phpが使用されるということです。

フッターやサイドバーも同様です。

index.phpとstyle.cssという２つのファイルしかないにもかかわらず、ヘッダやフッタやサイドバーが表示されているのは、defaultのおかげなのです。

最初の頃はすべてをカスタマイズすることはできませんので、いろんな場面でdefaultテーマが利用されることになると思います。defaultテーマは削除しないでおいてください。

気になる警告を削除する

ところで、右のサイドバーになにやら、Warningなるものがでていますね。

Warning: include(D:homewordpress/wp-content/themes/etude/searchform.php) [function.include]: failed to open stream: No such file or directory in D:homewordpresswp-contentthemesdefaultsidebar.php on line 6

「defaultのsidebar.phpを使って、サイドバーを出そうとしたが、searchform.phpというファイルがなくて困っている」と訴えているようです。

気になるので、訴えに従って、searchform.phpもdefaultフォルダからetudeフォルダへコピーしておきましょう。

もう一度、ブログのトップページを更新すると、検索窓がきちんと表示されることを確認してください。

StyleSheetで見た目を整える

Etudeのテーマはあまりにかっこわるいので、少しCSSを調整しておきましょう。 14行目から、20行目のbodyタグの背景色を白に変更します。

body {
	font-size: 62.5%; /* Resets 1em to 10px */
	font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
	background: #FFFFFF;
	color: #333;
	text-align: center;
	}

まだまだほめられたものではありませんが、スタートとしては十分でしょう。

その他、ヘッダの背景色、タイトルの大きさ、リンクの文字色などもお好きなものに変更してみてください。詳しいスタイルシートの書き方は、他のページや参考書に当たってみてください。ページ下部に、おすすめの参考書をいくつか載せておきました。

役者をそろえる

では、次に「これは欠かせない」と思われるファイルをEtudeに増やしておきましょう。

• header.php
• footer.php
• sidebar.php

それぞれヘッダ・フッタ・サイドバーを出力します。特に、これらはどのページでも共通で使用されるので、カスタマイズ必須でしょう。
また、読者からいただいたコメントを表示するための、

• comments.php

もテーマいじりには欠かせないでしょう。ちなみに、

• comments-popup.php

というファイルがdefaultにはありますが、こちらはコメントを別ウインドウでポップアップさせて表示したときのレイアウトです。

header.phpの中に、

と書いておけば、有効になります。

しかし、ポップアップは近年あまり好まれていないようですし、ブラウザによっては勝手にブロックしたりすることもあるので、ページ内にそのまま表示するのが無難でしょう。

さらに役者を増やす

すでに挙げた6つのphpファイルを変更すれば、ある程度オリジナルなテーマ作りができるようになります。

しかし、せっかくですので、他にどんなファイルがあるのか見ておきましょう。

と、その前に、Wordpressは、ページを表示するときに、どのテンプレートファイルを使うのか優先順位が決められています。
たとえば、ブログのトップページの場合、home.phpというファイルがあれば、そちらを優先して使用します。
home.phpが見つからない場合、index.phpを使用して、トップページコンテンツを表示します。

Codex:Template Hierarhyにもう少し詳しい説明がありますが、ここでも簡単にまとめておきます。

どこまでカスタマイズするのかによりますが、上の表で出現頻度の高いachive.phpも用意しておいたほうがいいかもしれません、ね。

ちなみに、defaultテーマ内には、archives.phpというファイルがあるが、これは3の自由に名前をつけてよい”マイ・テンプレートPHP”として用意されているものです。
これに対し、archive.phpは、過去記事をカテゴリ毎・タグ毎などに表示するために使用されるテンプレートです。

紛らわしいですね。

ご自身で、3の”マイ・テンプレートPHP”をご用意なさる際には、”etude-archives.php”などのように、
ファイル名にそうとわかるprefixをつけてあげた方がよいでしょう。

さて、今日はここまで。 全体の構成をつかむところまで来ました。

次回は、phpのメソッドの使い方を見ていきましょう。

スタイルシートの参考書：

少し前の本ですが、基本を知るにはよいきっかけになるものを2冊ほど紹介しておきます。

今までは、Dashboardのテーマエディタを開いて、ぽちぽち調整して、見栄えを確認していましたが、いずれ集客数が増えるとそのようなオン・ザ・フライな変更はできなくなります。恥ずかしいので。

そこで、ローカルでもWordPressをつくって、やることにしましょう。とはいえ、めんどうなことが嫌いなので、楽で高速な方法を採用します。

1. VertrigoServをインストール

VertrigoServとは、PHP, Apache, MySQL, phpMyAdmin, SQLiteなどをまとめたall-in-oneパッケージです。
Apacheをコンパイルしてインストールするのも楽しいものですが、今回は高速に環境を整えるため、さらりと入れてしまいましょう。

2. VertrigoServの設定

設定パネルを開きます。パネルのhttpd.confをクリックして、

120行目 Listen 8080
211行目 ServerName VertrigoServ:8080

と書き直します。MySQLで使用するポートは、パネル上で、
3306 -> 3307
に変更しました。

31: $cfg['Servers'][$i]['host'] = 'localhost';
32: $cfg['Servers'][$i]['port'] = '3307'; /* 追加 */

と書き足します。ここで、ブラウザを開いて、http://localhost:8080/phpmyadminへアクセスしてみます。無事に、

こんな画面を見ることができれば、よろしいです。せっかくなので、「新規データベースを作成する」メニューから、”wordpress”というデータベースをつくっておきましょう。照合順序は、utf8を使用しているなら、utf8_unicode_ciでいいのではないでしょうか。

3. Wordpressのインストール

展開すると、このようにずらずらとファイルが出てきます。

4. Wordpressへのアクセス方法を設定

VertrigoServのsettingsメニューから、[apache settings and aliases]という項目を選びます。

下段の、apache aliaesという表に、

wp : d:homewordpress

という項目を追加しました(wpは、もちろんwordpressの略名です)。

5. 再起動

VertrigoServメニューから、Server -> Restartを選択してください。アイコンの色が、になっていれば設定完了です。

6.Wordpressの設定

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のデータベース名 */
define('DB_NAME', 'wordpress');

/** MySQL のユーザー名 */
define('DB_USER', 'root');

/** MySQL のパスワード */
define('DB_PASSWORD', 'vertrigo');

/** MySQL のホスト名 (ほとんどの場合変更する必要はありません。) */
define('DB_HOST', 'localhost:3307');

/** データベーステーブルのキャラクターセット (ほとんどの場合変更する必要はありません。) */
define('DB_CHARSET', 'utf8');

/** データベースの照合順序 (ほとんどの場合変更する必要はありません。) */
define('DB_COLLATE', '');

ローカル開発用なので、rootでアクセスしていたり、Vertrigoのデフォルトのパスワードを使用していたりと、セキュアではない感じはしますが、外からのアクセスされることは想定しないので、気にしないことにしましょう。

（実際のサーバの設定をする場合は、wordpress専用のMySQLユーザを作り、参照/変更の権限を”wordpress”だけに限定し、パスワードは推測されにくいものに変えるなどの処置を行ってくださいね）。

ここまで終われば、http://localhost:8080/wpに、アクセスするだけです。ブログ名などを入れて、クリックすれば、Wordpressが自動的に、データベースのテーブル定義などをやってくれます。

NetBeansとは、元はJava言語を開発するためのIDEでしたが、6.0以降、Ruby(on Rails)や、PHPもサポートするようになりました。非常に便利なコード補完機能がありますので、使わない手はないでしょう。

用途にあわせていくつかのバンドルが用意されていますが、今回はWordpressテーマいじりが目的なので、軽量なPHP用でよいでしょう。

ここからの作業は、http://wp.tekapo.com/2009/01/14/netbeans-で-wordpress-をいぢる、導入編/に丁寧な解説があるので、簡単に記しておきます。

1. [ファイル]/[新規プロジェクト]をクリックし、[PHP]/[既存のソースを使用するPHPアプリケーション]を選択。
2. ソースフォルダを、”D:homewordpress”に設定、プロジェクト名は”Wordpress”などでよいでしょう。
3. 次へ。実行方法は、先ほどインストールしたVertrigoServを使用するので、ローカルWebサイトです。URLは、http://localhost:8080/wp。

これで完了です。私の環境の場合、プロジェクトを開くと、「構文エラー」がたくさん出てきました。原因はわかりませんが、気にしないでおきましょう（エラーはしばらくすると消えました）。

さて、ここまでで役者はそろいました。次回以降で、実際のWordpressテーマおよびソースコードを読みながら、よいテーマを模索する旅をはじめたいと思います。