wordpress タグ2

ヘッダーのナビゲーションを、cssロールオーバーで制作することに。
一枚のgif画像から、エリアを切り取って　a、a:hover、a:active、stayを表示させる。
いわゆるアップルストアみたいなやつ。

いま作っているwordpressのサイトの場合、ひとつの『header.php』をすべてのページに使用している。
ページごとにhtmlを書くことは出来ないが、そのかわりに、条件分岐を使って、ページごとに異なるhtmlを読み込ませてみる。

<?php if(is_page('11')): ?>

<div id="navi">
<ul id="g_navi">
<li id="page1_stay"><a href="?page_id=11">page1</a></li>
<li id="page2"><a href="?page_id=12">page2</a></li>
<li id="page3"><a href="?page_id=13">page3</a></li>
<li id="page4"><a href="?page_id=14">page4</a></li>
<li id="page5"><a href="?page_id=15">page5</a></li>

</ul>
</div>

<?php endif; ?>

<?php if(is_page('12')): ?>

<div id="navi">
<ul id="g_navi">
<li id="page1"><a href="?page_id=11">page1</a></li>
<li id="page2_stay"><a href="?page_id=12">page2</a></li>
<li id="page3"><a href="?page_id=13">page3</a></li>
<li id="page4"><a href="?page_id=14">page4</a></li>
<li id="page5"><a href="?page_id=15">page5</a></li>

</ul>
</div>

<?php endif; ?>

・・・・・・・・・・・・

以下ページの枚数分続く。（笑）

cssで#page1〜5と、#page1_stay〜page5_stayの指定を書けば出来上がり。
あんまり頭の良いやり方ではないような気もするが、いいやり方がわからない。
もっとかんたんな書き方があれば、教えてください。