はじめてのWordPressテーマ(2)

こんにちは。

今日もまた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冊ほど紹介しておきます。