PrimePress, ページごとにヘッダ画像を切り替える

このサイトに使っているテーマ、PrimePressですが、920px×200pxの画像がロードごとにランダムにヘッダ部分に表示されることになっています。付属の画像もなかなかステキなのですが、サイト構成としてはページごとに特定の画像を出してヘッダにしたくなります。

というわけでやってみました。

また、WordPressにはわりあい初心者の部類なのでかなり結果オーライで進んでる部分があるので、参考にする場合は自己責任でおねがいします。

まずトップページにはFlashを入れたいので、Flash挿入を簡単にするプラグインを入れてます。
Kimili Flash Embed
Flashを使わない時は普通にimgタグで入れればOKですね。

それではカスタマイズはまずheader.phpからです。
WordPressをインストールしたフォルダをルートフォルだとすると、ここにあります。

/wp-content/themes/primepress/header.php

修正前に必ず元ファイルはバックアップをとって下さい。複製して、header100204.phpというような名前にしておけばOK。

それではheader.phpを書き換えます。全部で50行ほどのコードですが、一番最後のこの部分が変更する部分です。

<div id="rotating">
	<?php include (TEMPLATEPATH . '/header-images.php'); ?>
</div>

ここをこんなふうにしています。

<div id="rotating">
<?php if(wp_title(' ', false)) { ?>
	<?php include (TEMPLATEPATH . '/header-images.php'); ?>
<?php } else { ?>
	「kml_flashembed movie="top.swf" height="150" width="920" /」
<?php } ?>
</div>

*”「”と”」”の部分は表示用に変更しています。”[“と”]”に入れ替えて下さい。
これでトップページに指定したページではFlashが、他のページでは今まで通りの画像が表示されます。

次はheader-images.phpをカスタマイズします。

/wp-content/themes/primepress/header-images.php

元のコードはこれ。2行だけです。

<img src="<?php bloginfo('template_url'); ?>/rotating.php?image=<?php echo mt_rand(0,100); ?>"
width="920" alt="<?php bloginfo('name'); ?> Rotating Header Image" title="<?php bloginfo('name'); ?> Random Header Image" />

ここをこんなふうに変更します。

<?php if(is_home()){ ?>
	<img src="images/Weblog.jpg" width=920" height=150" alt="Weblog" >
<?php }elseif(is_page(array('About','Contact','Site_Map'))){ ?>
	<img src="images/<?php the_title(); ?>.jpg" width="920" height="150" alt="<?php the_title(); ?>" >
<?php }else{ ?>
	<img src="<?php bloginfo('template_url'); ?>/rotating.php?image=<?php echo mt_rand(0,100); ?>"
	width="920" height="150" alt="<?php bloginfo('name'); ?> Rotating Header Image" title="<?php bloginfo('name'); ?> Random Header Image" />
<?php } ?>

1行目は「投稿のページ」かどうかを判断しています。「投稿のページ」はタイトルがないので別途ファイル名は指定してやる必要があります。
3行目はその他のページで、ページ名のあるページのための画像ファイルを指定しています。画像ファイル名はページ名そのものです。

この部分のarray(‘xxxx’,’yyyy’,・・・)はこういう場合便利なパラメータ（？）です。arrayの引数の中のどれかが存在するとif文はtrueになります。

<?php }elseif(is_page(array('About','Contact','Site_Map'))){ ?>

6行目は元のコードをそのまま使っています。
今まで通り /wp-content/themes/primepress/headers フォルダの画像ファイルがランダムに表示されます。
先ほどのswfはルートに、ここで使う画像ファイルは、ルートフォルダにimagesフォルダを作って入れています（手抜きですが・・・）。

これでフロントページにはFlashが、下層ページで単独ページとして作成したページとブログのページにはそれぞれ特定のタイトル画像が、その他のページにはランダムに画像ファイルが表示されます。

めでたしめでたし。