デザインポリシーによっては、Wordpressの各ページのタイトル画像にしたい場合があります。
今回は、よくある以下の仕様のタイトル画像をテンプレートカスタムとCSSで実現させます。
- 固定ページでは全ページのタイトルを画像に。
- 投稿系では一覧・詳細共に共通でカテゴリー名をタイトル画像に。
(記事が属するカテゴリは一つだけとする)
これを実現するためには、タイトル要素をCSSで指定できるようにすればいい。
Wordpressは body のクラスに自動でページIDや投稿IDをつけてくれているのですが、これをフックにする場合、以下の問題が・・・
- ページや投稿記事を作成するまでIDが何になるかわからない
- 投稿記事のbodyには属するカテゴリについての情報を出力しない
そこで、タイトル要素の親要素のクラスに
- 固定ページでは、ページスラッグ
- 投稿記事一覧・詳細では、カテゴリースラッグ
を出力するようにカスタマイズします。
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; }
のように背景画像を設定すればいいかと。
できればプレーンテキストでハマるデザインで提案しておきたいところですが…どうしてもって場合もあるので、備えあれば憂いなし。