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

[WP] WordPress 全ページにメインビジュアル画像(タイトル画像)をつけるカスタマイズ

WordPress のテンプレートカスタマイズメモ:
全ページにメインビジュアル画像(タイトル画像)をつけるカスタマイズ

WordPress 3.0〜 の新しい機能としてカスタムヘッダーという機能がある。
これは以下のような機能をもったもの。

  • 管理画面で全ページ共通で表示されるヘッダーイメージを選択できる
  • 固定ページ、投稿ページごとに投稿画面からヘッダーイメージをアップできる

しかし、これではカテゴリー一覧や検索関連では個別設定できないので、この機能を使って「タイトル画像」を各ページにセットする、という使い方はできない。

そこで、一つのテンプレートファイル(header.php)をカスタマイズして、以下のような仕様のヘッダーイメージを全ページに設定する方法を考えてみた。

  • トップページには大きめのメインビジュアル画像
  • カテゴリー一覧・個別投稿ページではカテゴリータイトル画像
  • 固定ページには個別のタイトル画像

条件分岐は、いつもの if 文で。

トップページにメインビジュアル画像

普通に固定で。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/main.jpg” alt=”” />

もしくはカスタムヘッダーを使う。(管理画面から差替え可能)

<img src=”<?php header_image(); ?>” width=”<?php echo HEADER_IMAGE_WIDTH; ?>” height=”<?php echo HEADER_IMAGE_HEIGHT; ?>” alt=”” />

カテゴリー一覧・個別投稿ページではカテゴリータイトル画像

カテゴリースラッグを抜き出して画像ファイル名を
{カテゴリースラッグ}_ttl.jpg
としてテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<?php $cat = get_the_category(); $cat = $cat[0]; {
echo ‘<img src=”‘ . get_bloginfo(“template_url”) . ‘/images/’ . $cat->category_nicename . ‘_ttl.jpg” alt=”‘ . $cat->cat_name . ‘” />’;
} ?>

固定ページには個別のタイトル画像

カスタムフィールドを使い 「ttl」のような key に セットした値を使って
{カスタムフィールド:ttlの値}_ttl.jpg
という名前の画像ファイルをテンプレートの画像ディレクトリに用意。
これを以下のように読み出す。

<img src=”<?php bloginfo( ‘template_url’ ); ?>/images/<?php echo get_post_meta($post->ID,’ttl’,true); ?>_ttl.jpg” alt=”<?php the_title(); ?>” />

全ページ・全カテゴリ分のテンプレートファイルを個別に用意するのに比べればかなり楽にタイトル画像を実現できたかと思います 🙂

スポンサーリンク