ステップ３　ヘッダー

私たちのデザインは完全に確定し、どんなブラウザでも表示できる立派な物になったはずだ。そこで CSS 関連はひとまず終わりにしてヘッダーに注目してみよう。

ヘッダーは自分なりの独創性をほぼ完全に演出することのできる数少ない場所の一つだ。写真、広告、フラッシュアニメなど、好きな物を何でも置くことができる。覚えておいてほしいのだが、ヘッダーというのはあなたのサイトを訪れた人が最初に目にする場所であり、あなたのブログから注意をそらすのではなく引きつけることが重要であるということだ。

では header.php 内のコードを見てみよう。

最初の２行は XHTML の基本情報だ。ここはそのままにして分かりにくい箇所を見ていこう。

ここにあるのは：

• ヘッダー情報セクション（<heda>要素内のすべて）
• page div の始まり
• header div

<heda> セクション内のほとんどのコードは無視してかまわない。ここでは RSS と Atom フィードを定義していて、変更する必要はない。スタイルシートへのリンクもここにある。

WordPress が bloginfo (‘stylesheet_url’) を参照して正確なロケーションをここに入れるので、私たちがパスを書き込む必要はない。

wp_head の呼び出しによりプラグインが独自のヘッダーデータを追加することができる。ここもそのままでよい。変更したほうがいいかもしれない唯一の項目はタイトルの定義だ：

このタイトルはブラウザ・ウインドウのウインドウバーに表示されるものだ。

ここではタイトルは自分のブログ名 – bloginfo (‘name’) – で、 WordPress の管理画面で設定することができる。この後にあまり役に立ちそうにない風変わりなコードがいくつか続くが、大事なのは次の部分だ。

これは閲覧中のページのタイトルを表示する。デフォルトでは WordPress はタイトルと他を分けるのに raquo 記号 ‘»’ を使用している。これを次のように変更してみよう：

ここではセパレーターとしてダッシュ（横棒）を使用してみた。また、タイトルを自分の好きなように変更することもできる：

このタイトルは今のところ良さそうなのでこのままにしておく。

header.php のその他の部分はより重要だ：

ここで div ‘page’ が始まり、footer.php でこのタグが閉じられる。この page 要素はすべて – ヘッダー、コンテンツ、サイドバー、フッター – を囲んでいる。

この page 要素のすぐ後ろに別の div – ‘header’ – があり、そのまたすぐ後ろに ‘headerimg’ が続く。必ずしもこの構造を使用する必要はないのだが、このガイドのために残しておくことにする。ここには画像その他の項目を入れることができる。