[wp]タイトルを画像にしてみる 2011

デザインポリシーによっては、Wordpressの各ページのタイトル画像にしたい場合があります。
今回は、よくある以下の仕様のタイトル画像をテンプレートカスタムとCSSで実現させます。

1. 固定ページでは全ページのタイトルを画像に。
2. 投稿系では一覧・詳細共に共通でカテゴリー名をタイトル画像に。
   （記事が属するカテゴリは一つだけとする）

これを実現するためには、タイトル要素をCSSで指定できるようにすればいい。
Wordpressは body のクラスに自動でページIDや投稿IDをつけてくれているのですが、これをフックにする場合、以下の問題が・・・

• ページや投稿記事を作成するまでIDが何になるかわからない
• 投稿記事のbodyには属するカテゴリについての情報を出力しない

そこで、タイトル要素の親要素のクラスに

1. 固定ページでは、ページスラッグ
2. 投稿記事一覧・詳細では、カテゴリースラッグ

を出力するようにカスタマイズします。

1. ページスラッグの出力カスタマイズ例（page.php）

<div id="content" class="pgslug-<?php echo get_page_uri($post->ID);?>" role="main">

第3階層以下は全て第2階層のタイトル画像を使用する （2011/11/01追記）

• 商品紹介
  • 商品その1
  • 商品その2
    • 商品その2のバリエーションその1
    • 商品その2のバリエーションその2
  • ・・・

というような階層構造をWordpressで作成している場合、タイトル画像は商品紹介以下全ページで「商品画像」としたい、という場合が多いかと。
そんな場合はこれで。

<?php
$top_post = get_post($post->ID);
while ($top_post->post_parent) { $top_post = get_post($top_post->post_parent); }
$top_slug = get_page_uri($top_post->ID);
?>
<div id="content" class="pgslug-<?php echo $top_slug;?>" role="main">

2. カテゴリースラッグの出力カスタマイズ例（single.php, category.php）

<?php
$cat = get_the_category();
$catslug = $cat[0]->category_nicename;
?>
<div id="content" class="pgslug-<?php echo $catslug; ?>" role="main">

その他のコンテンツでは…

アーカイブや検索系では body に対応するクラスが付いているので、それをフックにします。

• アーカイブ：archive
• タグ：tag
• 検索系共通：search
  • 検索結果一覧：search-results
  • 検索で見つからない：search-no-results
• Not found：error404

あとはこれら全てのクラスに対して

.pgslug-xxxx #page-title {
width: 100%;
height: 35px;
overflow: hidden;
text-indent: -999em;
background: url(画像のパス) no-repeat;
}

のように背景画像を設定すればいいかと。

できればプレーンテキストでハマるデザインで提案しておきたいところですが…どうしてもって場合もあるので、備えあれば憂いなし。