Movable Type 4.2 検索結果ページのカスタマイズ:ページナビゲーションをプルダウンメニューにする

Movable Type 4.2 検索結果ページのカスタマイズ:ページナビゲーションをプルダウンメニューにする

Posted at November 4,2008 12:33 AM
Tag:[Customize, MovableType, SearchResult]

Movable Type 4.2 の検索結果ページのカスタマイズで、5回目は「ページナビゲーションをプルダウンメニューにする」を紹介します。

その5:ページナビゲーションをプルダウンメニューにする

デフォルトテンプレートや配布テンプレートでは、ページナビゲーションがテキストで表示されます。

分割されたページが少ないと良いのですが、こんなに多くなると見栄えがよくありません。

分割ページが多い例

カスタマイズ後はページナビゲーションを次のようなプルダウンメニューにし、ナビゲーションのデザインをすっきりさせます。プルダウンメニューには表示中のページ番号を表示し、全体のページ数も表示します。

ページナビゲーションをプルダウンメニューにするには、次の変更を行ってください。修正内容はデフォルトテンプレート、配布テンプレート共通です。デフォルトテンプレートではナビゲーションのサブテンプレートが1行にまとめられているので、見やすいように適宜改行を入れています。

変更前:赤色を削除

<div class="content-nav">
  <mt:IfPreviousResults>
    <a href="<$mt:PreviousLink$>" rel="prev" onclick="return swapContent(-1);">&lt; 前</a>&nbsp;&nbsp;
  </mt:IfPreviousResults>
  <mt:PagerBlock>
    <mt:IfCurrentPage>
      <$mt:Var name="__value__"$>
    <mt:Else>
      <a href="<$mt:PagerLink$>"><$mt:Var name="__value__"$></a>
    </mt:IfCurrentPage>
    <mt:Unless name="__last__">&nbsp;</mt:Unless>
  </mt:PagerBlock>
  <mt:IfMoreResults>&nbsp;&nbsp;
    <a href="<$mt:NextLink$>" rel="next" onclick="return swapContent();">次 &gt;</a>
  </mt:IfMoreResults>
</div>

変更後:青色を追加

<script type="text/javascript">
//<![CDATA[
function selectUrl(sel){
    if(sel.options[sel.selectedIndex].value){
        location.href = sel.options[sel.selectedIndex].value;
    }
}
//]]>
</script>
<div class="content-nav">
  <mt:ifPreviousResults>
    <a href="<mt:previousLink />" rel="prev" onclick="return swapContent(-1);">&lt; 前</a>&nbsp;&nbsp;
  </mt:ifPreviousResults>
<form action="javascript:void()" style="display:inline">
<select name="select" onChange="selectUrl(this.form.select)">
<mt:pagerBlock>
  <mt:ifCurrentPage>
    <option value="<mt:pagerLink>" selected="selected"><mt:getVar name="__value__" /></option>
  <mt:else>
    <option value="<mt:pagerLink>"><mt:getVar name="__value__" /></option>
  </mt:ifCurrentPage>
<mt:unless name="__last__">&nbsp;</mt:unless>
</mt:pagerBlock>
</select> 
</form>/<mt:totalPages />ページ
  <mt:ifMoreResults>&nbsp;&nbsp;
    <a href="<mt:nextLink />" rel="next" onclick="return swapContent();">次 &gt;</a>
  </mt:ifMoreResults>
</div>

関連記事

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)