この記事は2年以上前に書かれた記事です。現状にそぐわないかもなのでご注意を。

[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;
}

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

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

スポンサーリンク